Saving Bandwidth Using UpdatePanel Triggers

Most of the web applications that we build today are Ajaxified. An Ajaxed web page results in better user experience with partial-page updates that refreshes only the parts of the web page. Ajax was invented by Microsoft when they included XMLHttpRequest object in Internet Explorer 4, which is now available in most of the web browsers. The XMLHttpRequest object allowed developers to make Http GET and POST requests without submitting the whole web page. However to build an Ajax-enabled web site, developer needed to have in-depth knowledge of Javascript. As Ajax matured a number of frameworks have been developed that make Ajaxifying a web page very easy e.g., JQuery, Prototype, MooTools, etc. Microsoft has also provided one such tool for ASP.net developers, which is known as Microsoft ASP.Net Ajax.

Using Microsoft ASP.Net Ajax we can perform the partial-page updates without writing any code. Any web page that contains a ScriptManager and one or more UpdatePanel control can do asynchronous postbacks. UpdatePanel acts as a container control and when a control within the same triggers an asynchronous postback only the contents within the UpdatePanel are refreshed, which avoids the flicker. Asynchronous postbacks in ASP.Net Ajax behave like the regular postbacks, however the updates are limited to the parts of the web page that are enclosed in the UpdatePanel.

By default whenever any asynchronous postback is triggered within the page all the UpdatePanels are refreshed. This doesn't seem to be a problem at first but this is quite expensive in terms of server capacity. When an asynchronous postback is done, to maintain the state of all the controls the entire view state is submitted to the server. After server executes the page the data of entire view state is processed and passed back to the UpdatePanel. In most cases the view state data of all the UpdatePanels controls does not change with every asynchronous postback. If we can avoid moving the view state data of all the UpdatePanels from server to client, we will save significant amounts of bandwidth. This can be achieved using UpdatePanel Triggers.

Let's create a sample ASP.net application to illustrate the use of UpdatePanel Triggers to save the bandwidth.

Open the SQL Server Management Studio and create a new Contacts database. Add the Contact and Address table to the database having the below structure.

Contact Table

Address Table

Address_ID field in the Contact table is a Foreign Key that references the ID field of the Address table. Now add some sample data to these two tables and close the SQL Server Management Studio.

Open the Visual Studio 2008 and create a new HTTP type web site, name it as ContactManager.

Add the below controls to the Default.aspx web form that is added by default to the web site.

Control ID
ScriptManager ContactsScriptManager
Textbox FirstNameTextBox
TextBox LastNameTextBox
Button FindButton
UpdatePanel ContactUpdatePanel
GridView ContactsGridView
UpdatePanel AddressUpdatePanel
DetailsView AddressDetailsView

ContactsGridView and AddressDetailsView should be placed within the ContactUpdatePanel and AddressUpdatePanel respectively. Add columns to the ContactsGridView and AddressDetailsView using the Smart Tags; columns should correspond to the columns in the Contact and Address tables that we created above. Now the web form should look like below in the design view.

Now open the web.config file and add the below connection string.

<connectionStrings>
   <add name="ContactDB"
        connectionString="Data Source=.;Initial Catalog=Contacts;Integrated Security=SSPI;"
        providerName="System.Data.SqlClient"/>
</connectionStrings>

Now add a class file to the project and name it as DataBinder.cs. We will use this class file to bind the UI to the database. We can use the built-in controls to do that like SQLDataSource but it is not recommended to hide all the queries in a control in professional/enterprise applications. In DataBinder.cs file create below two classes.

Contact Class

public class Contact
{
   private int _ID;

   public int ID
   {
      get { return _ID; }
      set { _ID = value; }
   }

   private string _FirstName;

   public string FirstName
   {
      get { return _FirstName; }
      set { _FirstName = value; }
   }

   private string _LastName;

   public string LastName
   {
      get { return _LastName; }
      set { _LastName = value; }
   }

   private string _Title;

   public string Title
   {
      get { return _Title; }
      set { _Title = value; }
   }

   private string _Company;

   public string Company
   {
      get { return _Company; }
      set { _Company = value; }
   }

   private string _Department;

   public string Department
   {
      get { return _Department; }
      set { _Department = value; }
   }

   private string _Mobile;

   public string Mobile
   {
      get { return _Mobile; }
      set { _Mobile = value; }
   }

   private string _Phone;

   public string Phone
   {
      get { return _Phone; }
      set { _Phone = value; }
   }

   private string _Email;

   public string Email
   {
      get { return _Email; }
      set { _Email = value; }
   }

   private int _Address_ID;

   public int Address_ID
   {
      get { return _Address_ID; }
      set { _Address_ID = value; }
   }
}

DataBinder Class

public class DataBinder
{
   DbProviderFactory DBFactory;
   DbConnection ConObject;

   public DataBinder()
   {
      DBFactory =
         DbProviderFactories.GetFactory("System.Data.SqlClient");
      ConObject = DBFactory.CreateConnection();
      ConObject.ConnectionString =
         ConfigurationManager.ConnectionStrings["ContactDB"].
         ConnectionString;
      ConObject.Open();
   }

   public DataView GetContacts(string firstname, string lastname)
   {
      DataView returnObj;
      using (DbCommand com = DBFactory.CreateCommand())
      {
         com.CommandText = "SELECT * FROM [Contact]
            WHERE UPPER([FirstName]) LIKE @FirstName
            AND UPPER([LastName]) LIKE @LastName";
         com.Connection = ConObject;

         DbParameter firstnameParameter = DBFactory.CreateParameter();
         firstnameParameter.ParameterName = "@FirstName";
         firstnameParameter.Value = "%" + firstname.ToUpper() + "%";
         com.Parameters.Add(firstnameParameter);

         DbParameter lastnameParameter = DBFactory.CreateParameter();
         lastnameParameter.ParameterName = "@LastName";
         lastnameParameter.Value = "%" + lastname.ToUpper() + "%";
         com.Parameters.Add(lastnameParameter);

         DataTable tempTable = new DataTable();
         tempTable.Load(com.ExecuteReader());
         returnObj = tempTable.DefaultView;
      }
      return returnObj;
   }

