Before looking at the code, Read about – What is JumpStart?
NOTE –
- It is sometimes required to make UserControls communicate between each other. So the following demo is used to show the same.
- Even though there are advantages in communicating the Usercontrols, in some cases it increases the dependency between them which can hinder the robustness of the page.
================================================================================================
TestUserControl1.ascx
This is the first UserControl on the page, from which we access the other UserControl (TestUserControl2.ascx) Properties.
================================================================================================
<%@ Control Language="C#" ClassName="TestUserControl1" %> <!-- Add a Reference to TestUserControl2 using the @Reference Directive as shown --> <%@ Reference VirtualPath="~/TestUserControl2.ascx"%> <script runat="server"> // Create a Property to access the UC1TextBox of TestUserControl1 public string TestUserControl1_UC1TextBox { get { return UC1TextBox.Text; } set { UC1TextBox.Text = value; } } // Handle the Button1 Click Event protected void Button1_Click(object sender, EventArgs e) { // Access the TestUserControl2 control from the page. TestUserControl2 tuc2 = (TestUserControl2)Page.FindControl("uc2"); // Set the TextBox Property of TestUserControl2 by accessing the publix property of TestUsercontrol2 if(tuc2 != null) tuc2.TestUserControl2_UC2TextBox = TestUserControl1_UC1TextBox; } </script> <asp:Panel ID="Panel1" runat="server" BorderColor="#000066" BorderStyle="Solid" Width="400px"> <asp:Label ID="Label1" runat="server" Font-Italic="True" Font-Size="Large" Text="TestUserControl1" ForeColor="#000066"></asp:Label> <br /> Enter a Value To transfer to TestUserControl2 - <asp:TextBox ID="UC1TextBox" runat="server"></asp:TextBox> <br /> <asp:Button ID="Button1" runat="server" Text="Take the Value to TestUserControl2" OnClick="Button1_Click" /><br /> </asp:Panel>
================================================================================================
TestUserControl2.ascx
This is the second UserControl on the page, we get data from to this UserControl from other UserControl (TestUsercontrol1.ascx) .
================================================================================================
<%@ Control Language="C#" ClassName="TestUserControl2" %> <script runat="server"> /* Create a Property to set, get the value of the UC2TextBox, which is used in the other UserControl i.e., TestUserControl1 to set the value.*/ public string TestUserControl2_UC2TextBox { get { return UC2TextBox.Text; } set { UC2TextBox.Text = value; } } </script> <asp:Panel ID="Panel1" runat="server" BorderColor="Red" BorderStyle="Solid" Width="400px"> <asp:Label ID="Label1" runat="server" Text="TestUserControl2" Font-Italic="True" Font-Size="Large" ForeColor="Red"></asp:Label> <br /> Display the value got from TestUserControl1 - <asp:TextBox ID="UC2TextBox" runat="server"></asp:TextBox> <br /> </asp:Panel>
================================================================================================
Page.aspx
We use the above mentioned Usercontrols in this page.
================================================================================================
<%@ Page Language="C#"%> <!-- Add References to TestUserControl2, TestUsercontrol1 using the @Reference Directive as shown --> <%@ Register Src="~/TestUserControl1.ascx" TagPrefix="UserControl" TagName="uc1" %> <%@ Register Src="~/TestUserControl2.ascx" TagPrefix="UserControl" TagName="uc2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { /* Here the UserControls are loaded dynamically, using Page.Loadcontrol() method Give the ID's of the Dynamic UserControls, by which we can access them on the page. */ TestUserControl1 tuc1 = (TestUserControl1)Page.LoadControl("~/TestUserControl1.ascx"); TestUserControl2 tuc2 = (TestUserControl2)Page.LoadControl("~/TestUserControl2.ascx"); tuc1.ID = "uc1"; tuc2.ID = "uc2"; // Create a normal Html Tag control to get the breaks between dynamic Usercontrols HtmlGenericControl hgc = new HtmlGenericControl(); hgc.InnerHtml = "<br/><br/>"; // Add the created dynamic control to the page Page.Form.Controls.Add(tuc1); Page.Form.Controls.Add(hgc); Page.Form.Controls.Add(tuc2); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
================================================================================================
OUTPUT
================================================================================================
Before PostBack – After PostBack –
Is there a way to move the script code to the code-behind? I tried it, but I get an error saying the type or namespace name of the control can’t be found.
Help would be appreciated, thanks!