Tuesday, 27 March 2012

user control in asp.net

                                                   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>
&nbsp;</p>
<p>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</p>

<p>

&nbsp;</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.


Posted by Mukesh Trivedi software Engineer at 09:58

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)