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

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

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

Ответов (20)

Решение

Что ж, если вы не хотите делать это с помощью 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: That is 'underscore-underscore-doPostBack' ... And, there should be no space in that sequence... Somehow the WMD does not allow me to write to underscores followed by a character!

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

Библиотека 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.

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

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

ClientScript.GetPostBackEventReference(this, "");

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

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

Или это

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

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

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

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

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

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

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

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

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

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

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

использованная литература

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

Касательно:

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

button.click();

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

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

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

Вы также можете получить его, просто добавив эту строку в свой код 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();

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

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

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

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

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

Цитата

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

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

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

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

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

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

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

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

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

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