Interactive Event Driven ASP.NET User Controls
Add Comment| Download | SDK |
| interactivecontrols.zip (7kb) | Beta2 |
Introduction
You might already be acquainted with User Controls in ASP.NET. They
are like the *.inc used in ASP but they are much more powerful and let
you create new re-usable controls by combining existing controls.
Even though they are very easy and powerful, many times a developer is
faced by the dilemma that he can't get two or more User Controls to
interact with each other. Say for example in the Header control the
user selects a particular value then the Footer control should also
change accordingly to reflect the user selected value. Many times out
of frustration the developer tends to adopt the Frame's based web site
model to emulate the same effect.
This is totally unnecessary since its actually possible to make the User Controls to communicate/interact with each other taking advantage of the Event-Driven Mechanism of ASP.NET. Unfortunately creating such User Controls is impossible currently using inline server scripting and you will have to resort to explicitly using the Code Behind files for creating your controls. You can create Code Behind User Controls either in Visual Studio.NET or you can use the technique I have demonstrated in this article to manually create code behind pages.
Example
To demonstrate the technique of building interactive user controls, I
have picked up a simple example where there is a single page (Default.aspx)
that hosts two User Controls,
1) Header.ascx - This User Control hosts a DropDownList containing a
list of Colors. It also exposes a Event (ColorChanged), any other User
Control can register with this Event to receive notification when a
new Color is selected from the DropDownList
2) Footer.ascx - This User Control consists of a single Label that
shows the currently selected Color in the Header Control. It also has
a method (UpdateLabel) that subscribes to the ColorChanged Event of
the Header User Control and updated the label as soon as a new color
is selected from the Header Control.
Code
1) header.ascx - Header User Control
<%@ Control Language="C#" Inherits="MasterCSharp.WebSite.Saurabh.UserControls.header" %> <center> <h3>Header User Control</h3> Select a Color : <asp:DropDownList id="colorList" AutoPostBack="true" runat="Server"> <asp:ListItem>Red</asp:ListItem> <asp:ListItem>Blue</asp:ListItem> <asp:ListItem>Yellow</asp:ListItem> <asp:ListItem>Orange</asp:ListItem> <asp:ListItem>Green</asp:ListItem> </asp:DropDownList> </center> |
2) header.cs - Code Behind file for the Header User Control
using System;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Web.UI;
namespace MasterCSharp.WebSite.Saurabh.UserControls
{
//Define a Delegate
public delegate void ColorChangedEventHandler(object sender, ColorEventArgs e);
//Define a Class that Extends the EventArgs
public class ColorEventArgs:System.EventArgs
{
private string color;
//Color Property
public string Color
{
get
{
return this.color;
}
set
{
this.color= value;
}
}
}
//User Control Class
public class header: UserControl
{
//Define a Event
public event ColorChangedEventHandler ColorChanged;
public DropDownList colorList ;
public void Page_Init(object sender, EventArgs e)
{
//Wire-up the EventHandler
this.colorList.SelectedIndexChanged+=new System.EventHandler(Index_Changed);
}
//Method called when the DropDownList value changes
public void Index_Changed(object sender, EventArgs e)
{
//Create a new Arguments Object
ColorEventArgs myArgs = new ColorEventArgs();
//Get the color selected
myArgs.Color =colorList.SelectedItem.Text;
//Check if any method has subscribed for notification
//If you don't do this then an exception gets thrown
//When there are no methods subscribing to the Event
if(ColorChanged!=null)
{
//Call the Delegate and pass the ColorEventArgs
ColorChanged(this, myArgs);
}
}
}
}
|
3) footer.ascx - The Footer User Control
<%@ Control Language="C#" Inherits="MasterCSharp.WebSite.Saurabh.UserControls.footer" %> <center> <h3>Footer User Control</h3> <asp:Label id="myText" ForeColor="Red" runat="Server" >Selected Color is: Red </asp:Label></center> |
4) footer.cs - Code Behind file for the Footer User Control
using System;
using System.Drawing;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace MasterCSharp.WebSite.Saurabh.UserControls
{
public class footer: UserControl
{
public Label myText ;
public void UpdateLabel(object sender, ColorEventArgs e)
{
//Set The Label Properties
this.myText.Text="Selected Color is: "+e.Color;
this.myText.ForeColor = System.Drawing.Color.FromName(e.Color);
}
}
}
|
5) Default.aspx - The Default test page
<%@ Page Language="C#" debug="true" Inherits="MasterCSharp.WebSite.Saurabh.UserControls.Default" %> <%@ Register TagPrefix="MCS" TagName="Header" Src="header.ascx" %> <%@ Register TagPrefix="MCS" TagName="Footer" Src="footer.ascx" %> <html> <head> <title>Interactive Event Driven User Controls - by Saurabh Nandu</title> </head> <body> <div align="center" > <h2 align="center">Interactive User Controls</h2> <form runat="Server" > <table width=100% border=1> <tr><td><asp:Panel id="headerPanel" runat="Server" ></asp:Panel></td></tr> <tr><td height="200"><div align="center">This is a test page to show the interaction between two User Controls in ASP.NET.<br> Select a color from the Header User Control and its respective value will get reflected automatically in the Footer User Control below.</td></tr> <tr><td><asp:Panel id="footerPanel" runat="Server" ></asp:Panel></td></tr> </table> </form> <br> Copyright <a href="www.mastercsharp.com">Mastercsharp.com</a>, all rights are reserved. </div></body></html> |
6) Default.cs - Code Behind file for the Default page
using System;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Web.UI;
namespace MasterCSharp.WebSite.Saurabh.UserControls{
public class Default:Page
{
protected Panel headerPanel, footerPanel;
protected void Page_Load(object sender, EventArgs e)
{
//Load the Header Control
Control headerControl = LoadControl("header.ascx");
//Load the Footer Control
Control footerControl = LoadControl("footer.ascx");
//Wire-Up the EventHandler of Header Control
//With the method from the Footer Control
((header)headerControl).ColorChanged+=
new ColorChangedEventHandler(((footer)footerControl).UpdateLabel);
//Add the Header Control to the Panel
headerPanel.Controls.Add(headerControl);
//Add the Footer Control to the Panel
footerPanel.Controls.Add(footerControl);
}
}
}
|
Compiling and Deploying the Example
Firstly create a Virtual Directory called 'InteractiveControls'
and then copy all the files downloaded into this Virtual Directory. If
the 'bin' directory does not exist within the InteractiveControls
directory then create it and then run the Command Prompt and navigate
to the InteractiveControls directory. Run the C# compiler with the
following options
csc /t:library /out:.\bin\header.dll /recurse:*.cs
This will create the header.dll file within the Bin directory.
Now to run the application, open your browser and call the Default
page, i.e. http://localhost/InteractiveControls/Default.aspx - Once
the page loads try selecting different colors from the Header Control
and the Footer Control will change accordingly!!
Conclusion
In this small example I have demonstrated how easy it is to create
Interactive Event Driven User Controls. Create your own User Controls
to learn more about this mechanism. You could create two user controls
where according to the section you select in the navigation control,
the header and footer controls get updated automatically to reflect
the section title and other useful information.