This is an article about using Ajax beyond
This article discusses using
PageMethodin ASP.NET Ajax.
I have always been wondering about the
UpdatePanelin Ajax, at times it just looks like a Magic Wand to me. If you already have an aspx and want to incorporate Ajax, just touch this Magic Wand and your page is Ajax ready! However, one more such Magic Wand provided in Microsoft Ajax is
PageMethods. These two are equally (if not more) handy when we want to Ajaxify our page, compared to
UpdatePanel. In this article, I would take a look at these two as an alternative to
UpdatePanel. I will try to demonstrate this with one example.
Before we begin working on the example, given below are captured notes from MSDN on
ScriptServicejust to make things handy.
You can add
staticpage methods to an ASP.NET page and qualify them as Web methods. You can then call these methods from script as if they were part of a Web service, but without creating a separate *.asmx file. To create Web methods in a page, import the
System.Web.Services namespace and add a
WebMethodAttributeattribute to each
staticmethod that you want to expose. To be able to call
staticpage methods as Web methods, you must set the
EnablePageMethodsattribute of the
Now let's begin with our example; one simple example, where we would have otherwise used
I have a search/search results page, in which I have
searchPanelwhich includes three controls, one
textboxfor entering the search keyword, one button for performing the search and one grid to display the search result. Apart from the search results panel, the page might typically include left hand side navigation menu and top header bar and bottom footer bar and right hand side context panels. In a usual approach, to Ajaxify this page, we would be wrapping the
searchPanelwith an update panel so that, upon performing a search, the whole page is not posted back. I will demonstrate below how to achieve a similar user experience without making use of update panel.
In this approach, we would not be putting the grid statically in the '
searchPanel' to show the search result. Rather we would create a
PageMethodin which, after retrieving the search result, we would dynamically create a grid, bind the same with search result data source, and then return grid's HTML from the method. On the search button click, we would invoke one client side method, which would in turn invoke the above
PageMethod, and upon retrieving the output from the
PageMethod, we would set the same to a
That's it! Take a look at the following code. Here in the sample, I have considered an array list as search result data source. I am using the
searchkeyword to populate to the array list, which can be typically replaced by a database call.
The sample does not include other parts of the page like left hand side navigation menu or header bar, etc. as those would not need any alteration compared to the use of update panel.
Going further, I intend to talk about incorporating other useful features of update panel like update progress, etc. with the page method approach, comparing these two approaches and which to use when, and why one approach performs better than the other. So stay tuned!
The HTML portion of the following code is *not* well formed, closing tags for divs, panels etc. are lost during submission. I am keeping the following code just for reference purposes, and have attached a working version of the code file.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
public static string GetSearchResult(string searchKeyword)
ArrayList searchResultRows = new ArrayList();
Random random = null;
for (int resultCount = 0; resultCount < 10; resultCount++)
random = new Random(resultCount);
GridView resultRepeater = new GridView();
resultRepeater.DataSource = searchResultRows;
StringBuilder stringBuilder = new StringBuilder();
System.IO.StringWriter textWriter = new System.IO.StringWriter(stringBuilder);
HtmlTextWriter htmlTextWriter = new HtmlTextWriter(textWriter);
var searchKeyWord = document.getElementById('searchKeywordBox').value;
var searchResultsContainer = document.getElementById('searchResultsDiv');
searchResultsContainer.innerHTML = asyncResult;
<head id="Head1" runat="server">
<form id="form1" runat="server">
<asp:Panel ID="searchPanel" runat="server">
<asp:TextBox ID="searchKeywordBox" runat="server">
<asp:Button ID="performSearchViaPage" runat="server"
- 22nd September, 2008: Initial post