Post
Ask Question

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

Another title of this article 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:

img1.gif

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

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

Let's create our HTML Page:

  1. <div>  
  2.     <p>Say bye-bey to Postbacks.</p>  
  3.   
  4.     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>  
  5.   
  6.     <asp:TextBox ID="txtname" runat="server"></asp:TextBox>  
  7.     <br />  
  8.     <asp:TextBox ID="txtaddress" runat="server"></asp:TextBox>  
  9.     <br />  
  10.     <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="HandleIT(); return false;" />  
  11. </div>  
Now, in the above code you can see one instance of the ScriptManager and two textboxes and a button at the end. In the button control you will 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 and set it to true in the ScriptManager.

Now, look at the JavaScript Code:

  1. <head runat="server">  
  2.     <title></title>  
  3.     <script type="text/javascript">  
  4.         function HandleIT() {  
  5.            var name = document.getElementById('<%=txtname.ClientID %>').value;  
  6.            var address = document.getElementById('<%=txtaddress.ClientID %>').value;  
  7.   
  8.             PageMethods.ProcessIT(name, address, onSucess, onError);   
  9.            function onSucess(result) {  
  10.                 alert(result);  
  11.             }  
  12.   
  13.             function onError(result) {  
  14.                 alert('Something wrong.');  
  15.             }  
  16.         }  
  17.    </script>  
  18. </head>  
In the above code, there is a "HandleIT()" JavaScript Method having two the variables, name and address. These variables will carry the values of the textboxes. Next, a PageMethod named "ProcessIT" is being called that passes the two parameters name and address and the other two parameters will contain the success result and error result. Next, the definition of these success results.

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

  1. [WebMethod]  
  2. ublic static string ProcessIT(string name, string address)  
  3. {  
  4.    string result = "Welcome Mr. " + name + ". Your address is '" + address + "'.";  
  5.    return result;  
  6. }  
In the above code, to tell the 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 in the above method as written in the above code.

Remember to use the namespace "System.Web.Services" for WebMethods.

So, now we are all set to test it.

img1.gif

I hope you like it. Thanks.


Similar Articles