ASPSnippets

Alerts
Get notified when a new article is published.

Name
 
Email

Your email will always be private and will not be shared.

Follow us on twitter.
 
Calling server side methods using JavaScript and JQuery in ASP.Net
Author Name: Mudassar Khan Published Date: January 15, 2010
Filed Under :
ASP.Net
 |
AJAX
 |
JQuery
Views: 2416
This is asked many times on asp.net forums,
1. How to call Server Side methods or functions using JavaScript in ASP.Net
2. How to call Server Side methods Client Side in ASP.Net
Now the answer is using jQuery.
jQuery allows you to call Server Side ASP.net methods from client side without any PostBack. Actually it is an AJAX call to the server but it allows us to call the method or function defined server side.
 
Syntax
The figure below describes the syntax of the call.

Calling Server Side web methods in ASP.Net using JQuery JavaScript
 
HTML Markup
<div>
Your Name :
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time"
    onclick = "ShowCurrentTime()" />
</div>

As you noticed above I have added a textbox when user can enter his name and a TML button that calls a JavaScript method to get the Current Time.
 
Client Side Methods
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowCurrentTime() {
    $.ajax({
        type: "POST",
        url: "CS.aspx/GetCurrentTime",
        data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>

Above the ShowCurrentTime method makes an AJAX call to the server and executes the GetCurrentTime method which accepts the username and returns a string value.
 
Server Side Methods
C#
[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCurrentTime(ByVal name As String) As String
   Return "Hello " & name & Environment.NewLine & "The Current Time is: " & _
            DateTime.Now.ToString()
End Function

The above method simply returns a greeting message to the user along with the current server time. An important thing to note is that the method is declared as static (C#) and Shared(VB.Net) and also it is declared as Web Method unless you do this you won’t be able to call the methods
 
The figure below displays the output displayed to the user when the button is clicked

Calling Server Side Methods JavaScript and jQuery in ASP.Net

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.


You can download the code in VB.Net and C# using the link below

CallingServerSideMethodsJQuery.zip


If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share Page copy protected against web site content infringement by Copyscape

Related Articles

Comments

sharad kumar chaurasia said:
nice dear great effort...but please tellme the use of extra jquery-1.3.2.min.js file..Is this the library for Jquerybr br waiting 4 ur reply
January 26, 2010  

Mudassar Khan said:
<B><I>Reply To: sharad kumar chaurasia</I></B><BR>Yes that's the Jquery library
January 26, 2010  

sharad kumar chaurasia said:
Dear thanks for quick reply..Finally i got the best site for the .net developer where most of the common problems solution had been given..really u make a great effort..please maintain this in future also..
January 27, 2010  

Priya said:
GreatThankz
January 31, 2010  

Qurshi said:
thank you sirbr br again here i learned a new thingbr br can i use this with gridview to update data and then again reload gridview with the updated records.br br how can i
February 04, 2010  

Mudassar Khan said:
Reply To: Qurshi
Hi,
No this approach cannot be used with GridView. It can be only done if you create your own custom grid

Check this
http://www.aspsnippets.com/Articles/Custom-Ajax-Enabled-Grid-using-JavaScript-xmlhttp-in-ASP.Net.aspx
February 05, 2010  

Diamond Raiyhan said:
how can i join a child form with a parent form in asp.net using a buttonbr plz tell me.........br and how can i connect sql server with asp.netbr plz ans me sir.............
February 19, 2010  

Mudassar Khan said:
Reply To: Diamond Raiyhan
Refer these articles
http://www.aspsnippets.com/Articles/Open-PopUps-and-exchange-data-between-parent-page-and-PopUp-using-JavaScript.aspx

http://www.aspsnippets.com/Articles/Parameterized-Queries-ADO.Net.aspx
February 22, 2010  

Add Comments

You can add your comment about this article using the form below. Make sure you provide a valid email address
else you won't be notified when the author replies to your comment

Please note that all comments are moderated and will be deleted if they are
  • Not relavant to the article
  • Spam
  • Advertising campaigns or links to other sites
  • Abusive content.
There is no need to add BR tags. Simply press enter for new line

Name*  
Email*
Comment*  
Security code
Security code