เรียกฟังก์ชั่น ASP.NET จาก JavaScript?

ฉันกำลังเขียนเว็บเพจใน ASP.NET ฉันมีรหัสจาวาสคริปต์บางส่วนและฉันมีปุ่มส่งพร้อมเหตุการณ์คลิก

เป็นไปได้ไหมที่จะเรียกวิธีการที่ฉันสร้างขึ้นใน ASP พร้อมกับเหตุการณ์การคลิกของ JavaScript?

ถ้าคุณไม่ต้องการใช้ Ajax หรือวิธีอื่นและต้องการให้ ASP.NET postback ปกติเกิดขึ้นนี่คือวิธีที่คุณทำได้ (โดยไม่ต้องใช้ไลบรารีอื่น):

มันค่อนข้างยุ่งยากเล็กน้อย ... :)

ผม. ในไฟล์รหัสของคุณ (สมมติว่าคุณใช้ C # และ. NET 2.0 หรือใหม่กว่า) เพิ่มอินเทอร์เฟซต่อไปนี้ในคลาสเพจของคุณเพื่อให้ดูเหมือน

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

ii ควรเพิ่ม (ใช้Tab- Tab) ฟังก์ชันนี้ในไฟล์รหัสของคุณ:

public void RaisePostBackEvent(string eventArgument) { }

สาม. ในเหตุการณ์ onclick ของคุณใน JavaScript ให้เขียนรหัสต่อไปนี้:

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

การดำเนินการนี้จะเรียกใช้เมธอด 'RaisePostBackEvent' ในไฟล์รหัสของคุณด้วย 'eventArgument' เป็น 'อาร์กิวเมนต์String' ที่คุณส่งผ่านจาก JavaScript ตอนนี้คุณสามารถเรียกกิจกรรมอื่น ๆ ที่คุณชอบ

PS: นั่นคือ 'ขีดล่าง - ขีดล่าง-doPostBack' ... และไม่ควรมีช่องว่างในลำดับนั้น ... อย่างใด WMD ไม่อนุญาตให้ฉันเขียนขีดล่างตามด้วยอักขระ!

__doPostBack()วิธีการทำงานได้ดี

โซลูชันอื่น (แฮ็คมาก) เพียงเพิ่มปุ่ม ASP ที่มองไม่เห็นในมาร์กอัพของคุณแล้วคลิกด้วยวิธี JavaScript

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

จาก JavaScript ของคุณดึงอ้างอิงถึงปุ่มใช้ของClientIDแล้วโทรจำนวนคลิก ()วิธีการเกี่ยวกับมัน

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

button.click();

ห้องสมุด 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 กลับมา

คุณสามารถทำได้แบบอะซิงโครนัสโดยใช้. NET Ajax PageMethods ดูที่นี่หรือที่นี่

ฉันคิดว่าการโพสต์บล็อกวิธีดึง & แสดงข้อมูลฐานข้อมูล SQL Server ในหน้า ASP.NET โดยใช้ Ajax (jQuery)จะช่วยคุณ

รหัสจาวาสคริปต์

<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 webforms และยังคงใช้มัน (เช่นเดียวกับMVC ) แต่ฉันจะบอกว่าการพยายามทำให้สิ่งต่าง ๆ ง่ายขึ้นและซ่อนการแยกไคลเอนต์และเซิร์ฟเวอร์มันอาจสร้างความสับสนให้กับผู้มาใหม่และท้ายที่สุดทำให้สิ่งต่าง ๆ ยากขึ้น .

คำแนะนำของฉันคือการเรียนรู้พื้นฐานของจาวาสคริปต์ (วิธีการลงทะเบียนเหตุการณ์, ดึงวัตถุ DOM, จัดการ CSS, ฯลฯ ) และคุณจะพบว่าการเขียนโปรแกรมเว็บสนุกยิ่งขึ้น (ไม่พูดถึงง่ายกว่า) ผู้คนจำนวนมากพูดถึงห้องสมุดอาแจ็กซ์ที่แตกต่างกัน แต่ฉันไม่เห็นตัวอย่างอาแจ็กซ์ที่แท้จริงดังนั้นจึงไปที่นี่ (ถ้าคุณไม่คุ้นเคยกับ Ajax ทั้งหมดนั้นคือการร้องขอ HTTP แบบอะซิงโครนัสเพื่อรีเฟรชเนื้อหา (หรืออาจดำเนินการกับฝั่งเซิร์ฟเวอร์ในสถานการณ์ของคุณ) โดยไม่ต้องโหลดซ้ำทั้งหน้าหรือทำ postback แบบเต็ม

ด้านลูกค้า:

<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 ASP.NET MVC 4 Web API ทำให้การตั้งค่าบริการเว็บฝั่งเซิร์ฟเวอร์เพื่อจัดการการร้องขอได้อย่างง่ายดายเช่นกัน แต่หลายคนไม่ทราบว่าคุณยังสามารถเพิ่มตัวควบคุม 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 อาแจ็กซ์ ,
• คอนโทรลเลอร์ในเว็บฟอร์ม

ไลบรารี Microsoft AJAX จะทำสิ่งนี้ให้สำเร็จ คุณสามารถสร้างโซลูชันของคุณเองที่เกี่ยวข้องกับการใช้ AJAX เพื่อเรียกไฟล์สคริปต์ aspx ของคุณเอง (โดยทั่วไป) เพื่อเรียกใช้ฟังก์ชัน. NET

นี้เป็นห้องสมุดที่เรียกว่า AjaxPro ซึ่งเขียน MVP ชื่อไมเคิล Schwarz นี่คือห้องสมุดไม่ได้เขียนโดย 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. เขียนตัวจัดการเหตุการณ์ฝั่งเซิร์ฟเวอร์ให้คุณควบคุม

      โมฆะป้องกัน btnSayHello_Click (ผู้ส่งวัตถุ, EventArgs e) {Label1.Text = "Hello World ... "; }

   3. เพิ่มฟังก์ชันไคลเอ็นต์เพื่อเรียกตัวจัดการเหตุการณ์ฝั่งเซิร์ฟเวอร์

      ฟังก์ชัน SayHello () {__doPostBack ("btnSayHello", ""); }

แทนที่ "btnSayHello" ในรหัสด้านบนด้วยรหัสลูกค้าของตัวควบคุมของคุณ

หากทำเช่นนั้นหากตัวควบคุมของคุณอยู่ในแผงควบคุมอัปเดตหน้านั้นจะไม่รีเฟรช นั่นง่ายมาก

อีกสิ่งหนึ่งที่จะกล่าวคือ: ระวังรหัสลูกค้าเพราะขึ้นอยู่กับนโยบายการสร้าง ID ของคุณที่กำหนดด้วยคุณสมบัติ ClientIDMode

ฉันพยายามที่จะใช้สิ่งนี้ แต่มันไม่ทำงาน หน้ากำลังโพสต์กลับ แต่รหัสของฉันไม่ได้รับการดำเนินการ เมื่อฉันตรวจแก้จุดบกพร่องหน้า RaisePostBackEvent จะไม่ถูกไล่ออก สิ่งหนึ่งที่ฉันทำแตกต่างกันคือฉันกำลังทำสิ่งนี้ในการควบคุมผู้ใช้แทนที่จะเป็นหน้า aspx

หากใครเป็นเหมือน Merk และมีปัญหาในการมาที่นี่ฉันมีทางออก:

เมื่อคุณมีการควบคุมผู้ใช้ดูเหมือนคุณจะต้องสร้าง 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(); 

blockquote