Sanjeetosphere : ajax

How To: Create an efficient data driven page with Business Objects, GridView, Custom paging, and AJAX

Sanjeet — Sat, 02 Jun 2007 15:53:49 GMT

Preface:

I have seen a large number of cases where the customer complaint of performance and scalability issues
when they create/manage a data-aware application. That’s when I decided that I should come up with
something that is concise, efficient, and easy to implement for developers.
Here, is what I created a couple of days ago.

GridView is awesome, and if you combine it with Sql Server 2005, DetailsView and FormView
you have a formidable force to build a rich data aware page. You can achieve almost everything
that you may require on a page without even writing a single line of code in your ASPX,
even Custom paging (it requires you to write some views in TSQL).

Requirement Analysis:

A simple page for that has to fetch a large amount of data (more than 10K rows) from a remote database.
I need paging and sorting support with CRUD on the page
I need a way to customize the GridView control
I need to use a 3-tier structure where I have Data Access Layer, Business Access Layer, and the Presentation Layer.
Everybody is talking and using AJAX, so I need that also. I like the word "Partial-Rendering" ;)

Prerequisites:

You need Visual Studio 2005, Sql Server 2005, and ASP.net AJAX 1.0

Architecture:

The DAL:

It is implemented using a Dataset. This is a strongly typed dataset, and contains all the required Stored procedures and queries.

We will concentrate on the class "Entity" only.

The following is the implementation of the BAL.

The presentation layer has only 1 page for now. I hope this is what we need now. It looks like the following:

As we can see, we have highly Customized the datagrid. Lets dive deeper into the functionality.

The BAL:

The following code snippet contains Insert, Edit, and Delete functions required to do usual stuff. Its self explanatory.

/// <summary>

/// This is the Insert function for the class.

/// It takes all the columns as arguments and uses a DatabaseDirect mode to update the database directly.

/// </summary>

/// <param name="EntityID"></param>

/// <param name="UserID"></param>

/// <param name="Title"></param>

/// <param name="Description"></param>

/// <returns></returns>

public int Insert(int EntityID, string UserID, string Title, string Description)

    int rowsAffected = 0;

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //Update the DB directly

        //Insert function is defined in the DataSet

        rowsAffected = ad.Insert(UserID, Title, Description);

    catch

        //throw all the error that are catched here

        throw;

    return rowsAffected;

/// <summary>

/// This is the Edit function for the class.

/// It takes all the columns as arguments and uses a DatabaseDirect mode to update the database directly.

/// </summary>

/// <param name="EntityID"></param>

/// <param name="UserID"></param>

/// <param name="Title"></param>

/// <param name="Description"></param>

/// <returns></returns>

public int Edit(int EntityID, string UserID, string Title, string Description)

    int rowsAffected = 0;

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //Update function is defined in the DataSet

        rowsAffected = ad.Update(UserID, Title, Description, EntityID, EntityID);

    catch

        //throw all the error that are catched here

        throw;

    return rowsAffected;

/// <summary>

/// This is the Delete function for the class.

/// It takes all the columns as arguments and uses a DatabaseDirect mode to update the database directly.

/// </summary>

/// <param name="EntityID"></param>

/// <returns></returns>

public int Delete(int EntityID)

    int rowsAffected = 0;

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //Delete function is defined in the DataSet

        rowsAffected = ad.Delete(EntityID);

    catch

        //throw all the error that are catched here or apply

        throw;

    return rowsAffected;

Now the Select functions. These functions are the key to our demo. We will explain each of them at a later part in this post.

/// <summary>

/// This function selects all the records filtered by UserID

/// </summary>

/// <param name="UserID"></param>

/// <returns></returns>

public ManageabilityDS.EntityDataTable Select(string UserID)

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //GetEntitiesByUser function is defined in the DataSet

        return ad.GetEntitiesByUser(UserID);

    catch

        throw;

/// <summary>

/// This function selects all the records filtered by UserID and EntityID

/// </summary>

/// <param name="UserID"></param>

/// <param name="EntityID"></param>

/// <returns></returns>

public ManageabilityDS.EntityDataTable Select(string UserID, int EntityID)

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //GetEntityByUserAndEntityID function is defined in the DataSet

        return ad.GetEntityByUserAndEntityID(UserID, EntityID);

    catch

        throw;

/// <summary>

