Вызвать функцию ASP.NET из JavaScript?

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

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

Что ж, если вы не хотите делать это с помощью 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. Теперь вы можете вызвать любое другое событие, которое вам нравится.

PS: Это 'underscore-underscore-doPostBack' ... И в этой последовательности не должно быть места ... Почему-то WMD не позволяет мне писать в подчеркивания, за которыми следует символ!

__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();

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

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

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

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

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

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

PageClassName.Get5(javascriptCallbackFunction);

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

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

Думаю, вам поможет сообщение в блоге Как получить и показать данные базы данных 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;
}

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

Однако вы обнаружите, что если вы собираетесь работать с веб-сайтами, вы должны быть непредвзятыми и начать думать более веб-ориентированными (то есть не пытайтесь делать что-то на стороне клиента на сервере и наоборот). . Я люблю веб-формы 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, давая людям, посещающим ваш сайт, больше общего. Не жертвуя ничем, вы получаете лучшее из обоих миров.

Ссылки

• Аякс ,
• jQuery Ajax ,
• Контроллер в веб-формах

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

Это библиотека под названием AjaxPro, которая была написана MVP по имени Майкл Шварц . Это была библиотека, написанная не Microsoft.

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

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

Для запуска обработчика событий элемента управления: если вы уже добавили 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. Напишите обработчик событий на стороне сервера для вашего элемента управления

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

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

      функция SayHello () {__doPostBack ("btnSayHello", ""); }

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

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

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

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

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

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

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

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

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

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

Возможно, вы захотите создать веб-службу для своих общих методов.
Просто добавьте WebMethodAttribute к функциям, которые вы хотите вызвать, и все.
Наличие веб-службы со всеми вашими обычными вещами также упрощает обслуживание системы.

Если функция __doPostBack не сгенерирована на странице, вам нужно вставить элемент управления, чтобы заставить ее работать следующим образом:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

Что касается:

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

button.click();

Должно получиться так:

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

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

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

ClientScript.GetPostBackEventReference(this, "");

Вы можете использовать PageMethods.Your C# method Nameдля доступа к методам C # или методам VB.NET в JavaScript.

Попробуй это:

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

Или это

Response.Write("<script>alert('Hello World');</script>");

Используйте свойство OnClientClick кнопки для вызова функций JavaScript ...

Вы также можете получить его, просто добавив эту строку в свой код JavaScript:

document.getElementById('<%=btnName.ClientID%>').click()

Я думаю, это очень просто!

Пожалуйста, попробуйте это:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

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

Самый простой и лучший способ добиться этого - использовать onmouseup() событие JavaScript, а неonclick()

Таким образом, вы запускаете JavaScript после щелчка, и он не будет мешать OnClick()событию ASP .

Я пробую это и поэтому могу запустить метод Asp.Net при использовании jQuery.

1. Сделайте перенаправление страницы в своем коде jQuery

   window.location = "Page.aspx?key=1";
   

2. Затем используйте строку запроса в загрузке страницы

   protected void Page_Load(object sender, EventArgs e)
   {
       if (Request.QueryString["key"] != null)
       {
           string key= Request.QueryString["key"];
           if (key=="1")
           {
               // Some code
           }
       }
   }
   

Так что не нужно запускать дополнительный код

Этот ответ работает для меня как ветер, спасибо кросс-браузеру:

Метод __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(); 

Цитата