Reuse of server methods using AJAX DLL

Introduction 

This articles manly explains how to use the AJAX DLL and reuse methods from another server page. If we have a method in another server page and want to access it from your page, by using AJAX DLL we can call the server side methods from JavaScript, and we can pass the method parameter values from JavaScript. 

An advantage of coding with the AJAX DLL is if you need to call a method from another server page you can easily do this by registering in the page load of your main server page.

Using the code

Let's create two pages: FirstPage.aspx and SecondPage.aspx. In FirstPage.aspx I have only a design part for adding two numbers, and I will create a method to perform the addition in SecondPage.cs. Create a simple design in your FirstPage.aspx for adding two numbers.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ajax;
namespace UserControlUsingAjax
{
    public partial class FirstPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(SecondPage));
        }
    }
}

With this registration we can access the server methods of SecondPage.aspx.cs through JavaScript.

 <%@ Page Title="" Language="C#" 
  MasterPageFile="~/Site.Master" AutoEventWireup="true" 
  CodeBehind="FirstPage.aspx.cs" Inherits="UserControlUsingAjax.FirstPage" %>
<asp:Content ID="Content1" 
  ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">

    .style1
    {
        width: 100%;
    }
    .style2
    {
        height: 41px;
    }
    </style>
    <script type="text/javascript">
        function AddNumbers() {
            var fnumber = document.getElementById('<%=txtF1.ClientID%>').value;
            var Snumber = document.getElementById('<%=txtF2.ClientID%>').value;
            var s = SecondPage.AddTwoNumbers(fnumber, Snumber);
            alert('Result is ' + s.value);
        }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <table class="style1">
        <tr>
            <td align="right">
            First Number</td>
            <td>
                <asp:TextBox ID="txtF1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right">
            Second Number</td>
            <td>
                <asp:TextBox ID="txtF2" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="style2">
            &nbsp;<center>
                    <asp:Button ID="Button1" runat="server" Text="Add" Height="27px" 
                    Width="59px" OnClientClick="AddNumbers();" />
                &nbsp;&nbsp;
                    <asp:Label ID="lblResult" runat="server"></asp:Label>
                </center>
            </td>
        </tr>
    </table>
</asp:Content>

In FirstPage.aspx page load, we registered SecondPage so now we can access the methods of SecondPage using JavaScript:

var s = SecondPage.AddTwoNumbers(fnumber, Snumber);

Now in the next step we need create a method AddTwoNumbers in SecondPage. 

public partial class SecondPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [Ajax.AjaxMethod(HttpSessionStateRequirement.Read)]
    public string AddTwoNumbers(string a, string b)
    {

        return (Convert.ToInt32(a) + Convert.ToInt32(b)).ToString();
    }
}

And we need to register AJAX in web.Config in system.web:

<system.web>
    <httpHandlers>
      <add verb="POST,GET" path="ajax/*.ashx" 
        type="Ajax.PageHandlerFactory, Ajax"/>
    </httpHandlers>

The drawback of using the AJAX DLL is that we cannot access our server control in our method directly but we can access server control values through JavaScript and we can pass to AJAX methods which are there in the server page.