/// This function gets the maximum rows from the table after its sequenced using Row_number

/// </summary>

/// <param name="UserID"></param>

/// <returns></returns>

public long GetMaxNumberOfRows(string UserID)

    long num = 0;

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //GetNumberOfRows function is defined in the DataSet

        num = (long)ad.GetNumberOfRows(UserID);

        return num;

    catch

        throw;

/// <summary>

/// This function return a strongly type list containing paged data

/// A benefit of using Generic here is to minimize the size of the object

/// </summary>

/// <param name="UserID"></param>

/// <param name="StartRowIndex"></param>

/// <param name="MaximumRows"></param>

/// <returns></returns>

public List<Entity> Select(string UserID, int StartRowIndex, int MaximumRows)

    ManageabilityDS.EntityDataTable tbl = null;

    List<Entity> t = new List<Entity>();

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //GetPagedEntityByUser function is defined in the DataSet

        tbl = ad.GetPagedEntityByUser(StartRowIndex, MaximumRows, UserID);

        //fill the strongly typed List with data

        foreach (ManageabilityDS.EntityRow row in tbl.Rows)

            Entity en = new Entity();

            en.EntityID = row.EntityID;

            en.UserId = row.UserID;

            en.Title = row.Title;

            en.Description = row.Description;

            t.Add(en);

        return t;

    catch

        throw;

/// <summary>

/// This function return a strongly type list containing paged and sorted data

/// </summary>

/// <param name="UserID"></param>

/// <param name="StartRowIndex"></param>

/// <param name="MaximumRows"></param>

/// <param name="ColumnToOrder"></param>

/// <param name="OrderDirection"></param>

/// <returns></returns>

public List<Entity> Select(string UserID, int StartRowIndex, int MaximumRows, string ColumnToOrder, string OrderDirection)

    ManageabilityDS.EntityDataTable tbl = null;

    List<Entity> t = new List<Entity>();

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //GetPagedEntityByUserOrdered function is defined in the DataSet

        tbl = ad.GetPagedEntityByUserOrdered(StartRowIndex, MaximumRows, UserID, ColumnToOrder, OrderDirection);

        //fill the strongly typed List with data

        foreach (ManageabilityDS.EntityRow row in tbl.Rows)

            Entity en = new Entity();

            en.EntityID = row.EntityID;

            en.UserId = row.UserID;

            en.Title = row.Title;

            en.Description = row.Description;

            t.Add(en);

        return t;

    catch

        throw;

The Presentation Layer:

The datagrid looks like following in code:

<asp:GridView ID="MainGrid" runat="server" EnableViewState="true" AutoGenerateColumns="False"

    CellPadding="4" ForeColor="#333333" Width="100%" PageSize="2" DataKeyNames="EntityID"

    EmptyDataText="No data available" OnRowDeleting="MainGrid_RowDeleting">

    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

    <RowStyle BackColor="#EFF3FB" />

    <EditRowStyle BackColor="#2461BF" />

    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

    <HeaderStyle Font-Bold="True" HorizontalAlign="Left" />

    <AlternatingRowStyle BackColor="White" />

    <Columns>

        <asp:TemplateField HeaderText="Details">

            <HeaderStyle Font-Bold="True" Width="80%" />

            <ItemTemplate>

                <table width="100%">

                    <tr>

                        <td width="15%">

                            <span><b>ID:</b></span>

                        </td>

                        <td>

                            <asp:Label ID="EntityIDLabel" runat="server" Text='<%#Bind("EntityID")%>'></asp:Label>

                        </td>

                    </tr>

                    <tr>

                        <td bgcolor="silver" colspan="2">

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <span><b>Title:</b></span>

                        </td>

                        <td>

                            <asp:Label ID="TitleLabel" runat="server" Text='<%#Bind("Title")%>'></asp:Label>

                        </td>

                    </tr>

                    <tr>

                        <td bgcolor="silver" colspan="2">

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <span><b>Description:</b></span>

                        </td>

                        <td>

                            <asp:Label ID="DescriptionLabel" runat="server" Font-Italic="true" Text='<%#Bind("Description")%>'></asp:Label>

                        </td>

                    </tr>

                </table>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Options">

            <ItemTemplate>

                <table width="100%">

                    <tr>

                        <td valign="top">

                            <asp:LinkButton ID="Select" CommandName="Select" runat="server" Text="Select"></asp:LinkButton>

                        </td>

                    </tr>

                    <tr>

                        <td valign="top">

                            <asp:LinkButton ID="Delete" CommandName="Delete" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this record?');"></asp:LinkButton>

                        </td>

                    </tr>

                </table>

            </ItemTemplate>

            <HeaderStyle Font-Bold="False" />

        </asp:TemplateField>

    </Columns>

