Asychronous Web Service Call

Introduction

This tip gives us an idea to call methods of page in an asynchronous way.

Background

To call method asynchronously, AJAX has to provide build ins example $.ajax( ).

Using the Code

Step 1

Create a simple AsychCall web page (.aspx). Create a web method, which we need to consume asynchronously like:

[WebMethod]
[ScriptMethod()]
public static bool ExecuteReport(string reportingYear )
{
   
    bool returnvalue = true;
    int reportReturnValue = -1;
    try
    {
        reportReturnValue = GenerateReport.ReportGeneratereportingYear 
        if (reportReturnValue == -1)
        {
            return false;
        }
        return returnvalue;
    }
    catch (System.Exception ex)
    {
        return returnvalue;
    }
}

Step 2

Create another webpage and place a button like:

<td>
     <asp:Panel ID="pnlReportStatusMsg" 
                runat="server" Visible="true">
         <input type="button" id="btnReportGenerate" 
                    value="Generate Report" onclick="executeReport();"
                        runat="server" />
     </asp:Panel>
</td>

Step 3

On the button click, call a JavaScript method "executeReport(); like:

$.ajax({
       type: "POST",
       url: "/AsychCall.aspx/ExecuteReport",
       data: "{reportingYearKey:'" + FiscalYearValue }",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (msg) {
           if (msg.d == false) {
               document.getElementById('<%= lblReportStatus.ClientID %>').
               style.display = 'block';
               $("#<%=lblReportStatus.ClientID %>").text
               ("Report generation process is not enabled for selected
               reporting fiscal year, therefore please contact administrator
               for the corresponding changes.");
               document.getElementById('<%= btnReportGenerate.ClientID %>').
               disabled = false;
           }
       },
       error: function (request, status, error) {
           alert(request.responseText);
       }
   });

Step 4

Compile this code. You see, when you click the button "Generate Report", AJAX method asynchronously calls Web method "ExecuteReport" from AsychCall Web page.