   public DataView GetAddress(int id)
   {
      DataView returnObj;
      using (DbCommand com = DBFactory.CreateCommand())
      {
         com.CommandText = "SELECT * FROM [Address]
            WHERE [ID] = @ID";
         com.Connection = ConObject;

         style='color:#2B91AF'>DbParameter idParameter =
            DBFactory.CreateParameter();
         idParameter.ParameterName = "@ID";
         idParameter.DbType = DbType.Int32;
         idParameter.Value = id;
         Parameters.Add(idParameter);

         DataTable tempTable = new DataTable();
         tempTable.Load(com.ExecuteReader());
         returnObj = tempTable.DefaultView;
      }
      return returnObj;
   }

   public int UpdateContact(Contact modifiedContact)
   {
      int returnVal;
      using (DbCommand com = DBFactory.CreateCommand())
      {
         com.CommandText = "UPDATE [Contact] SET [FirstName] =
            @FirstName, [LastName] = @LastName, " +
            "[Title] = @Title, [Company] =
               @Company, [Department] = @Department, " +
            "[Mobile] = @Mobile, [Phone] = @Phone, [Email] =
               @Email, [Address_ID] = @Address_ID " +
            "WHERE [ID] = @ID";
         com.Connection = ConObject;

         DbParameter firstnameParameter = DBFactory.CreateParameter();
         firstnameParameter.ParameterName = "@FirstName";
         firstnameParameter.Value = modifiedContact.FirstName;
         com.Parameters.Add(firstnameParameter);

         DbParameter lastnameParameter = DBFactory.CreateParameter();
         lastnameParameter.ParameterName = "@LastName";
         lastnameParameter.Value = modifiedContact.LastName;
         com.Parameters.Add(lastnameParameter);

         DbParameter titleParameter = DBFactory.CreateParameter();
         titleParameter.ParameterName = "@Title";
         titleParameter.Value = modifiedContact.Title;
         com.Parameters.Add(titleParameter);

         DbParameter companyParameter = DBFactory.CreateParameter();
         companyParameter.ParameterName = "@Company";
         companyParameter.Value = modifiedContact.Company;
         com.Parameters.Add(companyParameter);

         DbParameter departmentParameter = DBFactory.CreateParameter();
         departmentParameter.ParameterName = "@Department";
         departmentParameter.Value = modifiedContact.Department;
         com.Parameters.Add(departmentParameter);

         DbParameter mobileParameter = DBFactory.CreateParameter();
         mobileParameter.ParameterName = "@Mobile";
         mobileParameter.Value = modifiedContact.Mobile;
         com.Parameters.Add(mobileParameter);

         DbParameter phoneParameter = DBFactory.CreateParameter();
         phoneParameter.ParameterName = "@Phone";
         phoneParameter.Value = modifiedContact.Phone;
         com.Parameters.Add(phoneParameter);

         DbParameter emailParameter = DBFactory.CreateParameter();
         emailParameter.ParameterName = "@Email";
         emailParameter.Value = modifiedContact.Email;
         com.Parameters.Add(emailParameter);

         DbParameter addressIDParameter = DBFactory.CreateParameter();
         addressIDParameter.ParameterName = "@Address_ID";
         addressIDParameter.DbType = DbType.Int32;
         addressIDParameter.Value = modifiedContact.Address_ID;
         com.Parameters.Add(addressIDParameter);

         DbParameter idParameter = DBFactory.CreateParameter();
         idParameter.ParameterName = "@ID";
         idParameter.DbType = DbType.Int32;
         idParameter.Value = modifiedContact.ID;
         com.Parameters.Add(idParameter);

         returnVal = com.ExecuteNonQuery();
      }
      return returnVal;
   }
}

Saving Bandwidth Using UpdatePanel Triggers

We have written in-line queries in the DataBinder class to save time but you may like to use the stored procedures instead. Now open the Default.aspx.cs file, which is the code behind file of Default.aspx and add the below code to it.

public partial class _Default : System.Web.UI.Page
{
   DataBinder DBObject = new DataBinder();

   protected void FindButton_Click(object sender, EventArgs e)
   {
      BindContactsGridView(string.Empty);
   }

   protected void ContactsGridView_Sorting(object sender,
      GridViewSortEventArgs e)
   {
      BindContactsGridView(e.SortExpression);
      ReBindAddressDetailsView();
   }

   protected void ContactsGridView_PageIndexChanging(object sender,
      GridViewPageEventArgs e)
   {
      ContactsGridView.PageIndex = e.NewPageIndex;
      BindContactsGridView(string.Empty);
      ReBindAddressDetailsView();
   }

   protected void ContactsGridView_SelectedIndexChanging(object sender,
      GridViewSelectEventArgs e)
   {
      BindAddressDetailsView((int)ContactsGridView.DataKeys
         [e.NewSelectedIndex]["Address_ID"]);
   }

   protected void ContactsGridView_RowEditing(object sender,
      GridViewEditEventArgs e)
   {
      ContactsGridView.EditIndex = e.NewEditIndex;
      BindContactsGridView(string.Empty);
   }

   protected void ContactsGridView_RowCancelingEdit(object sender,
      GridViewCancelEditEventArgs e)
   {
      ContactsGridView.EditIndex = -1;
      BindContactsGridView(string.Empty);
   }

