Saturday, October 8, 2011

How to call methods from client side using AJAX extensions

We can call methods from client side using AJAX extensions

  1. Static methods in an ASP.net page
  2. Methods of a ASP.net web service

The sample code for this article is at

Static methods in an ASP.net page

In this case the method resides in the Web page. In order to call we need to

  1. Set EnablePageMethods="true" in ScriptManager
  2. The method needs to be public and static
  3. Add [WebMethod] attribute to the method
[System.Web.Services.WebMethod]
public static string GetInformation()
{
     return "Hello from Page Method";
}

From JavaScript we can now call the method as displayed below

<script language="javascript" type="text/javascript">
 
        function GetInfoFromPage() {
            PageMethods.GetInformation(OnSuccess, OnFail);
        }
 
        function OnSuccess(result) {
            alert(result);
        }
 
        function OnFail(result) {
            alert(result.get_message());
        }
    
</script>

 

Methods in an ASP.net Web Service

In this case the method resides in the Web service. In order to call we need to

  1. Add [System.Web.Script.Services.ScriptService] attribute to the Web Service
  2. Add the service reference to the ScriptManager
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class DemoService : System.Web.Services.WebService {
 
    public DemoService()
    {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }
 
    [WebMethod]
    public string GetInformation(){
        return "Hello from Web Service method";
    }
    
}

 

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        <Services>
            <asp:ServiceReference Path="~/DemoService.asmx"/>
        </Services>
</asp:ScriptManager>

From JavaScript we can now call the method as displayed below

<script language="javascript" type="text/javascript">
 
        function GetInfoFromService() {
            DemoService.GetInformation(OnSuccess, OnFail);
        }
 
        function OnSuccess(result) {
            alert(result);
        }
 
        function OnFail(result) {
            alert(result.get_message());
        }
    
</script>

 

Till now I’ve not discussed about the ScriptMethod attribute as this attribute was optional.

ScriptMethod Attribute

If a method is not marked with ScriptMethodAttribute

  • the method will be called by using the HTTP POST command
  • the response will be serialized as JSON

We can use Fiddler as displayed below to verify

image

We can change the default behavior by setting the named parameters of the ScriptMethod attribute.

Setting UseHttpGet to true will use Get instead of Post

image

and ResponseFormat to Xml will use Xml format instead of JSON

image

The code is displayed below

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public static string GetInformationUsingGet()
{
    return "Hello from Page Method using HTTP Get";
}
 
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod(ResponseFormat =     System.Web.Script.Services.ResponseFormat.Xml, XmlSerializeString = true)]
public static string GetInformationAsXml()
{        
    return "Hello from Page Method using Xml ResponseFormat";
}

No comments:

Post a Comment