Panggil fungsi ASP.NET dari JavaScript?

Saya sedang menulis halaman web di ASP.NET. Saya memiliki beberapa kode JavaScript, dan saya memiliki tombol kirim dengan acara klik.

Apakah mungkin untuk memanggil metode yang saya buat di ASP dengan acara klik JavaScript?

Nah, jika Anda tidak ingin melakukannya menggunakan Ajax atau cara lain dan hanya ingin postback ASP.NET normal terjadi, berikut adalah cara Anda melakukannya (tanpa menggunakan perpustakaan lain):

Agak sulit sih ... :)

saya. Dalam file kode Anda (dengan asumsi Anda menggunakan C # dan .NET 2.0 atau lebih baru) tambahkan Interface berikut ke kelas Halaman Anda agar terlihat seperti

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

ii. Ini harus menambahkan (menggunakan Tab- Tab) fungsi ini ke file kode Anda:

public void RaisePostBackEvent(string eventArgument) { }

aku aku aku. Dalam acara onclick Anda di JavaScript, tulis kode berikut:

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

Ini akan memanggil metode 'RaisePostBackEvent' dalam file kode Anda dengan 'eventArgument' sebagai 'argumentString' yang Anda berikan dari JavaScript. Sekarang, Anda dapat memanggil acara lain yang Anda suka.

PS: Itu 'underscore-underscore-doPostBack' ... Dan, seharusnya tidak ada ruang dalam urutan itu ... Entah bagaimana WMD tidak memungkinkan saya untuk menulis ke garis bawah diikuti oleh karakter!

The __doPostBack()Metode bekerja dengan baik.

Solusi lain (sangat peretasan) adalah dengan hanya menambahkan tombol ASP tidak terlihat di markup Anda dan klik dengan metode JavaScript.

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

Dari JavaScript Anda, ambil referensi ke tombol menggunakan ClientID dan kemudian panggil metode .click () di atasnya.

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

button.click();

The Microsoft AJAX perpustakaan akan mencapai hal ini. Anda juga dapat membuat solusi Anda sendiri yang melibatkan penggunaan AJAX untuk memanggil file skrip aspx Anda sendiri (seperti pada dasarnya) untuk menjalankan fungsi .NET.

Saya menyarankan perpustakaan Microsoft AJAX. Setelah diinstal dan direferensikan, Anda hanya menambahkan baris di halaman Anda memuat atau init:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Maka Anda dapat melakukan hal-hal seperti:

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

Kemudian, Anda dapat menyebutnya di halaman Anda sebagai:

PageClassName.Get5(javascriptCallbackFunction);

Parameter terakhir dari panggilan fungsi Anda haruslah fungsi panggilan balik javascript yang akan dieksekusi ketika permintaan AJAX dikembalikan.

Anda dapat melakukannya secara asinkron menggunakan .NET Ajax PageMethods. Lihat di sini atau di sini .

Saya pikir posting blog Cara mengambil & menampilkan data database SQL Server di halaman ASP.NET menggunakan Ajax (jQuery) akan membantu Anda.

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

Fungsi Sisi Server 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;
}

Pemrograman statis yang sangat diketik selalu terasa sangat alami bagi saya, jadi pada awalnya saya menolak belajar JavaScript (belum lagi HTML dan CSS) ketika saya harus membangun front-end berbasis web untuk aplikasi saya. Saya akan melakukan apa saja untuk mengatasi hal ini seperti mengarahkan ulang ke halaman hanya untuk melakukan dan bertindak pada acara OnLoad, selama saya bisa mengkodekan C # murni.

Namun Anda akan menemukan bahwa jika Anda akan bekerja dengan situs web, Anda harus memiliki pikiran terbuka dan mulai berpikir lebih berorientasi web (yaitu, jangan mencoba untuk melakukan hal-hal sisi klien di server dan sebaliknya) . Saya suka bentuk web ASP.NET dan masih menggunakannya (dan juga MVC ), tetapi saya akan mengatakan bahwa dengan mencoba membuat hal-hal lebih sederhana dan menyembunyikan pemisahan klien dan server dapat membingungkan pendatang baru dan akhirnya membuat hal-hal lebih sulit di kali .