   protected void ContactsGridView_RowUpdating(object sender,
      GridViewUpdateEventArgs e)
   {
      Contact contactDTO = new Contact();
      contactDTO.ID = (int)ContactsGridView.DataKeys[e.RowIndex]["ID"];
      contactDTO.FirstName = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("FirstNameTextBox")).Text;
      contactDTO.LastName = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("LastNameTextBox")).Text;
      contactDTO.Title = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("TitleTextBox")).Text;
      contactDTO.Company = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("CompanyTextBox")).Text;
      contactDTO.Department = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("DepartmentTextBox")).Text;
      contactDTO.Mobile = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("MobileTextBox")).Text;
      contactDTO.Phone = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("PhoneTextBox")).Text;
      contactDTO.Email = ((TextBox)ContactsGridView.Rows[e.RowIndex].
         FindControl("EmailTextBox")).Text;
      contactDTO.Address_ID =
         (int)ContactsGridView.DataKeys[e.RowIndex]["Address_ID"];

      DBObject.UpdateContact(contactDTO);
      ContactsGridView.EditIndex = -1;
      BindContactsGridView(string.Empty);
   }

   private void BindContactsGridView(string sortExp)
   {
      DataView contactsDataView =
         DBObject.GetContacts(FirstNameTextBox.Text.Trim(),
         LastNameTextBox.Text.Trim());

      string sortString = GetSortExpressionAndDirection(sortExp);
      if (!string.IsNullOrEmpty(sortString))
      {
         contactsDataView.Sort = sortString;
      }

      ContactsGridView.DataSource = contactsDataView;
      ContactsGridView.DataKeyNames =
         new string[] { "ID", "Address_ID" };
      ContactsGridView.DataBind();
   }

   private string GetSortExpressionAndDirection(string sortExp)
   {
      if (string.IsNullOrEmpty(sortExp))
      {
         if (ViewState["SortExpression"] == null)
         {
            return "";
         }
         else
         {
            return (string)ViewState["SortExpression"] + " " +
               GetSortDirection(false);
         }
      }
      else
      {
         if (ViewState["SortExpression"] == null)
         {
            ViewState["SortExpression"] = sortExp;
            return sortExp + " " + GetSortDirection(false);
         }
         else
         {
            if ((string)ViewState["SortExpression"] == sortExp)
            {
               return sortExp + " " + GetSortDirection(true);
            }
            else
            {
               ViewState["SortExpression"] = sortExp;
               return sortExp + " " + GetSortDirection(false);
            }
         }
      }
   }

   private string GetSortDirection(bool toggle)
   {
      if (toggle == false)
      {
         if (ViewState["SortDirection"] == null)
         {
            ViewState["SortDirection"] = "ASC";
            return "ASC";
         }
         else
         {
            return (string)ViewState["SortDirection"];
         }
      }
      else
      {
         if (ViewState["SortDirection"] == null)
         {
            ViewState["SortDirection"] = "ASC";
            return "ASC";
         }
         else if ((string)ViewState["SortDirection"] == "ASC")
         {
            "SortDirection"] = "DESC";
            return "DESC";
         }
         else
         {
            ViewState["SortDirection"] = "ASC";
            return "ASC";
         }
      }
   }

   private void BindAddressDetailsView(int id)
   {
      DataView addressDataView = DBObject.GetAddress(id);

      AddressDetailsView.DataSource = addressDataView;
      AddressDetailsView.DataBind();
   }

   private void ReBindAddressDetailsView()
   {
      if (ContactsGridView.SelectedIndex != -1)
      {
         try
         {
            BindAddressDetailsView((int)ContactsGridView.
               DataKeys[ContactsGridView.SelectedIndex]["Address_ID"]);
         }
         catch (ArgumentOutOfRangeException ex)
         {
            AddressDetailsView.DataBind();
         }
      }
   }

Saving Bandwidth Using UpdatePanel Triggers

Now our application should be up and running. Press F5 key and the default page of Contacts Manager will be displayed in the default browser. Type 's' in the First Name text box and click on the Find button. You will see the screen as below.

[Bandwidth04.jpg]

Click on the Select Link Button of the first row and the address details will be shown in the DetailsView as below.

[Bandwidth05.jpg]

Open the HttpAnalyser and look at the Response Headers and Response Content. You will see that 8684 bytes have been transferred back from server to client.

[Bandwidth06.jpg]

Below is the Response Content.

5509|updatePanel|ContactUpdatePanel|
   <div>
   <table cellspacing="0"
    cellpadding="4"
    rules="cols"
    border="1"
    id="ContactsGridView" style="color:Black;
       background-color:White;
       border-color:#DEDFDE;
       border-width:1px;
       border-style:None;
       width:900px;
       border-collapse:collapse;">
      <tr style="color:White;background-color:#6B696B;font-weight:bold;">
         <th scope="col">
            <a href="javascript:__doPostBack('ContactsGridView','Sort$FirstName')"
             style="color:White;">First Name</a></th>
         <th scope="col">
            <a href="javascript:__doPostBack('ContactsGridView','Sort$LastName')"
             style="color:White;">Last Name</a></th>
         <th scope="col">Title</th><th scope="col">Company</th>
         <th scope="col">Department</th>
         <th scope="col">Mobile</th>
         <th scope="col">Phone</th>
         <th scope="col">Email</th>
         <th scope="col">&nbsp;</th>
         <th scope="col">&nbsp;</th>

      </tr>
      <tr style="color:Black;background-color:#FFFFCC;">
         <td>
            <span id="ContactsGridView_ctl02_Label1">UmaMahesh</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label2">Deen</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label3">Manager</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label5">IT</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label6">9898989898          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label7">9898989898          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label8">UmaMahesh@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$0')"
               style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl02_EditButton"
               href="javascript:__doPostBack
              ('ContactsGridView$ctl02$EditButton','')">Edit</a>
         </td>
      </tr>
      <tr style="background-color:White;">
         <td>
            <span id="ContactsGridView_ctl03_Label1">Rakesh</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label2">Munglo</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label3">Sales Executive</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label5">SALES</span>
         </td>
         <td>
         <span id="ContactsGridView_ctl03_Label6">9797979797          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label7">9797979797          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label8">Rakesh@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$1')"
               style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl03_EditButton"
               href="javascript:__doPostBack('ContactsGridView$ctl03$EditButton','')">Edit</a>
         </td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>
            <span id="ContactsGridView_ctl04_Label1">Sarika</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label2">Vemu</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label3">Co-ordinator</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label5">Training</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label6">9696969696          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label7">9696969696          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label8">Sarika@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$2')"
               style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl04_EditButton"
               href="javascript:__doPostBack('ContactsGridView$ctl04$EditButton','')">Edit</a>
         </td>
      </tr>
</table>
</div>

|1017|updatePanel|AddressUpdatePanel|
   <div>
   <table cellspacing="0"
          cellpadding="4"
          rules="cols"
          border="1"
          id="AddressDetailsView"
             style="color:Black;background-color:White;
             border-color:#DEDFDE;
             border-width:1px;
             border-style:None;
             height:50px;
             width:600px;
             border-collapse:collapse;">
      <tr style="color:White;background-color:#6B696B;font-weight:bold;">
         <td colspan="2">
            Location Details
         </td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>Address</td>
         <td style="width:300px;">Dachen Kyen</td>
      </tr>
      <tr style="background-color:White;">
         <td>Address2</td>
         <td>Kadlas Tale</td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>City</td>
         <td>Paris</td>
      </tr>
      <tr style="background-color:White;">
         <td>State</td>
         <td>Paris Region</td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>Country</td>
         <td>France</td>
      </tr>
      <tr style="background-color:White;">
      <td>Zip</td>
      <td>10001</td>
   </tr>
