Calling an ASP.NET C# Method (Web Method) using JavaScript

Another title of this post would be “Say bye-bye to Postbacks”. Sometimes we need to stop annoying post-backs on ASP.NET Web Pages. For example, when one click the ASP.NET button on webpage, by default page gets post-back. So, how we stop this by keeping proper code-behind method calls. Let’s look at one case.

I will create a simple form having two asp.net textboxes and a button, we will enter our name and address in the textboxes and by clicking button will call the code-behind methods. For this we need to take the advantage of PageMethod and to setup PageMethod we need instance of ScriptManager on web page.

This is what we are going to create:-


PageMethod an easier and faster approach for ASP.NET AJAX. We can easily improve user experience and performance of web applications by unleashing the power of AJAX. One of the best things which I like in AJAX is PageMethod.

PageMethod is a way through which we can expose server side page's method in JavaScript. This brings so many opportunities, we can perform lots of operations without using slow and annoying post backs.

Let’s create our HTML Page:

    <div>
        <p>Say bye-bey to Postbacks.</p>

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

        <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="txtaddress" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="HandleIT(); return false;" />
    </div>

Now, in above code you can see one instance of ScriptManager and two textboxes and a button at the end. In button control you can see an attribute ‘OnClientClick’ to fire the JavaScript Method named ‘HandleIT()’ and this JavaScript Method will call the code-behind C# page method.
Note: Remember to add a new attribute EnablePageMethods to true in ScriptManager.

Now, look at the JavaScript Code:

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function HandleIT() {
            var name = document.getElementById('<%=txtname.ClientID %>').value;
            var address = document.getElementById('<%=txtaddress.ClientID %>').value;

            PageMethods.ProcessIT(name, address, onSucess, onError);

            function onSucess(result) {
                alert(result);
            }

            function onError(result) {
                alert('Something wrong.');
            }
        }
    </script>
</head>

In the above code, there is a ‘HandleIT()’ JavaScript Method having two variable name and address. These variables will carry the values of textboxes. Next, a PageMethod name ‘ProcessIT’ is being called and passing two different parameters name and address and rest two parameters will contain success result and error result. Next, the definition of these success results.

Now, look at code-behind of C# (PageMethod):

    [WebMethod]
    public static string ProcessIT(string name, string address)
    {
        string result = "Welcome Mr. " + name + ". Your address is '" + address + "'.";
        return result;
    }

In above code, to tell script manager that this method is accessible through JavaScript we need to ensure two things. First this method should be 'public static'. Second there should be a [WebMethod] tag above method as written in above code.

Remember to use a namespace ‘System.Web.Services’ for WebMethods.

So, now we all set to test it.


I hope you like it. Thanks.

Comments

  1. what if I need to work with non-static methods?
    Is there any way to call non-static method without posting back?

    ReplyDelete
  2. i am getting error as 'PageMethods' undefined

    ReplyDelete
    Replies
    1. probably you are missing the ScriptManager:

      Delete
    2. I am using it and sometimes I get authentication failed error message. The error message is intermittent. Do you know why it is so?

      Delete
  3. how to call public void test() function using same method

    ReplyDelete
  4. how to call function which is not static ,i.e public void test() using same code .

    ReplyDelete
  5. i have multiple textbox and i use text box keypress event in asp.net+C#

    ReplyDelete
  6. i am getting error as 'PageMethods' undefined n m also using scrip manager....

    ReplyDelete










  7. Replace the button id according to ur project after doing this u will not receive "Pagemethod undefined"

    ReplyDelete
  8. sir,i have a doubt...it is huge...but for this time...i m asking how to call the asp button click event using html click event and passing value from html button to asp button ..and using in asp button..thats it..

    ReplyDelete
  9. Hi,

    How to call non static methods in asp.net using jquery

    ReplyDelete
  10. how to call web method from javascript without using AJAX in asp.net 2.0 application. Please help on this.

    ReplyDelete
  11. Error getting at PageMethods pls solve this

    ReplyDelete
  12. what is the need of pagemethod if we can call webmethod easily from ajax call.

    ReplyDelete

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System