</asp:GridView>

We have made extensive use of template columns to give it a different look.
To bind the data we simply used: Text='<%#Bind("Column_Name")%>' e.g.
Text = '<%#Bind("Title")%>'

Notice that the paging is disabled. DataKeyNames is set to the Primary Key,
and we have defined OnRowDeleting event for deleting a record.

Remember those days, when we used to code OnItemDatBound event in
ASP.Net 1.1 to bind the Delete button attribute with an OnClick event. Now,
its as easy as assigning OnClientClick = [required javascript] e.g.
OnClientClick = "return confirm(Are you sure?)"

The DetailsView looks like the following in code:

<asp:DetailsView ID="EntityDetailsView" runat="server" AutoGenerateRows="False" DataKeyNames="EntityID"

    DataSourceID="odsDetailView" Height="50px" Width="100%" OnItemInserted="EntityDetailsView_ItemInserted"

    OnItemUpdated="EntityDetailsView_ItemUpdated">

    <Fields>

        <asp:BoundField DataField="EntityID" HeaderText="ID:" InsertVisible="False" ReadOnly="True"

            SortExpression="EntityID" HeaderStyle-Width="15%" HeaderStyle-Font-Bold="true" />

        <asp:BoundField DataField="UserID" HeaderText="UserID" SortExpression="UserID" Visible="False" />

        <asp:TemplateField HeaderText="Title:" HeaderStyle-VerticalAlign="Top" SortExpression="Title"

            HeaderStyle-Font-Bold="true">

            <EditItemTemplate>

                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Title") %>' CssClass="textbox"></asp:TextBox>

            </EditItemTemplate>

            <InsertItemTemplate>

                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Title") %>' CssClass="textbox"></asp:TextBox>

            </InsertItemTemplate>

            <ItemTemplate>

                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Title") %>'></asp:Label>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Description:" HeaderStyle-VerticalAlign="Top" SortExpression="Description"

            HeaderStyle-Font-Bold="true">

            <EditItemTemplate>

                <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Description") %>' CssClass="textarea"

                    TextMode="MultiLine" Rows="5" Width="80%"></asp:TextBox>

            </EditItemTemplate>

            <InsertItemTemplate>

                <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Description") %>' CssClass="textarea"

                    TextMode="MultiLine" Rows="5" Width="80%"></asp:TextBox>

            </InsertItemTemplate>

            <ItemTemplate>

                <asp:Label ID="Label2" runat="server" Text='<%# Bind("Description") %>'></asp:Label>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:CommandField ShowEditButton="True" ShowInsertButton="True" />

    </Fields>

</asp:DetailsView>

Check out the following:

We have set DataKeyField to the Primary Key and set the datasource ID to
an ObjectDataSource called "odsDetailView". It fetches all the data via the
Business layer and it doesn't need to go to the DAL.

The ObjectDataSource truely helps us to build a 3-tier application.
Earlier, in this model the UI layer used to bind directly to the Data layer.
This actually used to break the tier, and caused scalability and
maintenance hassles.

We have OnItemInserted and OnItemUpdated events handled to refresh the
GridView whenever an update is made using the DetailsView.

<asp:DetailsView ID="EntityDetailsView" runat="server" AutoGenerateRows="False" DataKeyNames="EntityID"    
 DataSourceID="odsDetailView" Height="50px" Width="100%" OnItemInserted="EntityDetailsView_ItemInserted"    
 OnItemUpdated="EntityDetailsView_ItemUpdated">

So, whenever you click on the Select button in a row inside the GridView,
the ObjectDataSource retrieves the PrimaryKey from the SelectedValue property
of the GridView. See the definition of the ASP ControlParameter below.

<SelectParameters>

    <asp:SessionParameter DefaultValue="fareast\sanjeets" Name="UserID" SessionField="UserID"

        Type="String" />

    <asp:ControlParameter ControlID="MainGrid" Name="EntityID" PropertyName="SelectedValue"

        Type="Int32" />