</table>
</div>

|0|hiddenField|__EVENTTARGET|
|0|hiddenField|__EVENTARGUMENT|
|1568|hiddenField|__VIEWSTATE|/wEPDwUKMjAzMDgzNDE0Nw9kFgICAw9kFgQCCQ9kFgJmD2QWAgIBDzwr
   AA0CAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIDZAoWABYCZg9kFgoCAQ9kFhBmD2QWAgIBDw8WAh
   4EVGV4dAUJVW1hTWFoZXNoZGQCAQ9kFgICAQ8PFgIfAgUERGVlbmRkAgIPZBYCAgEPDxYCHwIFB01hbm
   FnZXJkZAIDD2QWAgIBDw8WAh8CBQNBQkNkZAIED2QWAgIBDw8WAh8CBQJJVGRkAgUPZBYCAgEPDxYCHw
   IFFDk4OTg5ODk4OTkgICAgICAgICAgZGQCBg9kFgICAQ8PFgIfAgUUOTg5ODk4OTg5OCAgICAgICAgICBk
   ZAIHD2QWAgIBDw8WAh8CBRFVbWFNYWhlc2hAQUJDLmNvbWRkAgIPZBYQZg9kFgICAQ8PFgIfAgUGUmFrZX
   NoZGQCAQ9kFgICAQ8PFgIfAgUGTXVuZ2xvZGQCAg9kFgICAQ8PFgIfAgUPU2FsZXMgRXhlY3V0aXZlZGQC
   Aw9kFgICAQ8PFgIfAgUDQUJDZGQCBA9kFgICAQ8PFgIfAgUFU0FMRVNkZAIFD2QWAgIBDw8WAh8CBRQ5Nzk3O
   Tc5Nzk3ICAgICAgICAgIGRkAgYPZBYCAgEPDxYCHwIFFDk3OTc5Nzk3OTcgICAgICAgICAgZGQCBw9kFg
   ICAQ8PFgIfAgUOUmFrZXNoQEFCQy5jb21kZAIDD2QWEGYPZBYCAgEPDxYCHwIFBlNhcmlrYWRkAgEPZBYCAg
   EPDxYCHwIFBFZlbXVkZAICD2QWAgIBDw8WAh8CBQxDby1vcmRpbmF0b3JkZAIDD2QWAgIBDw8WAh8CBQNBQk
   NkZAIED2QWAgIBDw8WAh8CBQhUcmFpbmluZ2RkAgUPZBYCAgEPDxYCHwIFFDk2OTY5Njk2OTYgICAgICAgICAg
   ZGQCBg9kFgICAQ8PFgIfAgUUOTY5Njk2OTY5NiAgICAgICAgICBkZAIHD2QWAgIBDw8WAh8CBQ5TYXJpa2FAQUJD
   LmNvbWRkAgQPDxYCHgdWaXNpYmxlaGRkAgUPDxYCHwNoZGQCCw9kFgJmD2QWAgIBDzwrAA8BAA8WBB8AZx8BAgFk
   FgJmD2QWDgIBD2QWAgIBDw8WAh8CBQtEYWNoZW4gS3llbmRkAgIPZBYCAgEPDxYCHwIFC0thZGxhcyBUYWxlZ
   GQCAw9kFgICAQ8PFgIfAgUFUGFyaXNkZAIED2QWAgIBDw8WAh8CBQxQYXJpcyBSZWdpb25kZAIFD2QWAgIBDw8
   WAh8CBQZGcmFuY2VkZAIGD2QWAgIBDw8WAh8CBQYxMDAwMSBkZAIHDw8WAh8DaGRkGAIFEkFkZHJlc3NEZXRha
   WxzVmlldw8UKwAHZGRkZGQWAAIBZAUQQ29udGFjdHNHcmlkVmlldw8UKwAKZGRkZmRkFQICSUQKQWRkcmVzc19
   JRBQrAAMUKwACAgECARQrAAICAgICFCsAAgIDAgMCARQrAAICAQIBZMZvqWLw4HW1vwav7mL+ureqeiba
|128|hiddenField|__EVENTVALIDATION|/wEWDAKa98+tDQLbq9PnBAKH34u7CwKq+p25BAL9j5Z4Aqr6id
   QMAvqP6ucHAqr6teMGAvuPzr0HAsrY5ocJAoLCqJ4JAoTVhPQKj7rqDJLujb6mFfjJc2JDp8B4XyE=
   |16|asyncPostBackControlIDs||ContactsGridView|0|postBackControlIDs|||39|updatePanelIDs||
   tContactUpdatePanel,tAddressUpdatePanel|0|childUpdatePanelIDs|||37|panelsToRefreshIDs||
   ContactUpdatePanel,AddressUpdatePanel|2|asyncPostBackTimeout||90|12|formAction||
   Default.aspx|

Saving Bandwidth Using UpdatePanel Triggers

Now click on the Edit button of the first row. Change the Mobile number and click on Update Button to save the change. In the HttpAnalyser you will see 8688 bytes have been transferred back from server to client.

[Bandwidth07.jpg]

Below is the Response Content.

