Monday, November 23, 2009

Programmatic way of adding update panel control to asp.net web page

Due to issue with some legacy third party controls on a regular asp.net web page, I was not able to declaratively add UPDATE PANEL controls to the page. My aim was to generate asynchronous behavior or partial postback for the new controls which i was supposed to add to legacy page. Finally, I came up with this following basic idea which involves using placeholder container controls and dynamically adding controls to the place holder controls. There are few other options like using JQuery techniques. Ofcourse, I finally ended up using JQuery technique to achieve the same effect.

But, I thought some people might feel comfortable using the traditional asp.net code-behind model and more aligned towards microsoft ajax controls and techniques.

Following sample code is almost self-explanatory. You can copy it and run it as is. Please feel free to post your questions in comments









html code:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
    <title>title> head>
<body>
   <form id="form1" runat="server">
    <div>
    <asp:Literal ID="literal1" runat="server">Countryasp:Literal>
    <asp:PlaceHolder  ID= "placeHolder1" Visible="true" runat="server">
asp:PlaceHolder>      <asp:Literal ID="literal2" runat="server">Citiesasp:Literal>
     <asp:PlaceHolder  ID= "placeHolder2" Visible="true" runat="server">asp: PlaceHolder>
    div>
    form>
<body>
<html>
Code behind code:
using System; using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1 {
    public partial class _Default : System.Web.UI.Page
    {
       private static System.Collections.Generic.List<Int32
        protected void Page_Load(object sender, EventArgs e)
        {
           ScriptManager manager = new ScriptManager();
           CheckBoxList checkboxList = new CheckBoxList();
           checkboxList.ID = "Cities";
           checkboxList.AutoPostBack = true;
           DropDownList dropdwnlist = new DropDownList();
       dropdwnlist.ID = "ddCountry";
           dropdwnlist.SelectedIndexChanged += 
new EventHandler(dropdwnlist_SelectedIndexChanged);            dropdwnlist.AutoPostBack = true;
           dropdwnlist.Items.Add(new ListItem("please select","0"));
           dropdwnlist.Items.Add(new ListItem("India","1"));
dropdwnlist.Items.Add(new ListItem("USA","2"));
           placeHolder1.Controls.Add(dropdwnlist);
           placeHolder2.Controls.Add(checkboxList);
         
UpdatePanel panel = new UpdatePanel();
           panel.ContentTemplateContainer.Controls.Add(placeHolder1);
           panel.ContentTemplateContainer.Controls.Add(placeHolder2);
           Page.Form.Controls.Add(manager);
           Page.Form.Controls.Add(panel);
   
          }
      protected void dropdwnlist_SelectedIndexChanged(object sender,EventArgs e)         {
           var checkboxlist = placeHolder2.FindControl("Cities") as CheckBoxList;
           var dropdwonlist = placeHolder1.FindControl("ddCountry") as DropDownList;
           if (dropdwonlist.SelectedValue == "1")
           {
               checkboxlist.Items.Add(new ListItem("Hyderabad","1"));
               checkboxlist.Items.Add(new ListItem("Mumbai","2"));
               checkboxlist.Items.Add(new ListItem("NewDelhi","3"));
               checkboxlist.Items.Add(new ListItem("Chennai","4"));
           }
           else if (dropdwonlist.SelectedValue == "2")
           {
               checkboxlist.Items.Add(new ListItem("NewYork","1"));
               checkboxlist.Items.Add(new ListItem("Chicago","2"));
               checkboxlist.Items.Add(new ListItem("LosAngeles","3"));
           }
        }
  }
}