</SelectParameters>

So far, we have discussed how the controls interact with each other to give you
you a nice clutter free UI for simple operations like Insert, Update, and Delete.
Now, lets move on the bigger picture.

I have entered about 50K rows in the Entities table.

Fair enough, I need paging now. Talking about normal paging would be painful,
so thats ruled out (I hope you understand what does the normal paging will
do, it will bring all 50K rows and show you 10 rows... it hurts).

GridView alongwith ObjectDataSource brings to CustomPaging, so all you have to do,
is to use the magic of Row_Number in Sql Server 2005 to bring sequential rows.
But, thats again almost codeless. So, you have lesser control over it? I hope you
still remember scalability? right?

Refer to Paging through lots of data efficiently (and in an Ajax way) with ASP.NET 2.0 for more
information about how to almost codelessly implement custom paging.

Lets take a look into the 2 Stored Procedures:
The first one as the name suggests Selects Paged rows by a given condition.

ALTER Procedure [dbo].[SelectPagedEntityByUser]

    @StartRowIndex int,

    @MaximumRows int,

    @UserID varchar(50)

AS

Select EntityID, UserID, Title, [Description]

    From AllEntities

Where

    SrNum Between @StartRowIndex AND (@StartRowIndex+@MaximumRows)-1

    AND UserID = @UserID

It uses the following view:

ALTER View [dbo].[AllEntities]

AS

Select

    EntityID, UserID, Title, [Description],

    Row_Number() Over(Order By EntityID) as SrNum

From Entity

The second one, as the name suggests Selects Paged rows by a given condition with a sort
condition:

ALTER Procedure [dbo].[SelectPagedEntityByUserOrdered]

    @StartRowIndex int,

    @MaximumRows int,

    @UserID varchar(50),

    @ColumnToOrder varchar(50),

    @OrderDirection varchar(10)

AS

if @ColumnToOrder like '%ID'

begin

    if @OrderDirection = 'asc'

        begin

            Select EntityID, UserID, Title, [Description]

                From (

                        Select

                            EntityID, UserID, Title, [Description],

                            Row_Number() Over(Order By EntityID) as SrNum

                        From Entity

                    ) as temp

            Where

                SrNum Between @StartRowIndex AND (@StartRowIndex+@MaximumRows)-1

                AND UserID = @UserID

end

    else

        begin

            Select EntityID, UserID, Title, [Description]

                From (

                        Select

                            EntityID, UserID, Title, [Description],

                            Row_Number() Over(Order By EntityID DESC) as SrNum

                        From Entity

                    ) as temp

            Where

                SrNum Between @StartRowIndex AND (@StartRowIndex+@MaximumRows)-1

                AND UserID = @UserID

end

end

if @ColumnToOrder = 'title'

begin

    if @OrderDirection = 'asc'

        begin

            Select EntityID, UserID, Title, [Description]

                From (

                        Select

                            EntityID, UserID, Title, [Description],

                            Row_Number() Over(Order By Title) as SrNum

                        From Entity

                    ) as temp

            Where

                SrNum Between @StartRowIndex AND (@StartRowIndex+@MaximumRows)-1

                AND UserID = @UserID

end

    else

        begin

            Select EntityID, UserID, Title, [Description]

                From (

                        Select

                            EntityID, UserID, Title, [Description],

                            Row_Number() Over(Order By Title DESC) as SrNum

                        From Entity

                    ) as temp

            Where

                SrNum Between @StartRowIndex AND (@StartRowIndex+@MaximumRows)-1

                AND UserID = @UserID

end

end

if @ColumnToOrder like 'desc%'

begin

    if @OrderDirection = 'asc'

        begin

            Select EntityID, UserID, Title, [Description]

                From (

                        Select

                            EntityID, UserID, Title, [Description],

                            Row_Number() Over(Order By [Description]) as SrNum

                        From Entity

                    ) as temp

            Where

                SrNum Between @StartRowIndex AND (@StartRowIndex+@MaximumRows)-1

                AND UserID = @UserID

end

    else

        begin

            Select EntityID, UserID, Title, [Description]

                From (

                        Select

                            EntityID, UserID, Title, [Description],

                            Row_Number() Over(Order By [Description] DESC) as SrNum

                        From Entity

                    ) as temp

            Where

                SrNum Between @StartRowIndex AND (@StartRowIndex+@MaximumRows)-1

                AND UserID = @UserID