5509|updatePanel|ContactUpdatePanel|
   <div>
   <table cellspacing="0"
          cellpadding="4"
          rules="cols"
          border="1"
          id="ContactsGridView"
            style="color:Black;
            background-color:White;
            border-color:#DEDFDE;
            border-width:1px;
            border-style:None;
            width:900px;
            border-collapse:collapse;">
      <tr style="color:White;background-color:#6B696B;font-weight:bold;">
         <th scope="col">
            <a href="javascript:__doPostBack('ContactsGridView','Sort$FirstName')"
               style="color:White;">First Name</a>
         </th>
         <th scope="col">
            <a href="javascript:__doPostBack('ContactsGridView','Sort$LastName')"
               style="color:White;">Last Name</a>
         </th>
         <th scope="col">Title</th>
         <th scope="col">Company</th>
         <th scope="col">Department</th>
         <th scope="col">Mobile</th>
         <th scope="col">Phone</th>
         <th scope="col">Email</th>
         <th scope="col">&nbsp;</th>
         <th scope="col">&nbsp;</th>
      </tr>
      <tr style="color:Black;background-color:#FFFFCC;">
         <td>
            <span id="ContactsGridView_ctl02_Label1">UmaMahesh</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label2">Deen</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label3">Manager</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label5">IT</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label6">9898989899          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label7">9898989898          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label8">UmaMahesh@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$0')"
               style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl02_EditButton"
                href="javascript:__doPostBack
                   ('ContactsGridView$ctl02$EditButton','')">Edit</a>
         </td>
      </tr>
      <tr style="background-color:White;">
         <td>
            <span id="ContactsGridView_ctl03_Label1">Rakesh</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label2">Munglo</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label3">Sales Executive</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label5">SALES</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label6">9797979797          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label7">9797979797          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label8">Rakesh@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$1')"
               style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl03_EditButton"
               href="javascript:__doPostBack('ContactsGridView$ctl03$EditButton','')">Edit</a>
         </td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>
            <span id="ContactsGridView_ctl04_Label1">Sarika</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label2">Vemu</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label3">Co-ordinator</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label5">Training</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label6">9696969696          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label7">9696969696          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label8">Sarika@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$2')"
               style="color:Black;">Select</a>
         </td>
         <td>
         <a id="ContactsGridView_ctl04_EditButton"
                href="javascript:__doPostBack('ContactsGridView$ctl04$EditButton','')">Edit</a>
         </td>
      </tr>
   </table>
   </div>

|1017|updatePanel|AddressUpdatePanel|
   <div>
   <table cellspacing="0"
          cellpadding="4"
          rules="cols"
          border="1"
          id="AddressDetailsView" style="color:Black;
             background-color:White;
             border-color:#DEDFDE;
             border-width:1px;
             border-style:None;
             height:50px;
             width:600px;
             border-collapse:collapse;">
      <tr style="color:White;background-color:#6B696B;font-weight:bold;">
         <td colspan="2">
            Location Details
         </td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>Address</td>
         <td style="width:300px;">Dachen Kyen</td>
      </tr>
      <tr style="background-color:White;">
         <td>Address2</td>
         <td>Kadlas Tale</td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>City</td>
         <td>Paris</td>
      </tr>
      <tr style="background-color:White;">
         <td>State</td>
         <td>Paris Region</td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>Country</td>
         <td>France</td>
      </tr>
      <tr style="background-color:White;">
         <td>Zip</td>
         <td>10001 </td>
      </tr>
   </table>
   </div>

|0|hiddenField|__EVENTTARGET|
|0|hiddenField|__EVENTARGUMENT|
|1568|hiddenField|__VIEWSTATE|/wEPDwUKMjAzMDgzNDE0Nw9kFgICAw9kFgQCCQ9kFgJmD2QWAg
   IBDzwrAA0CAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIDZAoWABYCZg9kFgoCAQ9k
   FhBmD2QWAgIBDw8WAh4EVGV4dAUJVW1hTWFoZXNoZGQCAQ9kFgICAQ8PFgIfAgUERGVlbmRkAgIPZB
   YCAgEPDxYCHwIFB01hbmFnZXJkZAIDD2QWAgIBDw8WAh8CBQNBQkNkZAIED2QWAgIBDw8WAh8CBQJJ
   VGRkAgUPZBYCAgEPDxYCHwIFFDk4OTg5ODk4OTkgICAgICAgICAgZGQCBg9kFgICAQ8PFgIfAgUUO
   Tg5ODk4OTg5OCAgICAgICAgICBkZAIHD2QWAgIBDw8WAh8CBRFVbWFNYWhlc2hAQUJDLmNvbWRkAgIP
   ZBYQZg9kFgICAQ8PFgIfAgUGUmFrZXNoZGQCAQ9kFgICAQ8PFgIfAgUGTXVuZ2xvZGQCAg9kFgICAQ8
   PFgIfAgUPU2FsZXMgRXhlY3V0aXZlZGQCAw9kFgICAQ8PFgIfAgUDQUJDZGQCBA9kFgICAQ8PFgIfAgU
   FU0FMRVNkZAIFD2QWAgIBDw8WAh8CBRQ5Nzk3OTc5Nzk3ICAgICAgICAgIGRkAgYPZBYCAgEPDxYCHw
   IFFDk3OTc5Nzk3OTcgICAgICAgICAgZGQCBw9kFgICAQ8PFgIfAgUOUmFrZXNoQEFCQy5jb21kZAIDD2
   QWEGYPZBYCAgEPDxYCHwIFBlNhcmlrYWRkAgEPZBYCAgEPDxYCHwIFBFZlbXVkZAICD2QWAgIBDw8WAh8
   CBQxDby1vcmRpbmF0b3JkZAIDD2QWAgIBDw8WAh8CBQNBQkNkZAIED2QWAgIBDw8WAh8CBQhUcmFpbmlu
   Z2RkAgUPZBYCAgEPDxYCHwIFFDk2OTY5Njk2OTYgICAgICAgICAgZGQCBg9kFgICAQ8PFgIfAgUUOTY5
   Njk2OTY5NiAgICAgICAgICBkZAIHD2QWAgIBDw8WAh8CBQ5TYXJpa2FAQUJDLmNvbWRkAgQPDxYCHgd
   WaXNpYmxlaGRkAgUPDxYCHwNoZGQCCw9kFgJmD2QWAgIBDzwrAA8BAA8WBB8AZx8BAgFkFgJmD2QWDgI
   BD2QWAgIBDw8WAh8CBQtEYWNoZW4gS3llbmRkAgIPZBYCAgEPDxYCHwIFC0thZGxhcyBUYWxlZGQCAw9k
   FgICAQ8PFgIfAgUFUGFyaXNkZAIED2QWAgIBDw8WAh8CBQxQYXJpcyBSZWdpb25kZAIFD2QWAgIBDw8
   WAh8CBQZGcmFuY2VkZAIGD2QWAgIBDw8WAh8CBQYxMDAwMSBkZAIHDw8WAh8DaGRkGAIFEkFkZHJlc
   3NEZXRhaWxzVmlldw8UKwAHZGRkZGQWAAIBZAUQQ29udGFjdHNHcmlkVmlldw8UKwAKZGRkZmRkFQIC
   SUQKQWRkcmVzc19JRBQrAAMUKwACAgECARQrAAICAgICFCsAAgIDAgMCARQrAAICAQIBZMZvqWLw4
   HW1vwav7mL+ureqeiba
