jQuery and ASP.NET AJAX UpdatePanel

Introduction

jQuery being common and mostly used these days, usually we come across scenario in which we have to use jQuery for those HTML elements that are placed under the ASP.NET AJAX UpdatePanel. This works fine unless partial postback is done, but in case of postback, we loose the style or behavior of these html elements. This article describes different ways of solving this problem.

Solution - jQuery with UpdatePanel

To explain the solution of above problem, I have taken a simple example of placing GridView that has paging enabled and have placed it inside UpdatePanel and I am trying to click different pages of the GridView to do partial postback and get that page records.

My aspx page code looks like below:

form id="form1" runat="server">
    <asp:ScriptManager ID="SM1" runat="server" EnablePartialRendering="true" />
    <div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="Server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="Server" AllowPaging="true" OnPageIndexChanging="ChangePage">asp:GridView> 
        ContentTemplate>
    asp:UpdatePanel>
    div>
form>

I am populating above GridView using following code.

string connStr = ConfigurationManager.AppSettings["ArtSQLConnStr"].ToString();

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
    BindGridViewArticels();
    }
}
private void BindGridViewArticels()
{
    DataTable dTable = new DataTable();
    using (SqlConnection conn = new SqlConnection(connStr))
    {
        using (SqlDataAdapter dAd = new SqlDataAdapter("select AutoId, Title from myarticles", conn))

       {
            // now open the connection
            conn.Open();
            dAd.Fill(dTable);
            conn.Close(); // close the connection
        }
    }
    GridView1.DataSource = dTable;
    GridView1.DataBind();

}
protected void ChangePage(object sender, GridViewPageEventArgs e)
{
   GridView1.PageIndex = e.NewPageIndex;
   BindGridViewArticels();

}

In the above code snippet, I first I am populating GridView for the first time when page is loading by checking page IsPostBack property. In the subsequent click of the page links, I am calling ChangePage method that is attached with OnPageIndexChanging event of the GridView that is doing paging.

As displayed in the above picture, the alternate rows of the GridView has different color that I have not done through GridView alternate rows style but I have written following code in jQuery to do that.

Code snippet - 1

 <script language="javascript">
    $(document).ready(function()
    {
        //for table row
        $("tr:even").css("background-color", "#F4F4F8");
    });
script>

Above code works great when the page is loaded for the first time but when I click any of the paging links (that partially postback the page to get that page data), as the GridView is kept inside UpdatePanel so partial postback happens and subsequent pages records doesn't display with alternate background color as jQuery style is not not applied for those records. To solve this problem, we can replace above code (Code snippet = 1) with below code (Code snippet - 2).

Code snippet - 2

    <script language="javascript">
        $(document).ready(function()
        {
            $("tr:even").css("background-color", "#F4F4F8");
        });

        function pageLoad(sender, args)
        {
            if(args.get_isPartialLoad())
            {
                $("tr:even").css("background-color", "#F4F4F8");
            } 
        }
    script>

In the above code snippet you can see that I have added one more function called pageLoad that fires on every page load of the page either first or partial or full postback. As our specific problem is related with partial postback when paging links are clicked, so in pageLoad function, I am checking for isPartialLoad and writing the same code that we are using to change the background color of the alternate rows.

Following are some more ways to achieve the same thing.

Code snippet - 2 can be completely replaced by following code to achieve the same thing.

Code snippet - 3 - Alternative 1

<script language="javascript">
function pageLoad(sender, args)
{
   $("tr:even").css("background-color", "#F4F4F8");
}
script>

Here, we are applying alternate rows background color on every pageLoad so either this is first time, full or partial postback, alternate rows background color will be applied through this jQuery code.

Code Snippet - 4 - Alternative 2

Code snippet - 2 can also be completely replaced by following code to achieve the same thing.

<script language="javascript">
Sys.Application.add_load(FirejQuery);
function FirejQuery()
{
    $("tr:even").css("background-color", "#F4F4F8");
}
script>

Here, I am adding a function on every load of the page either first time or partial or full postback and in that function I am specifying alternate rows background color to achieve the same thing that we were doing in Code Snippet - 2.

Conclusion

In this article, we learnt 3 ways to preserve the style/behavior of jQuery for the HTML elements placed inside ASP.NET AJAX UpdatePanel. Hope you find this article interesting, please subscribe for the subsequent article alert directly in your email box.

Happy coding !