end

end

Their corresponding functions in the BL looks like the following:
Notice the use of Generics.
For the unsorted:

/// <summary>

/// This function return a strongly type list containing paged data

/// A benefit of using Generic here is to minimize the size of the object

/// </summary>

/// <param name="UserID"></param>

/// <param name="StartRowIndex"></param>

/// <param name="MaximumRows"></param>

/// <returns></returns>

public List<Entity> Select(string UserID, int StartRowIndex, int MaximumRows)

    ManageabilityDS.EntityDataTable tbl = null;

    List<Entity> t = new List<Entity>();

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //GetPagedEntityByUser function is defined in the DataSet

        tbl = ad.GetPagedEntityByUser(StartRowIndex, MaximumRows, UserID);

        //fill the strongly typed List with data

        foreach (ManageabilityDS.EntityRow row in tbl.Rows)

            Entity en = new Entity();

            en.EntityID = row.EntityID;

            en.UserId = row.UserID;

            en.Title = row.Title;

            en.Description = row.Description;

            t.Add(en);

        return t;

    catch

        throw;

For the sorted:

/// <summary>

/// This function return a strongly type list containing paged and sorted data

/// </summary>

/// <param name="UserID"></param>

/// <param name="StartRowIndex"></param>

/// <param name="MaximumRows"></param>

/// <param name="ColumnToOrder"></param>

/// <param name="OrderDirection"></param>

/// <returns></returns>

public List<Entity> Select(string UserID, int StartRowIndex, int MaximumRows, string ColumnToOrder, string OrderDirection)

    ManageabilityDS.EntityDataTable tbl = null;

    List<Entity> t = new List<Entity>();

try

        ManageabilityDSTableAdapters.EntityTableAdapter ad = new ManageabilityDSTableAdapters.EntityTableAdapter();

        //GetPagedEntityByUserOrdered function is defined in the DataSet

        tbl = ad.GetPagedEntityByUserOrdered(StartRowIndex, MaximumRows, UserID, ColumnToOrder, OrderDirection);

        //fill the strongly typed List with data

        foreach (ManageabilityDS.EntityRow row in tbl.Rows)

            Entity en = new Entity();

            en.EntityID = row.EntityID;

            en.UserId = row.UserID;

            en.Title = row.Title;

            en.Description = row.Description;

            t.Add(en);

        return t;

    catch

        throw;

Let's get back to the Presentation Layer. Here, as part of customization we have the
GridView inside a table which is sitting inside an asp:UpdatePanel... AJAX effect!!!
Simple, sweet and effective.

We had to create the PageLinks for navigation. The ellipsis and all other links are created
on the fly and provides smooth and fast navigation at any point.
When you click on the link, only PageSize number of rows are fetched from the database,
so practically it doesn't matter if you have 50K or 500K records!!!

Lets see how the Links are created:

/// <summary>

/// This sub creates all the links on the page

/// </summary>

