asp.net webform 通过ajax取得json数据(二)

Calling ASP.Net WebMethod using jQuery AJAX

 23 Nov 2013   Mudassar Khan  21 Comments  268069 Views

  ASP.Net   AJAX   jQuery

Here Mudassar Ahmed Khan has explained how to make a call to ASP.Net WebMethod using jQuery AJAX.

 Download   View Demo

In this article I have explained, how to make a AJAX call to ASP.Net WebMethod using jQuery AJAX.

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 following picture describes the syntax of the jQuery AJAX call.

 

 

HTML Markup

The following HTML Markup consists of an ASP.Net TextBox and an HTML Button.

< div >

Your Name :

< asp : TextBox  ID ="txtUserName"  runat ="server"></ asp : TextBox >

< input  id ="btnGetTime"  type ="button"  value ="Show Current Time"

     onclick  =  "ShowCurrentTime()"  />

</ div >

 

 

Client Side Script

When the Button is clicked the  ShowCurrentTime JavaScript function is executed which makes an AJAX call to the  GetCurrentTime WebMethod. The value of the TextBox is passed as parameter to the WebMethod.

< script  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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 >

 

 

The WebMethod

The following WebMethod 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 is decorated with  WebMethod attribute, this is necessary otherwise the method will not be called from client side jQuery AJAX call.

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

 

 

Screenshot

 

 

Browser Compatibility

The above code has been tested in the following browsers. 

         

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

 

 

Demo

 View Demo

 

 

Downloads

 Download