Saran saya adalah mempelajari beberapa JavaScript dasar (cara mendaftar acara, mengambil objek DOM, memanipulasi CSS, dll.) Dan Anda akan menemukan pemrograman web jauh lebih menyenangkan (belum lagi lebih mudah). Banyak orang menyebutkan perpustakaan Ajax yang berbeda, tetapi saya tidak melihat contoh Ajax yang sebenarnya, jadi begini saja. (Jika Anda tidak terbiasa dengan Ajax, semua itu, membuat permintaan HTTP asinkron untuk menyegarkan konten (atau mungkin melakukan tindakan sisi server dalam skenario Anda) tanpa memuat ulang seluruh halaman atau melakukan postback penuh.

Sisi klien:

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

Itu dia. Meskipun namanya bisa menyesatkan, hasilnya bisa berupa teks biasa atau JSON, Anda tidak terbatas pada XML. jQuery menyediakan antarmuka yang bahkan lebih sederhana untuk membuat panggilan Ajax (di antara menyederhanakan tugas JavaScript lainnya).

Permintaan dapat berupa HTTP-POST atau HTTP-GET dan tidak harus ke laman web, tetapi Anda dapat memposting ke layanan apa pun yang mendengarkan permintaan HTTP seperti RESTful API. ASP.NET MVC 4 Web API membuat pengaturan layanan web sisi server untuk menangani permintaan juga. Tetapi banyak orang tidak tahu bahwa Anda juga dapat menambahkan pengontrol API ke proyek formulir web dan menggunakannya untuk menangani panggilan Ajax seperti ini.

Sisi server:

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

Kemudian cukup daftarkan rute HTTP di file Global.asax Anda, jadi ASP.NET akan tahu cara mengarahkan permintaan.

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

Dengan AJAX dan Pengontrol, Anda dapat memposting kembali ke server kapan saja secara serempak untuk melakukan operasi sisi server apa pun. Pukulan satu-dua ini memberikan fleksibilitas JavaScript dan kekuatan C # / ASP.NET, memberi orang-orang yang mengunjungi situs Anda pengalaman keseluruhan yang lebih baik. Tanpa mengorbankan apapun, Anda mendapatkan yang terbaik dari kedua dunia.

Referensi

• Ajax ,
• jQuery Ajax ,
• Pengontrol di Webforms

Perpustakaan Microsoft AJAX akan mencapai ini. Anda juga dapat membuat solusi Anda sendiri yang melibatkan penggunaan AJAX untuk memanggil file skrip aspx Anda sendiri (seperti pada dasarnya) untuk menjalankan fungsi .NET.

Ini adalah perpustakaan bernama AjaxPro yang ditulis MVP bernama Michael Schwarz . Perpustakaan ini tidak ditulis oleh Microsoft.

Saya telah menggunakan AjaxPro secara luas, dan ini adalah perpustakaan yang sangat bagus, yang saya rekomendasikan untuk panggilan balik sederhana ke server. Ini berfungsi dengan baik dengan versi Microsoft Ajax tanpa masalah. Namun, saya akan perhatikan, dengan betapa mudahnya Microsoft membuat Ajax, saya hanya akan menggunakannya jika benar-benar diperlukan. Dibutuhkan banyak JavaScript untuk melakukan beberapa fungsi yang sangat rumit yang Anda dapatkan dari Microsoft dengan hanya memasukkannya ke panel pembaruan.

Sangat mudah untuk kedua skenario (yaitu, sinkron / asinkron) jika Anda ingin memicu pengendali acara sisi server, misalnya, acara klik Tombol.

Untuk memicu pengendali acara kontrol: Jika Anda sudah menambahkan ScriptManager pada halaman Anda maka lewati langkah 1.

1. Tambahkan berikut ini di bagian skrip klien halaman Anda

   //<![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. Menulis pengendali acara sisi server untuk kontrol Anda

      btnSayHello_ello klik kosong (pengirim objek, EventArgs e) {Label1.Text = "Hello World ..."; }

   3. Tambahkan fungsi klien untuk memanggil pengendali acara sisi server

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

Ganti "btnSayHello" dalam kode di atas dengan id klien kontrol Anda.

Dengan melakukannya, jika kontrol Anda ada di dalam panel pembaruan, halaman tidak akan disegarkan. Itu sangat mudah.

Satu hal lain untuk dikatakan adalah: Berhati-hatilah dengan id klien, karena itu tergantung pada kebijakan pembuatan ID Anda yang ditentukan dengan properti ClientIDMode.

Saya mencoba menerapkan ini tetapi tidak berfungsi dengan baik. Halaman ini memposting kembali, tetapi kode saya tidak dieksekusi. Ketika saya men-debug halaman, RaisePostBackEvent tidak pernah dipecat. Satu hal yang saya lakukan berbeda adalah saya melakukan ini dalam kontrol pengguna, bukan halaman aspx.

Jika orang lain seperti Merk, dan mengalami kesulitan untuk datang ini, saya punya solusi:

Ketika Anda memiliki kontrol pengguna, tampaknya Anda juga harus membuat PostBackEventHandler di halaman induk. Dan kemudian Anda dapat memanggil PostBackEventHandler kontrol pengguna dengan memanggilnya secara langsung. Lihat di bawah:

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

Di mana UserControlID adalah ID yang Anda berikan kontrol pengguna pada halaman induk ketika Anda menyarangkannya di mark up.

Catatan: Anda juga bisa langsung memanggil metode milik kontrol pengguna itu secara langsung (dalam hal ini, Anda hanya perlu penangan RaisePostBackEvent di halaman induk):

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

Anda mungkin ingin membuat layanan web untuk metode umum Anda.
Tambahkan saja WebMethodAttribute ke fungsi yang ingin Anda panggil, dan hanya itu saja.
Memiliki layanan web dengan semua hal umum Anda juga membuat sistem lebih mudah dirawat.

Jika fungsi __doPostBack tidak dihasilkan pada halaman Anda perlu memasukkan kontrol untuk memaksanya seperti ini:

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

Mengenai:

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

button.click();

Itu harus seperti:

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

Di mana formID adalah ID kontrol ASP.NET di file .aspx.

Tambahkan baris ini ke pemuatan halaman jika Anda mendapatkan kesalahan yang diharapkan objek.

ClientScript.GetPostBackEventReference(this, "");

Anda dapat menggunakan PageMethods.Your C# method Nameuntuk mengakses metode C # atau metode VB.NET ke dalam JavaScript.

Coba ini:

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

Atau ini

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

Gunakan properti OnClientClick pada tombol untuk memanggil fungsi JavaScript ...

Anda juga bisa mendapatkannya dengan hanya menambahkan baris ini dalam kode JavaScript Anda:

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

Saya pikir ini sangat mudah!

Silakan coba ini:

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

ddlVoucherType adalah kontrol yang akan dipanggil oleh perubahan indeks yang dipilih ... Dan Anda dapat menempatkan fungsi apa pun pada perubahan indeks yang dipilih dari kontrol ini.

Cara paling sederhana dan terbaik untuk mencapai ini adalah dengan menggunakan onmouseup()acara JavaScript daripadaonclick()

Dengan begitu Anda akan memecat JavaScript setelah Anda mengklik dan itu tidak akan mengganggu OnClick()acara ASP .

Saya mencoba ini dan saya bisa menjalankan metode Asp.Net saat menggunakan jQuery.

1. Lakukan pengalihan halaman dalam kode jQuery Anda

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

2. Kemudian gunakan Query String di Page Load

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

Jadi tidak perlu menjalankan kode tambahan

Balasan ini bekerja seperti angin bagi saya, terima kasih lintas browser:

Metode __doPostBack () berfungsi dengan baik.

Solusi lain (sangat peretasan) adalah dengan hanya menambahkan tombol ASP tidak terlihat di markup Anda dan klik dengan metode JavaScript.

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

Dari JavaScript Anda, ambil referensi ke tombol menggunakan ClientID-nya dan kemudian panggil metode .Click () di atasnya:

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

button.Click(); 

Blokir