How to Add an UpdatePanel dynamically?

meeram395

In my form, I have two dropdownists called Countries and States which are dynamically generating. These controls are generating only at the run time and the Country dropdown gets loaded for the first time. I have written code for the SelectedIndexchanged of the Country dropdown so that the corresponding States also will get updated in the States dropdownlists. These are all working fine. My issue is these are working in a Postback condition. Can I use an UpdatePanel dynamically so that the User doesn't get an impression that the page is actually posting back. Any idea how to create the Update panels dynamically so as to include both the dropdownlists and populate without a postback? Thanks for any help.

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.

N a v a n e e t h

meeram395 wrote:

My issue is these are working in a Postback condition. Can I use an UpdatePanel dynamically so that the User doesn't get an impression that the page is actually posting back

How user is getting that page is posting back? A post-back and page refresh is not same. Are you saying your page is refreshing? Not sure I got you correctly. :)

Navaneeth How to use google | Ask smart questions

meeram395

Thank you for the immediate response. Sorry that I didn't mention clearly the issue. Page is not refreshing. It is posting back, means when the User Selects a country from the CountryDropdownlist, the corresponding States are populated from sql database by passing the CountryId. I made the AutoPostBack property of Country to True so that it posts back to the server when the index changed. Hope this is clear now.

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.

Rajdev Ramasamy

We can add update panels dynamically. Please refer the following code sample(working): Note: This is a Sample code Aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicUpdatePanel.aspx.cs" Inherits="DynamicUpdatePanel" %>

<!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>Dynamic Update Panel</title>
</head>
<body>
<form id="frmDynamicUpdatePanel" runat="server">
<asp:ScriptManager ID="pageScriptManager" runat="server"></asp:ScriptManager>
<asp:Panel ID="panelControls" runat="server">
</asp:Panel>
</form>
</body>
</html>

.CS

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class DynamicUpdatePanel : System.Web.UI.Page
{
DataTable dtCountry;
DataTable dtState;

protected void Page\_Load(object sender, EventArgs e)
{
    PopulateData();
    CreateControls();
}

protected void CreateControls()
{
    UpdatePanel updatePanel = new UpdatePanel();
            
    DropDownList ddlCountry = new DropDownList();
    ddlCountry.ID = "ddlCountry";
    ddlCountry.Items.Add(new ListItem("-Select-", "-1"));
    ddlCountry.DataSource = dtCountry;
    ddlCountry.DataValueField = "CountryID";
    ddlCountry.DataTextField = "CountryName";
    ddlCountry.DataBind();
    ddlCountry.SelectedIndexChanged += ddlCountry\_SelectedIndexChanged;
    ddlCountry.Items.Insert(0, new ListItem("-Select-", "-1"));
    ddlCountry.AutoPostBack = true;

    DropDownList ddlState = new DropDownList();
    ddlState.ID = "ddlState";
    ddlState.Items.Insert(0, new ListItem("-Select-", "-1"));
    
    updatePanel.ContentTemplateContainer.Controls.AddAt(0, ddlCountry);
    updatePanel.ContentTemplateContainer.Controls.AddAt(1, ddlState);

    panelControls.Controls.Add(updatePanel);

}

protected void PopulateData()
{
    dtCountry = new DataTable();

N a v a n e e t h

Well, how can the second dropdown be filled without a post-back? AFAIK, you can't avoid page posting back. BTW, what is wrong by doing so and why are you trying to prevent it?

Navaneeth How to use google | Ask smart questions

N a v a n e e t h

If updatepanel is used only for filling the dropdowns without page refresh, why don't you try Cascading Dropdown[^]?

Navaneeth How to use google | Ask smart questions

meeram395

You are right. The second dropdown is filled with a post-back only. But while using the UpdatePanel, the user will not get the feeling that the page is actually posting back. This will help him to enter the data in other controls and need not wait for the page to be reloaded.

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.

meeram395

Sorry for the late reply. Thank you Rajdev. Code Works perfectly fine. Thanks a lot!!!

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.