|128|hiddenField|__EVENTVALIDATION|/wEWDAKa98+tDQLbq9PnBAKH34u7CwKq+p25BAL9j5Z4
   Aqr6idQMAvqP6ucHAqr6teMGAvuPzr0HAsrY5ocJAoLCqJ4JAoTVhPQKj7rqDJLujb6mFfjJc2JDp8
   B4XyE=|16|asyncPostBackControlIDs||ContactsGridView|0|postBackControlIDs|
||39|updatePanelIDs||tContactUpdatePanel,tAddressUpdatePanel|0|childUpdatePanelIDs|
||37|panelsToRefreshIDs||ContactUpdatePanel,AddressUpdatePanel|2|asyncPostBackTimeout|
|90|12|formAction||Default.aspx|

Saving Bandwidth Using UpdatePanel Triggers

If you have observed the response content above, in both the cases when you click on Select and Edit/Update button of ContactsGridView, server sends back the content of both ContactsGridView and AddressDetailsView. This is not something that we really want. When we click the Select button on ContactsGridView, there is actually nothing changing on the ContactsGridView. All we need to do is update is the AddressDetailsView. Similarly when we are clicking the Edit/Update button on ContactsGridView there is nothing changing in the AddressDetailsView, we just have to update the ContactsGridView.

As mentioned above all the UpdatePanels are refreshed when an asynchronous postback call is triggered on a web page. To change this default behavior we can use the UpdatePanel Triggers. Select the ContactUpdatePanel and open the properties window. Change the properties of the ContactUpdatePanel in the properties window as shown below.

Property Value
ChildrenAsTriggers False
UpdateMode Conditional

Changing the value of UpdateMode to Conditional indicates that UpdatePanel should not be refreshed every time when an asynchronous postback is triggered from the web page. ChildrenAsTriggers property value as False indicates that postbacks coming from the UpdatePanel's child controls should not cause the UpdatePanel to refresh. If we leave the setting as such and run the application, you will see that UpdatePanel never gets refreshed. Even if you change the data in the ContactsGridView the changes will not get reflected after you click on the Update button. This happens because we haven't specified when the UpdatePanel should be refreshed. Now open the properties window of ContactUpdatePanel again and click on the ellipse against the Triggers property. UpdatePanelTriggers Collection Editor opens. Add the five triggers for the ContactUpdatePanel and set the ControlID and EventName as below.

Member ControlID EventName
0 ContactsGridView Sorting
1 ContactsGridView PageIndexChanging
2 ContactsGridView RowEditing
3 ContactsGridView RowUpdating
4 ContactsGridView RowCancelingEdit

The Triggers in the collection indicate that UpdatePanel should get refreshed when asynchronous postback is triggered as a result of above events.

Now open the properties window of AddressUpdatePanel and change the UpdateMode property to Conditional. Add the three triggers and set the ControlID and EventName as below.

Member ControlID EventName
0 ContactsGridView SelectedIndexChanging
1 ContactsGridView PageIndexChanging
2 ContactsGridView Sorting

What we have done above is that we have disabled the default behavior of UpdatePanel's to get refreshed every time an asynchronous postback is triggered. ContactUpdatePanel will not get refreshed when change the selected row because we only want the AddressUpdatePanel to get refreshed in that case. Similarly on Edit/Update of ContactsGridView we enabled the refreshing of only the ContactUpdatePanel and not the AddressUpdatePanel, because AddressDetailsView is not changing when the contact details get updated.

Now press the F5 key to run the application again.

Type 's' in the First Name text box and click on the Find button. You will see the same result on screen as we saw earlier before enabling the UpdatePanel Triggers.

Click on the Select Link Button of the first row and the address details will be shown in the DetailsView, again the result in same as we saw in earlier run. Open the HttpAnalyser and see the Response Headers and Response Content. You will see this time server has transferred only 3119 bytes back to the client instead of 8684 bytes.

[Bandwidth08.jpg]

In the Response Content below, you will see that it includes the data of only AddressDetailsView. It doesn't include any data of ContactsGridView, which is what we actually want. This saves a large amount of bandwidth especially when there is lot of content displayed in the UpdatePanel.

1017|updatePanel|AddressUpdatePanel|
   <div>
   <table cellspacing="0"
          cellpadding="4"
           rules="cols"
           border="1"
           id="AddressDetailsView" style="color:Black;
              background-color:White;
              border-color:#DEDFDE;
              border-width:1px;
              border-style:None;
              height:50px;
              width:600px;
              border-collapse:collapse;">
      <tr style="color:White;background-color:#6B696B;font-weight:bold;">
         <td colspan="2">
            Location Details
         </td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>Address</td>
         <td style="width:300px;">Dachen Kyen</td>
      </tr>
      <tr style="background-color:White;">
         <td>Address2</td>
         <td>Kadlas Tale</td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>City</td>
         <td>Paris</td>
      </tr>
      <tr style="background-color:White;">
         <td>State</td>
         <td>Paris Region</td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>Country</td>
         <td>France</td>
      </tr>
      <tr style="background-color:White;">
         <td>Zip</td>
         <td>10001</td>
      </tr>
   </table>
   </div>

