Interactive Event Driven ASP.NET User Controls
Add Comment<div align="center"> <table width="90%" class="outline"> <tr> <td width="32%" class="outline"><b>Download</b></td> <td width="15%" class="outline"><b>SDK</b></td> </tr> <tr> <td width="32%" class="outline"> <a class="wbox" href="../../file/interactivecontrols.zip"> interactivecontrols.zip</a> (7kb)</td> <td width="15%" class="outline">Beta2</td> </tr> </table> </div> <p><span class=wboxheado>Introduction</span><br> 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.<br> 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.</p> <p>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.</p> <p><span class=wboxheado>Example</span><br> 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, <br> 1) <b>Header.ascx </b>- This User Control hosts a <b>DropDownList</b> containing a list of Colors. It also exposes a Event (<i>ColorChanged</i>), any other User Control can register with this Event to receive notification when a new Color is selected from the DropDownList<br> 2) <b>Footer.ascx</b> - This User Control consists of a single Label that shows the currently selected Color in the Header Control. It also has a method (<i>UpdateLabel</i>) that subscribes to the <i>ColorChanged</i> Event of the Header User Control and updated the label as soon as a new color is selected from the Header Control.</p> <p><span class=wboxheado>Code</span><br> <b>1) header.ascx</b> - Header User Control</p> <table width="100%" class="code"> <tr> <td width="100%"><pre><%@ 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></pre></td> </tr> </table> <p><b>2) header.cs</b> - Code Behind file for the Header User Control</p> <table width="100%" class="code"> <tr> <td width="100%"> <pre>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 { <span class=cmt>//Define a Delegate</span> public delegate void ColorChangedEventHandler(object sender, ColorEventArgs e); <span class=cmt>//Define a Class that Extends the EventArgs</span> public class ColorEventArgs:System.EventArgs { private string color; <span class=cmt>//Color Property</span> public string Color { get { return this.color; } set { this.color= value; } } } <span class=cmt>//User Control Class</span> public class header: UserControl { <span class=cmt>//Define a Event</span> public event ColorChangedEventHandler ColorChanged; public DropDownList colorList ; public void Page_Init(object sender, EventArgs e) { <span class=cmt>//Wire-up the EventHandler</span> this.colorList.SelectedIndexChanged+=new System.EventHandler(Index_Changed); } //Method called when the DropDownList value changes public void Index_Changed(object sender, EventArgs e) { <span class=cmt>//Create a new Arguments Object</span> ColorEventArgs myArgs = new ColorEventArgs(); <span class=cmt>//Get the color selected</span> myArgs.Color =colorList.SelectedItem.Text; <span class=cmt>//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</span> if(ColorChanged!=null) { <span class=cmt>//Call the Delegate and pass the ColorEventArgs</span> ColorChanged(this, myArgs); } } } }</pre> </td> </tr> </table> <p><b>3) footer.ascx</b> - The Footer User Control</p> <table width="100%" class="code"> <tr> <td width="100%"> <pre><%@ 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></pre> </td> </tr> </table> <p><b>4) footer.cs</b> - Code Behind file for the Footer User Control</p> <table width="100%" class="code"> <tr> <td width="100%"> <pre>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) { <span class=cmt>//Set The Label Properties</span> this.myText.Text="Selected Color is: "+e.Color; this.myText.ForeColor = System.Drawing.Color.FromName(e.Color); } } }</pre> </td> </tr> </table> <p><b>5) Default.aspx</b> - The Default test page</p> <table width="100%" class="code"> <tr> <td width="100%"> <pre><%@ 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></pre> </td> </tr> </table> <p><b>6) Default.cs</b> - Code Behind file for the Default page</p> <table width="100%" class="code"> <tr> <td width="100%"> <pre>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) { <span class=cmt>//Load the Header Control</span> Control headerControl = LoadControl("header.ascx"); <span class=cmt>//Load the Footer Control</span> Control footerControl = LoadControl("footer.ascx"); <span class=cmt>//Wire-Up the EventHandler of Header Control //With the method from the Footer Control</span> ((header)headerControl).ColorChanged+= new ColorChangedEventHandler(((footer)footerControl).UpdateLabel); <span class=cmt>//Add the Header Control to the Panel</span> headerPanel.Controls.Add(headerControl); <span class=cmt>//Add the Footer Control to the Panel</span> footerPanel.Controls.Add(footerControl); } } }</pre> </td> </tr> </table> <p><span class=wboxheado>Compiling and Deploying the Example</span><br> Firstly create a Virtual Directory called '<b>InteractiveControls</b>' and then copy all the files downloaded into this Virtual Directory. If the '<b>bin</b>' 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<br> <b>csc /t:library /out:.\bin\header.dll /recurse:*.cs</b><br> This will create the <i>header.dll</i> file within the Bin directory.<br> Now to run the application, open your browser and call the Default page, i.e. <b>http://localhost/InteractiveControls/Default.aspx </b>- Once the page loads try selecting different colors from the Header Control and the Footer Control will change accordingly!!</p> <p><span class=wboxheado>Conclusion</span><br> 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.