private void CreateButtons()

    int totalRecords = int.Parse(RecordCountHdn.Value);

    int pageSize = int.Parse(PageSizeHdn.Value);

    //calculate the total number of links to be created

    int totalPages = totalRecords % pageSize == 0 ? totalRecords / pageSize : (totalRecords / pageSize) + 1;

    //this is for the ellipsis, keeps a track of the previous bunch of links

    int x = int.Parse(ViewState["PageLinkLastBunchCount"].ToString());

    //its the counter that checks whether all the links are created

    int p = MAX_PAGE_LINKS * (x + 1);

    //The ellipsis linkbutton

    LinkButton ellipsis = null;

    ////To AJAXify the linkbuttons you need to have triggers

    AsyncPostBackTrigger t = null;

    //clear any previous links in the placeholder

    PageLinksPH.Controls.Clear();

    if (p < totalPages)

        //if you are on the first bunch of links

        if (x == 0)

            for (int i = MAX_PAGE_LINKS * x; i < p; i++)

                LinkButton l = new LinkButton();

                l.ID = "pagelink"+i;

                l.Text = string.Format("{0}", i + 1);

                l.ToolTip = string.Format("{0}+...", (i * pageSize) + 1);

                l.CommandArgument = string.Format("{0}", (i * pageSize) + 1);

                l.CssClass = "pagelink";

                //add event handler to each linkbutton

                l.Click += new EventHandler(l_Click);

                PageLinksPH.Controls.Add(l);

                t = new AsyncPostBackTrigger();

                t.ControlID = l.ID;

                AjaxPanel.Triggers.Add(t);

            ellipsis = new LinkButton();

            ellipsis.ID = "ellipsisNext";

            ellipsis.Text = ">>";

            ellipsis.ToolTip = "Next";

            ellipsis.CommandArgument = string.Format("next");

            ellipsis.CssClass = "pagelink";

            //add event handler to each linkbutton

            ellipsis.Click += new EventHandler(ellipsis_Click);

            PageLinksPH.Controls.Add(ellipsis);

            t = new AsyncPostBackTrigger();

            t.ControlID = ellipsis.ID;

            AjaxPanel.Triggers.Add(t);

        else //this will show next and the previous ellipsis

            ellipsis = new LinkButton();

            ellipsis.Text = "<<";

            ellipsis.ID = "ellipsisPrevious";

            ellipsis.ToolTip = "Previous";

            ellipsis.CommandArgument = string.Format("previous");

            ellipsis.CssClass = "pagelink";

            //add event handler to each linkbutton

            ellipsis.Click += new EventHandler(ellipsis_Click);

            PageLinksPH.Controls.Add(ellipsis);

            t = new AsyncPostBackTrigger();

            t.ControlID = ellipsis.ID;

            AjaxPanel.Triggers.Add(t);

            for (int i = MAX_PAGE_LINKS * x; i < p; i++)

                LinkButton l = new LinkButton();

                l.ID = "pagelink" + i;

                l.Text = string.Format("{0}", i + 1);

                l.ToolTip = string.Format("{0}+...", (i * pageSize) + 1);

                l.CommandArgument = string.Format("{0}", (i * pageSize) + 1);

                l.CssClass = "pagelink";

                //add event handler to each linkbutton

                l.Click += new EventHandler(l_Click);

                PageLinksPH.Controls.Add(l);

                t = new AsyncPostBackTrigger();

                t.ControlID = l.ID;

                AjaxPanel.Triggers.Add(t);

            ellipsis = new LinkButton();

            ellipsis.ID = "ellipsisNext";

            ellipsis.Text = ">>";

            ellipsis.ToolTip = "Next";

            ellipsis.CommandArgument = string.Format("next");

            ellipsis.CssClass = "pagelink";

            //add event handler to each linkbutton

            ellipsis.Click += new EventHandler(ellipsis_Click);

            PageLinksPH.Controls.Add(ellipsis);

            t = new AsyncPostBackTrigger();

            t.ControlID = ellipsis.ID;

            AjaxPanel.Triggers.Add(t);

Event handler for the ellipsis:

/// <summary>

/// The ellipsis' event handler. It shows the next/previous bunch of links

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void ellipsis_Click(object sender, EventArgs e)

    //throw new Exception("The method or operation is not implemented.");

    LinkButton l = (LinkButton)sender;

    int x = int.Parse(ViewState["PageLinkLastBunchCount"].ToString());

    if (l.CommandArgument.ToLower().Equals("previous"))

        x--;

    else if (l.CommandArgument.ToLower().Equals("next"))

        x++;

    ViewState["PageLinkLastBunchCount"] = x;

    CreateButtons();

Event handler for the links:

/// <summary>

/// This handler will send the query to the database fetching the

/// exact number of records only. It also takes care of sorting.

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void l_Click(object sender, EventArgs e)

    //throw new Exception("The method or operation is not implemented.");

    //Response.Write("l_Click");

try

        LinkButton l = (LinkButton)sender;

        l.CssClass = "pagelinkSelected";

        int startIndex = int.Parse(l.CommandArgument);

        ViewState["PageStartIndex"] = startIndex;

        int pageSize = int.Parse(PageSizeHdn.Value);

        using (Entity en = new Entity())

            if (_isPageSorted)

                MainGrid.DataSource = en.Select(_userID, startIndex, pageSize, ColumnList.SelectedValue.ToString(), OrderDirectionList.SelectedValue.ToString());

            else

                MainGrid.DataSource = en.Select(_userID, startIndex, pageSize);

            MainGrid.DataBind();

        InfoLabel.Text = string.Format("You are at Page# {0}", l.Text);

    catch(Exception ex)

        ErrorLabel.Text = ex.Message;

