هل تريد استدعاء وظيفة ASP.NET من JavaScript؟

https://stackoverflow.com/questions/3713

08-06-2019
|

سؤال

أنا أكتب صفحة ويب في ASP.NET.لدي بعض أكواد JavaScript، ولدي زر إرسال مع حدث النقر.

هل من الممكن استدعاء الطريقة التي قمت بإنشائها في ASP باستخدام حدث النقر الخاص بـ JavaScript؟

المحلول

حسنًا، إذا كنت لا تريد القيام بذلك باستخدام Ajax أو أي طريقة أخرى وتريد فقط إجراء إعادة نشر عادية لـ ASP.NET، فإليك كيفية القيام بذلك (دون استخدام أي مكتبات أخرى):

إنه أمر صعب بعض الشيء بالرغم من ذلك..:)

أنا.في ملف التعليمات البرمجية الخاص بك (على افتراض أنك تستخدم C# و.NET 2.0 أو الأحدث) قم بإضافة الواجهة التالية إلى فئة الصفحة الخاصة بك لجعلها تبدو كما هي

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

ثانيا.يجب أن يضيف هذا (باستخدام فاتورة غير مدفوعة-فاتورة غير مدفوعة) هذه الوظيفة لملف التعليمات البرمجية الخاص بك:

public void RaisePostBackEvent(string eventArgument) { }

ثالثا.في حدث onclick الخاص بك في JavaScript، اكتب الكود التالي:

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

سيؤدي هذا إلى استدعاء الأسلوب "RaisePostBackEvent" في ملف التعليمات البرمجية الخاص بك باستخدام "eventArgument" باعتباره "argumentString" الذي قمت بتمريره من JavaScript.الآن، يمكنك الاتصال بأي حدث آخر تريده.

ملاحظة:هذا هو "تسطير أسفل السطر-doPostBack" ...ويجب ألا يكون هناك مساحة في هذا التسلسل ...بطريقة ما، لا تسمح لي أسلحة الدمار الشامل بالكتابة بشرطات سفلية متبوعة بالحرف!

نصائح أخرى

ال __doPostBack() الطريقة تعمل بشكل جيد.

الحل الآخر (المخترق جدًا) هو ببساطة إضافة زر ASP غير مرئي في ترميزك والنقر فوقه باستخدام طريقة JavaScript.

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

من JavaScript، قم باسترداد المرجع إلى الزر باستخدام ملف معرف العميل ثم اتصل ب .انقر() الطريقة عليه.

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

button.click();

ال مكتبة مايكروسوفت أجاكس سوف ينجز هذا.يمكنك أيضًا إنشاء الحل الخاص بك والذي يتضمن استخدام 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);

يجب أن تكون المعلمة الأخيرة لاستدعاء وظيفتك هي وظيفة رد اتصال جافا سكريبت التي سيتم تنفيذها عند إرجاع طلب AJAX.

يمكنك القيام بذلك بشكل غير متزامن باستخدام .NET Ajax PageMethods.يرى هنا أو هنا.

لقد شعرت دائمًا أن البرمجة الثابتة والمكتوبة بقوة أمر طبيعي جدًا بالنسبة لي، لذلك قاومت في البداية تعلم 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. مسج يوفر واجهة أبسط لإجراء مكالمات Ajax (من بين تبسيط مهام JavaScript الأخرى).

يمكن أن يكون الطلب HTTP-POST أو HTTP-GET ولا يلزم أن يكون على صفحة ويب، ولكن يمكنك النشر على أي خدمة تستمع لطلبات HTTP مثل مريح واجهة برمجة التطبيقات.تجعل 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، مما يمنح الأشخاص الذين يزورون موقعك تجربة شاملة أفضل.دون التضحية بأي شيء، ستحصل على أفضل ما في العالمين.

مراجع

أعتقد أن بلوق وظيفة كيفية جلب وإظهار بيانات قاعدة بيانات 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;
}

ستقوم مكتبة Microsoft AJAX بإنجاز هذا.يمكنك أيضًا إنشاء الحل الخاص بك والذي يتضمن استخدام AJAX لاستدعاء ملفات البرامج النصية aspx (أساسًا) الخاصة بك لتشغيل وظائف .NET.

هذه هي المكتبة المسماة AjaxPro والتي تم كتابة اسم MVP عليها مايكل شوارتز.كانت هذه المكتبة لم تتم كتابتها بواسطة Microsoft.

لقد استخدمت AjaxPro على نطاق واسع، وهي مكتبة جميلة جدًا، وأود أن أوصي بها لعمليات الاسترجاعات البسيطة للخادم.إنه يعمل بشكل جيد مع إصدار Microsoft من Ajax دون أي مشاكل.ومع ذلك، أود أن أشير إلى مدى سهولة قيام Microsoft بإنشاء Ajax، ولن أستخدمه إلا إذا لزم الأمر حقًا.يتطلب الأمر الكثير من JavaScript للقيام ببعض الوظائف المعقدة حقًا التي تحصل عليها من Microsoft بمجرد إسقاطها في لوحة التحديث.

من السهل جدًا بالنسبة لكلا السيناريوهين (أي متزامن/غير متزامن) إذا كنت تريد تشغيل معالج حدث من جانب الخادم، على سبيل المثال، حدث النقر على الزر.

لتشغيل معالج حدث لعنصر تحكم:إذا قمت بإضافة ScriptManager على صفحتك بالفعل، فقم بتخطي الخطوة 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. اكتب لك معالج الأحداث من جانب الخادم لتحكمك
  
  void btnsayhello_click محمية (مرسل الكائن ، EventArgs e) {label1.text = "Hello World ..." ؛}
2. أضف وظيفة عميل لاستدعاء معالج الأحداث من جانب الخادم
  
  وظيفة sayhello () {__dopostback ("btnsayhello" ، "") ؛}

استبدل "btnSayHello" في الكود أعلاه بمعرف العميل الخاص بعنصر التحكم الخاص بك.

ومن خلال القيام بذلك، إذا كان عنصر التحكم الخاص بك موجودًا داخل لوحة التحديث، فلن يتم تحديث الصفحة.هذا سهل جدا.

هناك شيء آخر يجب قوله وهو:كن حذرًا فيما يتعلق بمعرف العميل، لأنه يعتمد على سياسة إنشاء المعرف المحددة باستخدام خاصية ClientIDMode.

أحاول تنفيذ هذا لكنه لا يعمل بشكل صحيح.تم نشر الصفحة مرة أخرى ، لكن الكود الخاص بي لا يتم تنفيذه.عندما أقوم بتصحيح الصفحة ، لم يتم إطلاق النار على RaisePostBacevent.شيء واحد فعلته بشكل مختلف هو أنني أقوم بذلك في عنصر تحكم المستخدم بدلاً من صفحة 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 بعد النقر ولن يتداخل مع ASP OnClick() حدث.

أحاول ذلك حتى أتمكن من تشغيل طريقة Asp.Net أثناء استخدام jQuery.

قم بإعادة توجيه الصفحة في كود jQuery الخاص بك
```
window.location = "Page.aspx?key=1";
```

ثم استخدم سلسلة الاستعلام في تحميل الصفحة

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

اقتباس

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow