How to change the page content dynamically.

Posted Date: 21 Oct 2004	Resource Type: Articles	Category: ASP.NET/Web Applications
Author: Atal Bihari Upadhyay	Member Level: Gold
Rating:	Points: 5

Changing the content of the page dynamically.

The PlaceHolder control can be used to specify exactly where on a Web Form you want your new control to appear. You can change the whole content of the page or simply part of the page using placeholder control.

LoadControl method can be used to load the control dynamically.
You can add controls to any class that exposes a Controls() collection property by using the Class.Controls.Add() method.

Here is how it work:

Step 1: Open a new solution in vs.net. By default, webform1 will be created. Change to HTML view and page the following code as html.

<%@ Page Language="C#" AutoEventWireup="True" %>
<HTML>
<HEAD>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
Control ctlControl;
switch (DropDownList1.SelectedIndex)
{
case 0:
ctlControl = LoadControl( "logon.ascx" );
break;
case 1:
ctlControl = LoadControl( "MainPage.ascx" );
break;
default:
ctlControl = LoadControl( "logon.ascx" );
break;
}
PlaceHolder1.Controls.Add( ctlControl );
}
</script>
</HEAD>
<body>
<form runat="server" ID="Form1">
<h3>
<asp:DropDownList id="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem Value="Login">Login</asp:ListItem>
<asp:ListItem Value="Main">Main</asp:ListItem>
</asp:DropDownList></h3>
<H3> </H3>
<H3>PlaceHolder Example</H3>
<asp:PlaceHolder id="PlaceHolder1" runat="server" />
</form>
</body>
</HTML>

Step 2:

Add Login.ascx web user control switch to HTML view and paste the following code as html:

<%@ Control Language="c#" AutoEventWireup="false" "%>
<P>
<asp:Label id="Label1" runat="server">User name</asp:Label>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox></P>
<P>
<asp:Label id="Label2" runat="server">Password</asp:Label>
<asp:TextBox id="TextBox2" runat="server"></asp:TextBox></P>

Step 3:

Add MainPage.ascx web user control switch to HTML view and paste the following code as html:

<%@ Control Language="c#" AutoEventWireup="false" %>
<asp:Label id="Label1" runat="server" Width="320px" Font-Bold="True" Font-Size="Larger" Font-Italic="True">This is Main Page</asp:Label>
<BR><asp:TextBox id="TextBox1" runat="server">Some data</asp:TextBox>

Step 4: Run the application and change the value of combobox. Content of the page should change.

Hope it's useful in situations where you need the change the content of the page dynamically.

Have fun.

Atal.

Responses

Author: Aparna 06 Dec 2004

Member Level: Bronze Points : 0

Hi Atal
I tried U r code Its working fine also.
But the place holder can hold either of two controls when selected from the dropdownlist.
I want like instead of dropdown i take 2 check box
when i click 1st checkbox it will load Login.ascx
Next time when i click 2nd checkbox it should show me
1st controls also and it should place next MainPage.ascx controls beside it.
Like this.

Feedbacks

Popular Tags

What are tags ?

Search Tags

(No tags found.)

Post Feedback

This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.

	Next Resource: Time elasped in page execution
	Previous Resource: Advantage of <IFRAME> tag
	Return to Discussion Resource Index
	Post New Resource
	Category: ASP.NET/Web Applications

Post resources and earn money!

More Resources