Вызов функции ASP.NET из JavaScript?

Question

Я пишу веб-страницу в ASP.NET. У меня есть некоторый код JavaScript, и у меня есть кнопка отправки с событием щелчка.

Можно ли вызвать метод, созданный мной в ASP, с помощью события click JavaScript?

Answer 1

Что ж, если вы не хотите делать это с помощью Ajax или любым другим способом и просто хотите, чтобы произошла нормальная обратная передача ASP.NET, вот как вы это делаете (без использования каких-либо других библиотек):

Хотя это немного сложно ...:)

я. В своем файле кода (при условии, что вы используете C # и .NET 2.0 или более позднюю версию) добавьте следующий интерфейс к своему классу Page, чтобы он выглядел как

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

II. Это должно добавить (используя Tab - Tab ) эту функцию к вашему файлу кода:

public void RaisePostBackEvent(string eventArgument) { }

III. В своем событии onclick в JavaScript напишите следующий код:

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

Это вызовет метод RaisePostBackEvent в вашем кодовом файле с аргументом eventArgument в качестве аргумента String, который вы передали из JavaScript. Теперь вы можете позвонить на любое другое понравившееся вам событие.

P.S .: Это 'underscore-underscore-doPostBack' ... И в этой последовательности не должно быть пробелов ... Каким-то образом ОМУ не позволяет мне писать в подчеркиваниях, за которыми следует символ!

Answer 2

Метод __doPostBack() хорошо работает.

Другое решение (очень хакерское) - просто добавить невидимую кнопку ASP в разметку и щелкнуть по ней методом JavaScript.

<div style="display: none;">
   <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>

Из вашего JavaScript найдите ссылку на кнопку, используя ClientID , а затем вызовите для нее метод .click () .

var button = document.getElementById(/* button client id */);

button.click();

Answer 3

Библиотека Microsoft AJAX выполнит это. Вы также можете создать собственное решение, использующее AJAX для вызова собственных файлов сценариев aspx (как в основном) для запуска функций .NET.

Я предлагаю библиотеку Microsoft AJAX. После установки и ссылки вы просто добавляете строку в страницу загрузки или инициализации:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Тогда вы можете делать такие вещи, как:

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function

Затем вы можете назвать его на своей странице как:

PageClassName.Get5(javascriptCallbackFunction);

Последний параметр вашего вызова функции должен быть функцией обратного вызова javascript, которая будет выполняться при возврате запроса AJAX.

Answer 4

Вы можете сделать это асинхронно, используя .NET Ajax PageMethods. См. здесь или здесь .

Answer 5

Статическое, строго типизированное программирование всегда казалось мне очень естественным, поэтому сначала я сопротивлялся изучению JavaScript (не говоря уже о HTML и CSS), когда мне приходилось создавать веб-интерфейсы для моих приложений. Я бы сделал все, чтобы обойти это, например, перенаправление на страницу просто для выполнения и действия над событием OnLoad, если бы я мог писать на чистом C #.

Однако вы обнаружите, что если вы собираетесь работать с веб-сайтами, вы должны быть непредвзятыми и начать думать более веб-ориентированными (то есть не пытайтесь делать что-то на стороне клиента на сервере и т. Д.) -versa). Я люблю веб-формы ASP.NET и до сих пор использую их (а также MVC ), но я скажу, что, пытаясь упростить ситуацию и скрывая разделение клиента и сервера, это может сбить с толку новичков и фактически привести к усложняя время от времени.

Мой совет - изучить некоторый базовый JavaScript (как регистрировать события, извлекать объекты DOM, манипулировать CSS и т. Д.), И вы найдете веб-программирование намного более приятным (не говоря уже об упрощении). Многие люди упоминали о различных библиотеках Ajax, но я не видел реальных примеров Ajax, так что вот так. (Если вы не знакомы с Ajax, все, что вам нужно, это сделать асинхронный HTTP-запрос на обновление содержимого (или, возможно, выполнить действие на стороне сервера в вашем сценарии) без перезагрузки всей страницы или полной обратной передачи.

на стороне клиента:

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request

xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
    if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
          document.getElementById("resultText").innerHTML = xmlhttp.responseText;
    }
};
</script>

Вот и все. Хотя имя может вводить в заблуждение, результат может быть в виде простого текста или JSON, но вы не ограничены XML. jQuery предоставляет еще более простой интерфейс для выполнения вызовов Ajax (помимо упрощения других задач JavaScript).

Запрос может быть HTTP-POST или HTTP-GET и не обязательно должен быть на веб-странице, но вы можете публиковать сообщения в любой службе, которая прослушивает HTTP-запросы, например, RESTful API. Веб-API ASP.NET MVC 4 позволяет также настроить веб-службу на стороне сервера для быстрой обработки запроса. Но многие люди не знают, что вы также можете добавить контроллеры API в проект веб-форм и использовать их для обработки вызовов Ajax, подобных этой.

на стороне сервера:

public class DataController : ApiController
{
    public HttpResponseMessage<string[]> Get()
    {
        HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
            Repository.Get(true),
            new MediaTypeHeaderValue("application/json")
        );

        return response;
    }
}

Global.asax

Затем просто зарегистрируйте HTTP-маршрут в файле Global.asax, чтобы ASP.NET знал, как направить запрос.

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