After you follow the steps above, I am sure it will be a cake walk for you all to create
or maintain any such page. It might appear to be lots of work, but its highly reliable
and scalable. No blackboxes!!!

So, this brings us to an end of this long post, I sincerely hope it will help you a lot.

See you soon...

AJAX in a nutshell : It can't get any simpler folks

Sanjeet — Thu, 19 Apr 2007 05:55:00 GMT

1. Ajax basics

- "Asynchronous JavaScript and XML," is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change.

- Ajax uses the following existing technologies.
Designing/Styling : XHTML/HTML, CSS
Async/Sync calls to the server : XMLHttpRequest
Data manipulation : DOM
Data Exchange : XML, Html, Plain Text, JSON

- Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.

2. History

- Although the term Ajax was coined in 2005, most of the technologies that enable Ajax started a decade earlier with Microsoft's initiatives in developing Remote Scripting.

- AJAX was made popular in 2005 by Google (with Google Suggest).

- Remote Scripting allowed a Java Applet to pull data from the server and then use JavaScript at the client side to manipulate it.

- Microsoft then introduced XMLHttpRequest object in IE5 and used it extensively in OWA and MS Exchange 2000.

3. Advantages

- User Experience
- Bandwidth Usage
- Separation of Data, format, style and function

4. Disadvantages

- Browser Integration
The dynamically created page does not register itself with the browser history engine, so triggering the "Back" function of the users' browser might not bring the desired result.
Another issue is that dynamic web page updates make it difficult for a user to bookmark a particular state of the application.

- Response Time
Network Latency or the interval between user request and server response - needs to be considered carefully during Ajax development. ASP.Net Ajax has UpdateProgress to counter this concern.

- Dependency on Javascript
Ajax relies on JavaScript, which may be implemented differently by different browsers or versions of a particular browser.

5. A quick view of XMLHttpRequest

- http://blogs.msdn.com/sanjeets/archive/2007/04/11/xmlhttp-step-1.aspx
- http://blogs.msdn.com/sanjeets/archive/2007/04/13/xmlhttp-step-2.aspx

6. Ajax Toolkit and CTP

- You need important AJAX Downloads to get started. It contains the AJAX Toolkit and Community Technology Preview controls.

- The AJAX Extensions provides you with all the necessary controls like UpdatePanel, UpdateProgress, ScriptManager etc. It also provides you with an ASP.Net AJAX Enabled Website template. It is installed in your Visual Studio 2005. So, all you need to do is to select this template and then rock and roll.

- The AJAX Toolkit is a set of controls that greatly enhance the UI and provides easy to use functionality.

- The CTP tools provide you an some original and extender controls. This is actually created and supported by the ASP.Net AJAX community.

- See the ASP.Net AJAX videos to do simple things simply

7. Asynchronous communication Layer

- The MS ASP.Net AJAX Asynchronous Communication Layer enables a browser to call a Web Service method on the server using Javascript.

- It exposes APIs that Javascript functions can use in any browser to call Webservice.

- It can invoke ASP.Net page methods.

- It supports a variety of serialization formats like JSON(Javascript Object Notation), string, and XML.

- Generates JavaScript proxies at the client so that methods can be accessed using XMLHttp.

- It provides a default XMLHttpExecutor class that functions as an interface between a client web request and the network.

- The ASP.Net AJAX Client Asynchronous Communication Layer looks like following. It uses JSON for data exchange by default. Its preferred over SOAP/XML because of it doesn't need to use extensive Javascript to construct requests.

- The proxies are created at the client end. This facilitates XMLHttpRequest object to send requests.

- The Server Asynchronous Communication Layer looks like following. The Http Handler performs deserialization of JSON/XML request and hands it over to Business classes.

8. ScriptManager

- This guy needs special introduction as it sits on each of your AJAX enabled page.

- By default, the ScriptManager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

- It enables Client-script functionality of the Microsoft AJAX Library, and any custom script that you want to send to the browser.

- Partial-page rendering, which enables regions on the page to be independently refreshed without a postback. The UpdatePanel, UpdateProgress and Time controls need it.

- JavaScript proxy classes for Web services, which enable you to use client script to access Web services by exposing Web services as strongly typed objects.

9. Resources
- http://en.wikipedia.org/wiki/AJAX
- http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/aboutxmlhttp.asp