Call server side functions using PageMethods in AJAX

This post illustrates how to call server side function using PageMethod. Enabling PageMethods property in the ScriptManager allows us to call functions directly from the server side. Therefore significant performance improvement of the page is noticed.

Create a stored procedure to get Books from the database.


CREATE PROCEDURE [dbo].[GetBooks]
AS
BEGIN
SELECT [ID]
      ,[BookName]
  FROM [Books]
END
GO

We will start by adding ScriptManager on the page and setting the EnablePageMethods property to true.


<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true">
</ajaxToolkit:ToolkitScriptManager>

Iterate through the list of books returned by the function using loops and bind the data to controls.



Default.aspx

<script type="text/javascript">
    function getBooks() {
            var data = { ID: "1", Name: "Csharp" };
            PageMethods.getBooks(data, function (returnValue) {
                for (var i in returnValue) {
                    var pList = document.getElementById("booksList");
                    var li = document.createElement("li");
                    li.appendChild(document.createTextNode(returnValue[i].ID + " - " + returnValue[i].BookName));
                    pList.appendChild(li);
                }
            });
    }
    </script>

<div>
<h3>Using Page Methods to call server side function without web service</h3>
<input type="button" onclick="getBooks()" value="Get Books" />
<ul id="booksList">
</ul>
</div>

Add a class in the code behind or in a seperate file and write the function to query the SQL server to get books. Create a WebMethod to which will return list of Books.

Default.aspx.cs

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;


protected void Page_Load(object sender, EventArgs e)
    {

    }

[WebMethod]
    public static List<Books> getBooks(Books b)
    {
        DataTable dtBooks = new DataTable();
        dtBooks = b.GetBooks();
        List<Books> books = new List<Books>();

        Books book;
        foreach (DataRow dr in dtBooks.Rows)
        {
            book = new Books();
            book.ID = dr["ID"].ToString();
            book.BookName = dr["BookName"].ToString();
            books.Add(book);
        }
        return books;
    }


public class Books
    {
        // SQL Server Connection String
        SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString);

        public string ID { get; set; }
        public string BookName { get; set; }

        public DataTable GetBooks()
        {
            DataTable dtBooks = new DataTable();
            SqlDataAdapter adpBooks = new SqlDataAdapter("GetBooks", sqlcon);
            adpBooks.SelectCommand.CommandType = CommandType.StoredProcedure;
            //adpBooks.SelectCommand.Parameters.AddWithValue("@BookId", bookId);
            try
            {
                adpBooks.Fill(dtBooks);
                return dtBooks;
            }
            catch (Exception)
            {
                throw;
            }
            finally
            {
                sqlcon.Close();
            }
        }
    }