Wywołać funkcję ASP.NET z JavaScript?

Piszę stronę internetową w ASP.NET. Mam kod JavaScript i przycisk przesyłania ze zdarzeniem kliknięcia.

Czy możliwe jest wywołanie metody utworzonej w ASP za pomocą zdarzenia click JavaScript?

Cóż, jeśli nie chcesz tego robić za pomocą Ajax lub w żaden inny sposób i po prostu chcesz, aby nastąpiło normalne ogłaszanie zwrotne ASP.NET, oto jak to zrobić (bez korzystania z innych bibliotek):

Jest to trochę trudne ... :)

ja. W pliku kodu (zakładając, że używasz C # i .NET 2.0 lub nowszego) dodaj następujący interfejs do swojej klasy Page, aby wyglądał jak

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

ii. Powinno to dodać (używając Tab- Tab) tę funkcję do twojego pliku kodu:

public void RaisePostBackEvent(string eventArgument) { }

iii. W zdarzeniu onclick w JavaScript napisz następujący kod:

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

Spowoduje to wywołanie metody „RaisePostBackEvent” w pliku kodu z wartością „eventArgument” jako „argumentString” przekazaną z JavaScript. Teraz możesz zadzwonić na dowolne inne wydarzenie.

PS: To jest „podkreślenie-podkreślenie-doPostBack”… I nie powinno być spacji w tej sekwencji… W jakiś sposób broń masowego rażenia nie pozwala mi pisać podkreślenia, po którym następuje znak!

__doPostBack()Metoda działa dobrze.

Innym rozwiązaniem (bardzo hakerskim) jest po prostu dodanie niewidocznego przycisku ASP do znaczników i kliknięcie go metodą JavaScript.

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

Z JavaScript pobierz odwołanie do przycisku, używając jego ClientID, a następnie wywołaj na nim metodę .click () .

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

button.click();

Biblioteki Microsoft AJAX będzie tego dokonać. Możesz również utworzyć własne rozwiązanie, które obejmuje użycie AJAX do wywoływania własnych plików skryptów aspx (w zasadzie) w celu uruchamiania funkcji .NET.

Proponuję bibliotekę Microsoft AJAX. Po zainstalowaniu i przywołaniu wystarczy dodać wiersz w ładowaniu lub inicjalizacji strony:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Następnie możesz wykonać następujące czynności:

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

Następnie możesz nazwać to na swojej stronie jako:

PageClassName.Get5(javascriptCallbackFunction);

Ostatnim parametrem wywołania funkcji musi być funkcja zwrotna javascript, która zostanie wykonana po zwróceniu żądania AJAX.

Możesz to zrobić asynchronicznie za pomocą .NET Ajax PageMethods. Zobacz tutaj lub tutaj .

Myślę, że post na blogu Jak pobrać i pokazać dane bazy danych SQL Server na stronie ASP.NET przy użyciu Ajax (jQuery) pomoże ci.

Kod 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>

Funkcja po stronie serwera 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;
}

Statyczne, silnie typowane programowanie zawsze wydawało mi się bardzo naturalne, więc na początku oparłem się nauce języka JavaScript (nie wspominając o HTML i CSS), kiedy musiałem tworzyć interfejsy internetowe dla moich aplikacji. Zrobiłbym wszystko, aby obejść ten problem, jak przekierowanie do strony tylko po to, aby wykonać i wykonać akcję na zdarzeniu OnLoad, o ile mógłbym zakodować czysty C #.

Przekonasz się jednak, że jeśli zamierzasz pracować z witrynami internetowymi, musisz mieć otwarty umysł i zacząć myśleć bardziej o sieci (to znaczy nie próbuj robić rzeczy po stronie klienta na serwerze i odwrotnie). . Uwielbiam formularze internetowe ASP.NET i nadal z nich korzystam (podobnie jak MVC ), ale powiem, że próbując uprościć sprawę i ukrywając oddzielenie klienta od serwera, może to zmylić nowicjuszy i czasami utrudniać sprawę .

