user control
user control is used as a masterpage .its extension of page is .ascx,to create user control we have to
go first website->add newitem-> webuser control
it comes in solution with the .ascx extension, then we select this and will do design according
to our needs and then drag its to pages.for register
or we can register like this,
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
scenario 1 : to use user control
suppose we have a textbox and a button on usercontrol and some data is available on user control
and we wants to get the data from user control to page control then we need to do code like this
user control design
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<asp:ImageButton ID="ImageButton1" runat="server" Height="164px"
ImageUrl="~/image/Penguins.jpg" PostBackUrl="~/image/Koala.jpg" Width="990px" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
usercontrol page code-
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TextBox1.Text = "mukesh";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
}
page design-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
<p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</p>
</form>
</body>
</html>
page code
protected void Button1_Click(object sender, EventArgs e)
{
TextBox t1 =(TextBox)WebUserControl1.FindControl("TextBox1");
TextBox1.Text = t1.Text;
}
output -mukesh
Scenario 2- vice versa is also true
sending data from page to usercontrol suppose we want to send data page to usercontrol page
label
design of user control page
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<asp:ImageButton ID="ImageButton1" runat="server" Height="164px"
ImageUrl="~/image/Penguins.jpg" PostBackUrl="~/image/Koala.jpg" Width="990px" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
code on user control page -
public int CategoryId { get; set; }
public string CategoryName { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "Category IaD: " + CategoryId + "<br />" + "Category Name: " + CategoryName;
}
default page design like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="WebUserControl.ascx" tagname="MyControl" tagprefix="uc1" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<uc1:MyControl id="myControl1" runat="server" CategoryId="5" CategoryName="Mukesh" /> <p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</p>
</form>
</body>
</html>
out put - CategoryId : 5 Categoryname- Mukesh
Calling usercontrol dynamically
for this we take paceholder control on pages lets say default.aspx
like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<p>
</p>
<p>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</p>
<p>
</p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</form>
</body>
</html>
code for default.aspx
usingSystem;
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 Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Control ctrl = this.Page.LoadControl("~/WebUserControl.ascx");
PlaceHolder1.Controls.Add(ctrl);
}
}
=================================================================================
another question for user control
How To Access One UserControl from Another Using ASP.NET
Recently,
I came across a post in the asp.net forums, where a user was trying to
access the value of a dropdownlist kept in one UserControl, from another
UserControl. There were quiet a number of suggestions given, however
either they were too complex or not explained well. In this article, we
will see how easy it is to achieve this requirement.
Step 1:
Create a new ASP.NET website. Right click the project > Add New Item
> Web User Control. Give it the name ‘ControlA’. Similarly create
another user control and give it the name ‘ControlB’.
Step 2: We will now create a dropdownlist(ddlItems) in ‘ControlB’ and access the selected value of the dropdownlist in 'ControlA’.
To
do so, drag and drop a dropdownlist in the usercontrol ‘ControlB’ and
add some items to it. The source will look similar to the following:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ControlB.ascx.cs" Inherits="ControlB" %>
<asp:DropDownList ID="ddlItems" runat="server">
<asp:ListItem>Item A</asp:ListItem>
<asp:ListItem>Item B</asp:ListItem>
<asp:ListItem>Item C</asp:ListItem>
</asp:DropDownList>
Also expose the dropdownlist as a property as shown below:
C#
public partial class ControlB : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public DropDownList ControlB_DDL
{
get
{
return this.ddlItems;
}
}
}
Step 3: Now drag and drop a TextBox(txtDDLValue) and a Button(btnDDLValue) on to the usercontrol ‘ControlA’.
Another
crucial part is to add a Reference directive of ‘ControlB’ in
‘ControlA’. Since the user controls are compiled into assemblies, adding
a reference enables ‘ControlA’ to access the methods and properties of
‘ControlB’. The source will look similar to the following:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ControlA.ascx.cs" Inherits="ControlA" %>
<%@ Reference VirtualPath="~/ControlB.ascx" %>
<asp:TextBox ID="txtDDLValue" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button ID="btnDDLValue" runat="server" OnClick="btnDDLValue_Click" Text="Get DropDown Value" />
Add the following code to the codebehind of ‘ControlA’
C#
public partial class ControlA : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnDDLValue_Click(object sender, EventArgs e)
{
ControlB ctrlB = (ControlB)Page.FindControl("cB");
DropDownList ddl = ctrlB.ControlB_DDL;
txtDDLValue.Text = ddl.SelectedValue;
}
}
Since
we have referenced ‘ControlB’ in ‘ControlA’, we can find the control
and access the dropdownlist, that was exposed as a property in Step 2.
Step 4:
All you have to do now is to add the user controls on to the
page(default.aspx). To do so, add the Register directive to register
both the user controls and then use the usercontrols. The source will
look similar to the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/ControlA.ascx" TagName="ControlA" TagPrefix="ctrlA" %>
<%@ Register Src="~/ControlB.ascx" TagName="ControlB" TagPrefix="ctrlB" %>
<!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>Pass Message From One UserControl To Another</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ctrlA:ControlA id="cA" runat="server" />
<br />
<br />
<br />
<ctrlB:ControlB ID="cB" runat="server" />
</div>
</form>
</body>
</html>
Run
the application. Change the value of the dropdownlist in ‘ControlB’.
Now click the button in ‘ControlA’ and the selected value of the
dropdownlist will appear in the textbox.
That
was quiet simple. Your requirement may not be as simple as the one
demonstrated in this article, however the basics of accessing one user
control from another usercontrol will remain the same. I hope this article was useful and I thank you for viewing it.
