जावास्क्रिप्ट से ASP.NET फ़ंक्शन को कॉल करें?


140

मैं ASP.NET में एक वेब पेज लिख रहा हूँ। मेरे पास कुछ जावास्क्रिप्ट कोड हैं, और मेरे पास क्लिक इवेंट के साथ एक सबमिट बटन है।

क्या एएसपी द्वारा बनाई गई विधि को जावास्क्रिप्ट के क्लिक इवेंट के साथ कॉल करना संभव है?


1
आपको कुछ अजाक्स पुस्तकालय का उपयोग करना चाहिए जैसे: गान
jdecuyper

जवाबों:


92

ठीक है, अगर आप इसे अजाक्स या किसी अन्य तरीके से उपयोग नहीं करना चाहते हैं और बस एक सामान्य ASP.NET पोस्टबैक चाहते हैं, तो यहां बताया गया है कि आप इसे कैसे करते हैं (बिना किसी अन्य लाइब्रेरी का उपयोग किए)

हालांकि यह थोड़ा मुश्किल है ... :)

मैं। अपनी कोड फ़ाइल में (मान लें कि आप C # और .NET 2.0 या बाद का उपयोग कर रहे हैं) निम्न इंटरफ़ेस को अपने पेज वर्ग में शामिल करें ताकि वह इसे पसंद कर सके

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

ii। यह (का उपयोग कर जोड़ने चाहिए Tab- Tab: अपने कोड फाइल करने के लिए इस समारोह)

public void RaisePostBackEvent(string eventArgument) { }

iii। जावास्क्रिप्ट में अपने onclick घटना पर, निम्न कोड लिखें:

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

यह 'codeArgument' के साथ आपकी 'कोड' फ़ाइल में 'RaisePostBackEvent' पद्धति को 'दलील' के रूप में बताएगा, जिसे आपने जावास्क्रिप्ट से पारित किया था। अब, आप अपनी पसंद की किसी अन्य घटना को कॉल कर सकते हैं।

पुनश्च: यह 'अंडरस्कोर-अंडरस्कोर-डूस्टबैक' है ... और, उस क्रम में कोई जगह नहीं होनी चाहिए ... किसी तरह डब्ल्यूएमडी मुझे एक चरित्र के बाद अंडरस्कोर लिखने की अनुमति नहीं देता है!


1
मैं इसे लागू करने की कोशिश कर रहा हूं लेकिन यह सही काम नहीं कर रहा है। पृष्ठ वापस पोस्ट कर रहा है, लेकिन मेरा कोड निष्पादित नहीं हो रहा है। जब मैं पृष्ठ को डीबग करता हूं, तो RaisePostBackEvent कभी भी निकाल नहीं दिया जाता है। एक बात जो मैंने अलग तरह से की वह यह है कि मैं एक aspx पेज के बजाय एक उपयोगकर्ता नियंत्रण में कर रहा हूं।
मर्क

यह मुझे एक त्रुटि कहती है जो अपेक्षित वस्तु है। मैंने इसे इस तरह से कहा है:window.onbeforeunload = confirmExit; //debugger; function confirmExit() { var pageId = '<%= Page.ClientID %>'; var argumentString = 'ReleaseLock'; __doPostBack(pageId, argumentString); }
पवित्रा

जो भी कारण के लिए, मैं इसे onkeyupघटना के साथ काम नहीं कर सका । मिल गया JavaScript runtime error: '__doPostBack' is undefined। मैं C # और ASP.NET 2.0 का उपयोग कर रहा हूं।
एंड्रयू टी।

58

__doPostBack()विधि अच्छी तरह से काम करता है।

एक अन्य समाधान (बहुत हैकिश) बस अपने मार्कअप में एक अदृश्य एएसपी बटन जोड़ना है और इसे जावास्क्रिप्ट विधि के साथ क्लिक करना है।

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

अपने JavaScript से, उसके ClientID का उपयोग करके बटन के संदर्भ को पुनः प्राप्त करें और फिर उस पर .click () विधि को कॉल करें ।

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

button.click();

3
क्या होगा अगर मैं एक तर्क का उपयोग करना चाहता हूं? क्या मैं इसे क्लाइंट की ओर से प्राप्त कर सकता हूं और इसे बटन के साथ उपयोग कर सकता हूं। क्लिक करें ()?
कुबी

@ क्यूबी सर्वर पर एक तर्क है? मैं आमतौर पर उन तर्कों को क्रमबद्ध करता हूं जिन्हें सर्वर साइड में भेजने और उन्हें एक छिपे हुए क्षेत्र में रखने की आवश्यकता होती है।
mbillard

क्या आप कृपया यहाँ देख सकते हैं? stackoverflow.com/questions/2536106/…
Kubi

क्या क्लिक विधि मौजूद है ??
साहिर अहवाल

@ शेअर हाँ, लेकिन यह वास्तव में .click (लोअरकेस c) ( comptechdoc.org/independent/web/cgi/javamanual/javabutton.html ) है
mbillard

18

माइक्रोसॉफ्ट AJAX पुस्तकालय यह पूरा होगा। आप अपना स्वयं का समाधान भी बना सकते हैं जिसमें .NET फ़ंक्शन को चलाने के लिए अपने स्वयं के aspx (मूल रूप से) स्क्रिप्ट फ़ाइलों को कॉल करने के लिए AJAX का उपयोग करना शामिल है।

मैं Microsoft AJAX पुस्तकालय का सुझाव देता हूं। एक बार स्थापित और संदर्भित, आप बस अपने पेज लोड या init में एक पंक्ति जोड़ते हैं:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

तब आप निम्न कार्य कर सकते हैं:

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

फिर, आप इसे अपने पृष्ठ पर इस रूप में कह सकते हैं:

PageClassName.Get5(javascriptCallbackFunction);

आपके फ़ंक्शन कॉल का अंतिम पैरामीटर जावास्क्रिप्ट कॉलबैक फ़ंक्शन होना चाहिए, जिसे AJAX अनुरोध वापस किए जाने पर निष्पादित किया जाएगा।



5

मुझे लगता है कि ब्लॉग पोस्ट कैसे अजाक्स (jQuery) का उपयोग करके ASP.NET पृष्ठ में SQL सर्वर डेटाबेस डेटा लाने और दिखाने के लिए आपकी मदद करेगा।

जावास्क्रिप्ट कोड

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

4

स्टैटिक, दृढ़ता से टाइप की गई प्रोग्रामिंग मुझे हमेशा बहुत स्वाभाविक लगती है, इसलिए सबसे पहले मैंने अपने अनुप्रयोगों के लिए वेब-आधारित फ्रंट-एंड का निर्माण करने के दौरान जावास्क्रिप्ट (HTML और CSS का उल्लेख नहीं करना) सीखने का विरोध किया। जब तक मैं शुद्ध C # कोड कर सकता हूं, तब तक मैं इस पर काम करने के लिए कुछ भी करूंगा जैसे कि OnLoad घटना पर केवल एक पृष्ठ पर पुनर्निर्देशित करना और कार्रवाई करना।

हालाँकि आप पाएंगे कि यदि आप वेबसाइटों के साथ काम करने जा रहे हैं, तो आपके पास एक खुला दिमाग होना चाहिए और अधिक वेब-उन्मुख होना शुरू करना चाहिए (अर्थात, सर्वर पर क्लाइंट-साइड चीजें करने की कोशिश न करें और इसके विपरीत) । मैं ASP.NET वेबफ़ॉर्म से प्यार करता हूं और अभी भी (साथ ही साथ MVC ) इसका उपयोग करता हूं, लेकिन मैं कहूंगा कि चीजों को सरल बनाने और क्लाइंट और सर्वर के अलगाव को छिपाने की कोशिश करके यह नए लोगों को भ्रमित कर सकता है और वास्तव में चीजों को समय के साथ और अधिक कठिन बना सकता है। ।

मेरी सलाह है कि आप कुछ बुनियादी जावास्क्रिप्ट (घटनाओं को कैसे पंजीकृत करें, डोम ऑब्जेक्ट्स को पुनः प्राप्त करें, सीएसएस को हेरफेर करें, आदि) सीखें और आपको वेब प्रोग्रामिंग बहुत अधिक सुखद लगेगी (आसान का उल्लेख नहीं करना)। बहुत से लोगों ने अलग-अलग अजाक्स पुस्तकालयों का उल्लेख किया, लेकिन मैंने कोई वास्तविक अजाक्स उदाहरण नहीं देखा, इसलिए यहां यह जाता है। (यदि आप अजाक्स से परिचित नहीं हैं, तो यह सब है, पूरे पृष्ठ को फिर से लोड किए बिना या पूर्ण पोस्टबैक करने के बिना सामग्री को ताज़ा करने के लिए एक अतुल्यकालिक 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 अजाक्स कॉल (अन्य जावास्क्रिप्ट कार्यों को सरल बनाने के बीच) के लिए एक भी सरल इंटरफ़ेस प्रदान करता है।

अनुरोध एक HTTP-POST या HTTP-GET हो सकता है और इसके लिए एक वेबपेज पर नहीं होना चाहिए, लेकिन आप किसी भी सेवा पर पोस्ट कर सकते हैं जो HTTP अनुरोधों जैसे कि RESTful API को सुनती है। ASP.NET MVC 4 वेब एपीआई अनुरोध के साथ-साथ एक हवा को संभालने के लिए सर्वर-साइड वेब सेवा की स्थापना करता है। लेकिन बहुत से लोग यह नहीं जानते हैं कि आप वेब प्रपत्र प्रोजेक्ट में एपीआई नियंत्रक भी जोड़ सकते हैं और इस तरह से अजाक्स कॉल को संभालने के लिए उनका उपयोग कर सकते हैं।

सर्वर साइड:

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

फिर बस अपने Global.asax फ़ाइल में HTTP रूट रजिस्टर करें, इसलिए ASP.NET को पता होगा कि अनुरोध को कैसे निर्देशित किया जाए।

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

AJAX और नियंत्रकों के साथ, आप किसी भी समय सर्वर पर वापस किसी भी सर्वर साइड ऑपरेशन को करने के लिए अतुल्यकालिक रूप से पोस्ट कर सकते हैं। यह एक-दो पंच जावास्क्रिप्ट की शक्ति और C # / ASP.NET दोनों को लचीलापन प्रदान करता है, जिससे आपकी साइट पर आने वाले लोगों को एक बेहतर समग्र अनुभव मिलता है। किसी भी चीज़ का त्याग किए बिना, आप दोनों दुनियाओं में सर्वश्रेष्ठ हैं।

संदर्भ


3

Microsoft AJAX पुस्तकालय इसे पूरा करेगा। आप अपना स्वयं का समाधान भी बना सकते हैं जिसमें .NET फ़ंक्शन को चलाने के लिए अपने स्वयं के aspx (मूल रूप से) स्क्रिप्ट फ़ाइलों को कॉल करने के लिए AJAX का उपयोग करना शामिल है।

यह अजाक्सप्रो नामक पुस्तकालय है जिसे माइकल श्वार्ज़ नामक एमवीपी लिखा गया था । यह लाइब्रेरी Microsoft द्वारा नहीं लिखी गई थी।

मैंने बड़े पैमाने पर AjaxPro का उपयोग किया है, और यह एक बहुत अच्छा पुस्तकालय है, जिसे मैं सर्वर पर सरल कॉलबैक के लिए सुझाऊंगा। यह अजाक्स के Microsoft संस्करण के साथ अच्छी तरह से काम करता है जिसमें कोई समस्या नहीं है। हालाँकि, मैं ध्यान देता हूँ, कि Microsoft ने अजाक्स को कितना आसान बनाया है, मैं इसका उपयोग केवल तभी करूँगा जब वास्तव में आवश्यक हो। यह वास्तव में जटिल कार्यक्षमता को करने के लिए बहुत सारे जावास्क्रिप्ट लेता है जो आपको Microsoft से केवल एक अपडेट पैनल में छोड़ने से मिलता है।


1
काश यह पोस्ट ऊपर वाले के करीब होती ... मैं कई मिनटों में यह जानने की कोशिश करता कि एमएस डॉक्यूमेंट में उस तरीके का कहीं उल्लेख क्यों नहीं किया गया: /
डेव स्वार्स्की

1
@ यही कारण है कि लोगों को जवाबों पर टिप्पणी करनी चाहिए और अन्य उत्तरों के साथ टिप्पणियों को नहीं जोड़ना चाहिए क्योंकि स्वयं अद्वितीय उत्तर हैं।
चार्ल्स बॉयंग

2

यदि आप एक सर्वर-साइड ईवेंट हैंडलर को ट्रिगर करना चाहते हैं, तो उदाहरण के लिए, बटन के क्लिक इवेंट को दोनों परिदृश्यों (यानी, सिंक्रोनस / एसिंक्रोनस) के लिए इतना आसान है।

नियंत्रण के ईवेंट हैंडलर को ट्रिगर करने के लिए: यदि आपने अपने पेज पर पहले से एक 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. अपने नियंत्रण के लिए आप सर्वर साइड इवेंट हैंडलर लिखें

      संरक्षित शून्य btnSayHello_Click (ऑब्जेक्ट प्रेषक, EventArgs e) {Label1.Text = "हैलो वर्ल्ड ..."; }

    2. सर्वर साइड ईवेंट हैंडलर को कॉल करने के लिए क्लाइंट फ़ंक्शन जोड़ें

      समारोह SayHello () {__doPostBack ("btnSayHello", ""); }

कोड में "btnSayHello" को अपने नियंत्रण की क्लाइंट आईडी के साथ बदलें।

ऐसा करने से, यदि आपका नियंत्रण अपडेट पैनल के अंदर है, तो पृष्ठ ताज़ा नहीं होगा। यह इतना आसान है।

कहने के लिए एक और बात यह है कि: क्लाइंट आईडी से सावधान रहें, क्योंकि यह आप पर निर्भर करता है ID-Generation Policy, जो ClientIDMode प्रॉपर्टी के साथ परिभाषित होता है।


2

मैं इसे लागू करने की कोशिश कर रहा हूं लेकिन यह सही काम नहीं कर रहा है। पृष्ठ वापस पोस्ट कर रहा है, लेकिन मेरा कोड निष्पादित नहीं हो रहा है। जब मैं पृष्ठ को डीबग करता हूं, तो RaisePostBackEvent को कभी भी निकाल नहीं दिया जाता है। एक बात जो मैंने अलग तरह से की वह यह है कि मैं एक aspx पेज के बजाय एक उपयोगकर्ता नियंत्रण में कर रहा हूं।

यदि किसी और को मर्क की तरह है, और इस पर आने में परेशानी हो रही है, तो मेरे पास एक समाधान है:

जब आपका उपयोगकर्ता नियंत्रण होता है, तो ऐसा लगता है कि आपको मूल पृष्ठ में PostBackEventHandler भी बनाना होगा। और फिर आप सीधे इसे कॉल करके उपयोगकर्ता नियंत्रण के PostBackEventHandler का आह्वान कर सकते हैं। निचे देखो:

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

जहां UserControlID वह आईडी है, जिसे आपने उपयोगकर्ता को मूल पृष्ठ पर नियंत्रण दिया था, जब आपने इसे मार्क किया था।

नोट: आप बस सीधे उस उपयोगकर्ता नियंत्रण से संबंधित तरीकों को कॉल कर सकते हैं (जिस स्थिति में, आपको केवल मूल पृष्ठ में RaisePostBackEvent हैंडलर की आवश्यकता होगी):

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

कृपया एक नया प्रश्न खोलें। जिस प्रश्न पर आप पोस्ट कर रहे हैं, वह 5 साल से अधिक पुराना है।
निको

माफ़ करना। मौका मिलने पर मैं ऐसा करूंगा।
davrob01

1

आप अपने सामान्य तरीकों के लिए एक वेब सेवा बनाना चाहते हैं।
बस एक WebMethodAttribute को उन कार्यों पर जोड़ें, जिन्हें आप कॉल करना चाहते हैं, और इसके बारे में।
आपके सभी सामान्य सामानों के साथ एक वेब सेवा होने से सिस्टम को बनाए रखना आसान हो जाता है।


1

यदि __doPostBack फ़ंक्शन उस पेज पर उत्पन्न नहीं होता है, जिसे आपको इस तरह से लागू करने के लिए एक नियंत्रण सम्मिलित करने की आवश्यकता होती है:

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

1

के बारे में:

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

button.click();

यह इस तरह होना चाहिए:

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

जहां .IDx फ़ाइल में ASP.NET कंट्रोल आईडी formid है।


0

यदि आपको ऑब्जेक्ट अपेक्षित त्रुटि मिल रही है, तो इस लाइन को पेज लोड में जोड़ें।

ClientScript.GetPostBackEventReference(this, "");

0

आप PageMethods.Your C# method Nameजावास्क्रिप्ट में C # विधियों या VB.NET विधियों का उपयोग करने के लिए उपयोग कर सकते हैं ।


0

इसे इस्तेमाल करे:

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

या यह

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

जावास्क्रिप्ट कार्यों को कॉल करने के लिए बटन के OnClientClick संपत्ति का उपयोग करें ...


0

आप अपने जावास्क्रिप्ट कोड में इस लाइन को जोड़कर भी इसे प्राप्त कर सकते हैं:

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

मुझे लगता है कि यह बहुत आसान है!


0

कृपया इसे आज़माएँ:

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

ddlVoucherType एक नियंत्रण है जिसे चयनित अनुक्रमणिका परिवर्तन कॉल करेगा ... और आप इस नियंत्रण के चयनित अनुक्रमणिका परिवर्तन पर कोई कार्य कर सकते हैं।


0

इसे प्राप्त करने का सबसे सरल और अच्छा तरीका है onmouseup()बजाय जावास्क्रिप्ट घटना का उपयोग करनाonclick()

इस तरह से आप क्लिक करने के बाद जावास्क्रिप्ट को आग लगा देंगे और यह एएसपी OnClick()घटना में हस्तक्षेप नहीं करेगा ।


0

मैं यह कोशिश करता हूं और इसलिए मैं jQuery का उपयोग करते हुए एक Asp.Net विधि चला सकता हूं।

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

इसलिए अतिरिक्त कोड चलाने की आवश्यकता नहीं है


0

यह उत्तर मेरे लिए हवा की तरह काम करता है धन्यवाद क्रॉस ब्राउज़र:

__DoPostBack () विधि अच्छी तरह से काम करती है।

एक अन्य समाधान (बहुत हैकिश) बस अपने मार्कअप में एक अदृश्य एएसपी बटन जोड़ना है और इसे जावास्क्रिप्ट विधि के साथ क्लिक करना है।

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

अपने JavaScript से, उसके ClientID का उपयोग करके बटन के संदर्भ को पुनः प्राप्त करें और फिर उस पर .Click () विधि को कॉल करें:

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

button.Click(); 

Blockquote

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.