Radzę nauczyć się podstaw JavaScript (jak rejestrować zdarzenia, pobierać obiekty DOM, manipulować CSS, itp.), A programowanie w sieci będzie dla ciebie o wiele przyjemniejsze (nie wspominając o łatwiejszym). Wiele osób wspomniało o różnych bibliotekach Ajax, ale nie widziałem żadnych rzeczywistych przykładów Ajax, więc oto one. (Jeśli nie jesteś zaznajomiony z Ajaxem, wystarczy, że wyślesz asynchroniczne żądanie HTTP w celu odświeżenia treści (lub może wykonać akcję po stronie serwera w twoim scenariuszu) bez ponownego ładowania całej strony lub pełnego ogłaszania zwrotnego.

Strona klienta:

<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>

Otóż ​​to. Chociaż nazwa może wprowadzać w błąd, wynik może być również zapisany jako zwykły tekst lub JSON, nie jesteś ograniczony do XML. jQuery zapewnia jeszcze prostszy interfejs do wykonywania wywołań Ajax (między innymi w upraszczaniu innych zadań JavaScript).

Żądanie może być HTTP-POST lub HTTP-GET i nie musi dotyczyć strony internetowej, ale można wysłać do dowolnej usługi nasłuchującej żądań HTTP, takiej jak RESTful API. Interfejs API sieci Web ASP.NET MVC 4 sprawia, że ​​skonfigurowanie usługi internetowej po stronie serwera do obsługi żądania również jest proste. Ale wiele osób nie wie, że można również dodawać kontrolery API do projektu formularzy internetowych i używać ich do obsługi takich wywołań Ajax.

Po stronie serwera:

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

Następnie po prostu zarejestruj trasę HTTP w pliku Global.asax, aby ASP.NET wiedział, jak skierować żądanie.

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

Dzięki AJAX i kontrolerom możesz w dowolnym momencie wysyłać z powrotem do serwera asynchronicznie, aby wykonać dowolną operację po stronie serwera. Ta podwójna wydajność zapewnia zarówno elastyczność języka JavaScript, jak i moc języka C # / ASP.NET, zapewniając użytkownikom odwiedzającym witrynę lepsze ogólne wrażenia. Bez poświęcania czegokolwiek zyskujesz to, co najlepsze z obu światów.

Bibliografia

• Ajax ,
• jQuery Ajax ,
• Kontroler w formularzach internetowych

Umożliwi to biblioteka Microsoft AJAX. Możesz również utworzyć własne rozwiązanie, które obejmuje użycie AJAX do wywoływania własnych plików skryptów aspx (w zasadzie) w celu uruchamiania funkcji .NET.

To jest biblioteka o nazwie AjaxPro, która została napisana przez MVP o imieniu Michael Schwarz . Ta biblioteka nie została napisana przez firmę Microsoft.

Często używałem AjaxPro i jest to bardzo fajna biblioteka, którą poleciłbym do prostych wywołań zwrotnych na serwerze. Działa dobrze z wersją Ajax firmy Microsoft bez żadnych problemów. Jednak chciałbym zauważyć, że dzięki temu, jak łatwo Microsoft stworzył Ajax, użyłbym go tylko wtedy, gdy jest to naprawdę konieczne. Do wykonania naprawdę skomplikowanych funkcji, które można uzyskać od firmy Microsoft, potrzeba dużo JavaScript, po prostu wrzucając je do panelu aktualizacji.

Jest to tak łatwe dla obu scenariuszy (to znaczy synchronicznych / asynchronicznych), jeśli chcesz wyzwolić procedurę obsługi zdarzeń po stronie serwera, na przykład zdarzenie kliknięcia przycisku.

Aby wyzwolić procedurę obsługi zdarzeń kontrolki: Jeśli dodałeś już ScriptManager na swojej stronie, pomiń krok 1.

1. Dodaj następujące elementy w sekcji skryptu klienta strony

   //<![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. Napisz program obsługi zdarzeń po stronie serwera dla kontrolki

      protected void btnSayHello_Click (nadawca obiektu, EventArgs e) {Label1.Text = "Witaj świecie ..."; }

   3. Dodaj funkcję klienta, aby wywołać procedurę obsługi zdarzeń po stronie serwera

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

Zastąp „btnSayHello” w powyższym kodzie identyfikatorem klienta kontrolki.

W ten sposób, jeśli twoja formant znajduje się w panelu aktualizacji, strona nie zostanie odświeżona. To takie proste.

Jeszcze jedna rzecz do powiedzenia to: Uważaj na identyfikator klienta, ponieważ zależy on od polityki generowania identyfikatorów zdefiniowanej we właściwości ClientIDMode.

Próbuję to zaimplementować, ale to nie działa prawidłowo. Strona jest wysyłana z powrotem, ale mój kod nie jest wykonywany. Podczas debugowania strony zdarzenie RaisePostBackEvent nigdy nie jest uruchamiane. Jedyną rzeczą, którą zrobiłem inaczej, jest to, że robię to w kontrolce użytkownika, a nie na stronie aspx.

Jeśli ktoś jest taki jak Merk i ma problem z tym, żeby to osiągnąć, mam rozwiązanie:

Gdy masz kontrolę użytkownika, wydaje się, że musisz również utworzyć PostBackEventHandler na stronie nadrzędnej. Następnie możesz wywołać PostBackEventHandler kontrolki użytkownika, wywołując ją bezpośrednio. Zobacz poniżej:

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

Gdzie UserControlID to identyfikator, któremu nadałeś kontrolę użytkownikowi na stronie nadrzędnej, gdy umieściłeś ją w znaczniku.

Uwaga: Możesz także po prostu wywołać bezpośrednio metody należące do tej kontrolki użytkownika (w takim przypadku potrzebujesz tylko modułu obsługi RaisePostBackEvent na stronie nadrzędnej):

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

Możesz chcieć utworzyć usługę internetową dla swoich typowych metod.
Po prostu dodaj WebMethodAttribute nad funkcjami, które chcesz wywołać, i to wszystko.
Posiadanie usługi sieciowej ze wszystkimi typowymi rzeczami również ułatwia utrzymanie systemu.

Jeśli funkcja __doPostBack nie jest generowana na stronie, musisz wstawić kontrolkę, aby wymusić ją w ten sposób:

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

Jeżeli chodzi o:

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

button.click();

Powinien wyglądać tak:

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

Gdzie formID to identyfikator formantu ASP.NET w pliku .aspx.

Dodaj tę linię do ładowania strony, jeśli otrzymujesz oczekiwany błąd obiektu.

ClientScript.GetPostBackEventReference(this, "");

Możesz użyć PageMethods.Your C# method Name, aby uzyskać dostęp do metod C # lub metod VB.NET w JavaScript.

Spróbuj tego:

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

Albo to

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

Użyj właściwości OnClientClick przycisku, aby wywołać funkcje JavaScript ...

Możesz go również uzyskać, dodając tę ​​linię w kodzie JavaScript:

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

Myślę, że ten jest bardzo łatwy!

Spróbuj tego:

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

ddlVoucherType jest kontrolką, którą wywoła wybrana zmiana indeksu ... I możesz umieścić dowolną funkcję na wybranej zmianie indeksu tej kontrolki.

Najprostszym i najlepszym sposobem osiągnięcia tego jest użycie onmouseup()zdarzenia JavaScript zamiastonclick()

W ten sposób po kliknięciu uruchomisz JavaScript i nie będzie on kolidował ze OnClick()zdarzeniem ASP .

Próbuję tego, aby móc uruchomić metodę Asp.Net podczas korzystania z jQuery.

1. Wykonaj przekierowanie strony w kodzie jQuery

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

2. Następnie użyj ciągu zapytania w ładowaniu strony

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

Nie ma więc potrzeby uruchamiania dodatkowego kodu

Ta odpowiedź działa jak bryza dla mnie dzięki cross browser:

Metoda __doPostBack () działa dobrze.

Innym rozwiązaniem (bardzo hakerskim) jest po prostu dodanie niewidocznego przycisku ASP do znaczników i kliknięcie go metodą JavaScript.

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

Z JavaScript pobierz odwołanie do przycisku, używając jego ClientID, a następnie wywołaj na nim metodę .Click ():

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

button.Click(); 

Zablokować cytat