|0|hiddenField|__EVENTTARGET|
|0|hiddenField|__EVENTARGUMENT|
|1564|hiddenField|__VIEWSTATE|/wEPDwUKMjAzMDgzNDE0Nw9kFgICAw9kFgQCCQ9kFgJmD2Q
   WAgIBDzwrAA0BAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3VudAIDZBYCZg9kFgoCAQ9k
   FhBmD2QWAgIBDw8WAh4EVGV4dAUJVW1hTWFoZXNoZGQCAQ9kFgICAQ8PFgIfAgUERGVlbmRkAg
   IPZBYCAgEPDxYCHwIFB01hbmFnZXJkZAIDD2QWAgIBDw8WAh8CBQNBQkNkZAIED2QWAgIBDw8
   WAh8CBQJJVGRkAgUPZBYCAgEPDxYCHwIFFDk4OTg5ODk4OTkgICAgICAgICAgZGQCBg9kFgIC
   AQ8PFgIfAgUUOTg5ODk4OTg5OCAgICAgICAgICBkZAIHD2QWAgIBDw8WAh8CBRFVbWFNYWhlc2h
   AQUJDLmNvbWRkAgIPZBYQZg9kFgICAQ8PFgIfAgUGUmFrZXNoZGQCAQ9kFgICAQ8PFgIfAgUGT
   XVuZ2xvZGQCAg9kFgICAQ8PFgIfAgUPU2FsZXMgRXhlY3V0aXZlZGQCAw9kFgICAQ8PFgIfAgUD
   QUJDZGQCBA9kFgICAQ8PFgIfAgUFU0FMRVNkZAIFD2QWAgIBDw8WAh8CBRQ5Nzk3OTc5Nzk3ICAg
   ICAgICAgIGRkAgYPZBYCAgEPDxYCHwIFFDk3OTc5Nzk3OTcgICAgICAgICAgZGQCBw9kFgICAQ8
   PFgIfAgUOUmFrZXNoQEFCQy5jb21kZAIDD2QWEGYPZBYCAgEPDxYCHwIFBlNhcmlrYWRkAgEPZ
   BYCAgEPDxYCHwIFBFZlbXVkZAICD2QWAgIBDw8WAh8CBQxDby1vcmRpbmF0b3JkZAIDD2QWAg
   IBDw8WAh8CBQNBQkNkZAIED2QWAgIBDw8WAh8CBQhUcmFpbmluZ2RkAgUPZBYCAgEPDxYCHw
   IFFDk2OTY5Njk2OTYgICAgICAgICAgZGQCBg9kFgICAQ8PFgIfAgUUOTY5Njk2OTY5NiAgICAg
   ICAgICBkZAIHD2QWAgIBDw8WAh8CBQ5TYXJpa2FAQUJDLmNvbWRkAgQPDxYCHgdWaXNpYmxla
   GRkAgUPDxYCHwNoZGQCCw9kFgJmD2QWAgIBDzwrAA8BAA8WBB8AZx8BAgFkFgJmD2QWDgIBD2
   QWAgIBDw8WAh8CBQtEYWNoZW4gS3llbmRkAgIPZBYCAgEPDxYCHwIFC0thZGxhcyBUYWxlZG
   QCAw9kFgICAQ8PFgIfAgUFUGFyaXNkZAIED2QWAgIBDw8WAh8CBQxQYXJpcyBSZWdpb25kZA
   IFD2QWAgIBDw8WAh8CBQZGcmFuY2VkZAIGD2QWAgIBDw8WAh8CBQYxMDAwMSBkZAIHDw8WAh8
   DaGRkGAIFEkFkZHJlc3NEZXRhaWxzVmlldw8UKwAHZGRkZGQWAAIBZAUQQ29udGFjdHNHcmlk
   Vmlldw8UKwAKZGRkZmRkFQICSUQKQWRkcmVzc19JRBQrAAMUKwACAgECARQrAAICAgICFCs
   AAgIDAgMCARQrAAICAQIBZOT9p9/PttrI5jfab0pdx5IQN1dz|
128|hiddenField|__EVENTVALIDATION|/wEWDALCkIDaCQLK2OaHCQKCwqieCQKE1YT0Cg
   Lbq9PnBAKH34u7CwKq+p25BAL9j5Z4Aqr6idQMAvqP6ucHAqr6teMGAvuPzr0HaVP9Rerr
   RiJEMs9v1jmCogca2ww=|16|asyncPostBackControlIDs|
|ContactsGridView|0|postBackControlIDs||
|39|updatePanelIDs||fContactUpdatePanel,tAddressUpdatePanel|0|childUpdatePanelIDs||
|18|panelsToRefreshIDs||AddressUpdatePanel|2|asyncPostBackTimeout|
|90|12|formAction||Default.aspx|

Click on the Edit button of the first row. Change the Mobile number again and click on Update Button to save the changes.In the HttpAnalyser you will see that only 7615 bytes were sent back from server instead of 8688 bytes.

[Bandwidth09.jpg]

In the Response Content below you will see that server has sent the data of only the ContactsGridView and not the AddressDetailsView, which is the one that got actually changed.

5509|updatePanel|ContactUpdatePanel|
   <div>
   <table cellspacing="0"
          cellpadding="4"
          rules="cols"
          border="1"
          id="ContactsGridView" style="color:Black;
             background-color:White;
             border-color:#DEDFDE;
             border-width:1px;
             border-style:None;
             width:900px;
border-collapse:collapse;">

      <tr style="color:White;background-color:#6B696B;font-weight:bold;">
         <th scope="col">
            <a href="javascript:__doPostBack('ContactsGridView','Sort$FirstName')"
               style="color:White;">First Name</a>
         </th>
         <th scope="col">
            <a href="javascript:__doPostBack('ContactsGridView','Sort$LastName')"
               style="color:White;">Last Name</a>
         </th><th scope="col">Title</th>
         <th scope="col">Company</th>
         <th scope="col">Department</th>
         <th scope="col">Mobile</th>
         <th scope="col">Phone</th>
         <th scope="col">Email</th>
         <th scope="col">&nbsp;</th>
         <th scope="col">&nbsp;</th>
      </tr>
      <tr style="color:Black;background-color:#FFFFCC;">
         <td>
            <span id="ContactsGridView_ctl02_Label1">UmaMahesh</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label2">Deen</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label3">Manager</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label5">IT</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label6">9898989899          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label7">9898989898          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl02_Label8">UmaMahesh@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$0')" style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl02_EditButton"
               href="javascript:__doPostBack('ContactsGridView$ctl02$EditButton','')">Edit</a>
         </td>
      </tr>
      <tr style="background-color:White;">
         <td>
            <span id="ContactsGridView_ctl03_Label1">Rakesh</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label2">Munglo</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label3">Sales Executive</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label5">SALES</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label6">9797979797          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label7">9797979797          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl03_Label8">Rakesh@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$1')"
               style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl03_EditButton"
               href="javascript:__doPostBack('ContactsGridView$ctl03$EditButton','')">Edit</a>
         </td>
      </tr>
      <tr style="background-color:#F7F7DE;">
         <td>
            <span id="ContactsGridView_ctl04_Label1">Sarika</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label2">Vemu</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label3">Co-ordinator</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label4">ABC</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label5">Training</span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label6">9696969696          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label7">9696969696          </span>
         </td>
         <td>
            <span id="ContactsGridView_ctl04_Label8">Sarika@ABC.com</span>
         </td>
         <td>
            <a href="javascript:__doPostBack('ContactsGridView','Select$2')"
               style="color:Black;">Select</a>
         </td>
         <td>
            <a id="ContactsGridView_ctl04_EditButton"
               href="javascript:__doPostBack('ContactsGridView$ctl04$EditButton','')">Edit</a>
         </td>
      </tr>
   </table>
   </div>