С помощью AJAX и контроллеров вы можете в любое время выполнить асинхронную отправку на сервер для выполнения любой операции на стороне сервера. Этот один-два удара обеспечивает как гибкость JavaScript, так и мощь C # / ASP.NET, давая людям, посещающим ваш сайт, общее удобство работы. Не жертвуя ничем, вы получаете лучшее из обоих миров.

Ссылки

• Ajax
• jQuery Ajax ,
• Контроллер в Webforms

Answer 6

Я думаю, что запись в блоге Как получить и показать данные базы данных SQL Server на странице ASP.NET с помощью Ajax (jQuery) поможет вам.

Код JavaScript

<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">

    function GetCompanies() {
        $("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCompanies",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }

    function OnSuccess(data) {
        var TableContent = "<table border='0'>" +
                                "<tr>" +
                                    "<td>Rank</td>" +
                                    "<td>Company Name</td>" +
                                    "<td>Revenue</td>" +
                                    "<td>Industry</td>" +
                                "</tr>";
        for (var i = 0; i < data.d.length; i++) {
            TableContent += "<tr>" +
                                    "<td>"+ data.d[i].Rank +"</td>" +
                                    "<td>"+data.d[i].CompanyName+"</td>" +
                                    "<td>"+data.d[i].Revenue+"</td>" +
                                    "<td>"+data.d[i].Industry+"</td>" +
                                "</tr>";
        }
        TableContent += "</table>";

        $("#UpdatePanel").html(TableContent);
    }

    function OnError(data) {

    }
</script>

Функция ASP.NET на стороне сервера

[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
    System.Threading.Thread.Sleep(5000);
    List<TopCompany> allCompany = new List<TopCompany>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCompany = dc.TopCompanies.ToList();
    }
    return allCompany;
}

Answer 7

Библиотека Microsoft AJAX выполнит это. Вы также можете создать собственное решение, использующее AJAX для вызова собственных файлов сценариев aspx (как в основном) для запуска функций .NET.

Это библиотека с именем AjaxPro, которая была написана MVP с именем Michael Schwarz . Эта библиотека не была написана Microsoft.

Я широко использовал AjaxPro, и это очень хорошая библиотека, которую я бы порекомендовал для простых обратных вызовов на сервер. Это работает хорошо с версией Microsoft Ajax без проблем. Тем не менее, я хотел бы заметить, с тем, как легко Microsoft сделала Ajax, я бы использовал его, только если это действительно необходимо. Для выполнения действительно сложных функций, которые вы получаете от Microsoft, нужно много JavaScript, просто поместив его на панель обновлений.

Answer 8

Это так просто для обоих сценариев (то есть синхронных / асинхронных), если вы хотите запустить обработчик событий на стороне сервера, например, событие нажатия кнопки.

Для запуска обработчика события элемента управления: Если вы уже добавили ScriptManager на свою страницу, пропустите шаг 1.

1. Добавьте следующее в раздел клиентских скриптов вашей страницы

   //<![CDATA[
   var theForm = document.forms['form1'];
   if (!theForm) {
       theForm = document.form1;
   }
   function __doPostBack(eventTarget, eventArgument) {
       if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
           theForm.__EVENTTARGET.value = eventTarget;
           theForm.__EVENTARGUMENT.value = eventArgument;
           theForm.submit();
       }
   }
   //]]>
   

   2. Напишите вам обработчик событий на стороне сервера для вашего элемента управления

      защищенный void btnSayHello_Click (отправитель объекта, EventArgs e) { Label1.Text = "Hello World ..."; }

   3. Добавить клиентскую функцию для вызова обработчика событий на стороне сервера

      function SayHello () { __doPostBack ("btnSayHello", ""); }

Замените "btnSayHello" в приведенном выше коде на идентификатор клиента вашего элемента управления.

При этом, если ваш элемент управления находится внутри панели обновления, страница не будет обновляться. Это так просто.

Еще одно замечание: будьте осторожны с идентификатором клиента, поскольку он зависит от вашей политики генерации идентификатора, определенной в свойстве ClientIDMode.

Answer 9

Я пытаюсь реализовать это, но это не работает правильно. Страница является отправлять обратно, но мой код не выполняется. Когда я отлаживаю страница, RaisePostBackEvent никогда не запускается. Одна вещь, которую я сделал иначе я делаю это в пользовательском элементе управления вместо aspx стр.

Если кто-то похож на Мерк и у меня возникли проблемы с этим, у меня есть решение:

Когда у вас есть пользовательский элемент управления, кажется, что вы также должны создать PostBackEventHandler на родительской странице. И затем вы можете вызвать PostBackEventHandler пользовательского элемента управления, вызвав его напрямую. Смотрите ниже:

public void RaisePostBackEvent(string _arg)
{
    UserControlID.RaisePostBackEvent(_arg);
}

Где UserControlID - это идентификатор, который вы дали пользовательскому элементу управления на родительской странице, когда вложили его в разметку.

Примечание: Вы также можете просто просто вызвать методы, принадлежащие этому пользовательскому элементу управления напрямую (в этом случае вам понадобится только обработчик RaisePostBackEvent на родительской странице):

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

Answer 10

Относительно:

var button = document.getElementById(/* Button client id */);

button.click();

Это должно быть как:

var button = document.getElementById('<%=formID.ClientID%>');

Где formID - это идентификатор элемента управления ASP.NET в файле .aspx.