|0|hiddenField|__EVENTTARGET|
|0|hiddenField|__EVENTARGUMENT|
|1568|hiddenField|__VIEWSTATE|/wEPDwUKMjAzMDgzNDE0Nw9kFgICAw9kFgQCC
   Q9kFgJmD2QWAgIBDzwrAA0CAA8WBB4LXyFEYXRhQm91bmRnHgtfIUl0ZW1Db3Vud
   AIDZAoWABYCZg9kFgoCAQ9kFhBmD2QWAgIBDw8WAh4EVGV4dAUJVW1hTWFoZXNo
   ZGQCAQ9kFgICAQ8PFgIfAgUERGVlbmRkAgIPZBYCAgEPDxYCHwIFB01hbmFnZXJk
   ZAIDD2QWAgIBDw8WAh8CBQNBQkNkZAIED2QWAgIBDw8WAh8CBQJJVGRkAgUPZB
   YCAgEPDxYCHwIFFDk4OTg5ODk4OTkgICAgICAgICAgZGQCBg9kFgICAQ8PFgIfAg
   UUOTg5ODk4OTg5OCAgICAgICAgICBkZAIHD2QWAgIBDw8WAh8CBRFVbWFNYWhlc2h
   AQUJDLmNvbWRkAgIPZBYQZg9kFgICAQ8PFgIfAgUGUmFrZXNoZGQCAQ9kFgICAQ8
   PFgIfAgUGTXVuZ2xvZGQCAg9kFgICAQ8PFgIfAgUPU2FsZXMgRXhlY3V0aXZlZ
   GQCAw9kFgICAQ8PFgIfAgUDQUJDZGQCBA9kFgICAQ8PFgIfAgUFU0FMRVNkZAI
   FD2QWAgIBDw8WAh8CBRQ5Nzk3OTc5Nzk3ICAgICAgICAgIGRkAgYPZBYCAgEP
   DxYCHwIFFDk3OTc5Nzk3OTcgICAgICAgICAgZGQCBw9kFgICAQ8PFgIfAgUOUm
   FrZXNoQEFCQy5jb21kZAIDD2QWEGYPZBYCAgEPDxYCHwIFBlNhcmlrYWRkAgEPZB
   YCAgEPDxYCHwIFBFZlbXVkZAICD2QWAgIBDw8WAh8CBQxDby1vcmRpbmF0b3Jk
   ZAIDD2QWAgIBDw8WAh8CBQNBQkNkZAIED2QWAgIBDw8WAh8CBQhUcmFpbmluZ
   2RkAgUPZBYCAgEPDxYCHwIFFDk2OTY5Njk2OTYgICAgICAgICAgZGQCBg9kFgI
   CAQ8PFgIfAgUUOTY5Njk2OTY5NiAgICAgICAgICBkZAIHD2QWAgIBDw8WAh8CB
   Q5TYXJpa2FAQUJDLmNvbWRkAgQPDxYCHgdWaXNpYmxlaGRkAgUPDxYCHwNoZG
   QCCw9kFgJmD2QWAgIBDzwrAA8BAA8WBB8AZx8BAgFkFgJmD2QWDgIBD2QWAg
   IBDw8WAh8CBQtEYWNoZW4gS3llbmRkAgIPZBYCAgEPDxYCHwIFC0thZGxhcy
   BUYWxlZGQCAw9kFgICAQ8PFgIfAgUFUGFyaXNkZAIED2QWAgIBDw8WAh8CBQx
   QYXJpcyBSZWdpb25kZAIFD2QWAgIBDw8WAh8CBQZGcmFuY2VkZAIGD2QWAg
   IBDw8WAh8CBQYxMDAwMSBkZAIHDw8WAh8DaGRkGAIFEkFkZHJlc3NEZXRha
   WxzVmlldw8UKwAHZGRkZGQWAAIBZAUQQ29udGFjdHNHcmlkVmlldw8UKwAKZ
   GRkZmRkFQICSUQKQWRkcmVzc19JRBQrAAMUKwACAgECARQrAAICAgICFCs
   AAgIDAgMCARQrAAICAQIBZMZvqWLw4HW1vwav7mL+ureqeiba
|128|hiddenField|__EVENTVALIDATION|/wEWDAKa98+tDQLbq9PnBAKH34u7
   CwKq+p25BAL9j5Z4Aqr6idQMAvqP6ucHAqr6teMGAvuPzr0HAsrY5ocJ
   AoLCqJ4JAoTVhPQKj7rqDJLujb6mFfjJc2JDp8B4XyE=|16|
   asyncPostBackControlIDs||ContactsGridView|0|postBackControlIDs||
|39|updatePanelIDs||fContactUpdatePanel,tAddressUpdatePanel|0|
   childUpdatePanelIDs||
|18|panelsToRefreshIDs||ContactUpdatePanel|2|asyncPostBackTimeout|
|90|12|formAction||Default.aspx|

So if you want to save lot of server side capacity and bandwidth in ASP.Net application don't forget to add UpdatePanel Triggers.

Happy Ajaxifying.

Sajad Deyargaroo



About the Author

Sajad Deyargaroo

Sajad, MCTS, MCP, started his career developing applications in VB 4.0 and C++. His interest in programming has spanned many languages but is now focused on .Net. Nowadays, he works with AIS on Microsoft technologies and has published many articles in several magazines and web. You can send an email to sajad@programmer.net.

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: December 11, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Market pressures to move more quickly and develop innovative applications are forcing organizations to rethink how they develop and release applications. The combination of public clouds and physical back-end infrastructures are a means to get applications out faster. However, these hybrid solutions complicate DevOps adoption, with application delivery pipelines that span across complex hybrid cloud and non-cloud environments. Check out this …

  • VMware vCloud® Government Service provided by Carpathia® is an enterprise-class hybrid cloud service that delivers the tried and tested VMware capabilities widely used by government organizations today, with the added security and compliance assurance of FedRAMP authorization. The hybrid cloud is becoming more and more prevalent – in fact, nearly three-fourths of large enterprises expect to have hybrid deployments by 2015, according to a recent Gartner analyst report. Learn about the benefits of …

Most Popular Programming Stories

More for Developers

RSS Feeds