9/1/2015
What is Web User Control?
Web User Control
ASP.NET
ranjan2130@gmail.com
Web User Control
• Unlike a Web Form, you can drag them onto
the Toolbox and drop them into a Web Form.
• When a UserControl is dragged and dropped
onto the webform (design view),
<%@Register directive is added to the
webform with TagPrefix and TagName as
attributes.
• For every instance of the UserControl in the
form, the tagprefix and tagname are used.
ranjan2130@gmail.com
NameControl:System.Web.UI.UserControl
• Go to the .cs file you will see following:
public partial class NameControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
} <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
• A class NameControl inherited from
System.Web.UI.UserControl base class. And
also it contain Page_load event.
ranjan2130@gmail.com
• Using UserControl we can reuse both User
Interface and Code at different places within
the same webform or in different webforms of
the same web application.
• They have a UI component (an .ascx file)
that works with the Visual Studio, and they
employ a matching class to manage the
execution.
• The .ascx file has a Control directive and a
class which is inherited from
"System.Web.UI.UserControl".
ranjan2130@gmail.com
Creating a UserControl
• Launch Visual Studio
File
New
WebSite

ASP.NET Empty Website
• Go to Solution Explorer
Right Click
Add New
Item
Web User Control and give some appropriate
name such as NameControl as in our example.
• A .ascx file and corresponding .cs file is added to
project. See the page source, a control directive
added to the control as
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="NameControl.ascx.cs" Inherits="NameControl" %>
• In normal page we have Page Directive here we have
control directive.
ranjan2130@gmail.com
Design Interface
• Design interface for NameControl in .ascx
file.
• Insert a Label and two Text Boxes and
change properties as:
<asp:Label ID="lblCaption" runat="server" Text="Caption"></asp:Label>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
• Here in .ascx file you would not find any form
tag because this UserControl will be used as
a part of any page.
ranjan2130@gmail.com
1
 9/1/2015

Consume Control Consuming User Control

• Now add a web page may be default.aspx. • And also see the control tag as
• Go to the Design view and drag and drop the <uc1:NameControl ID="NameControl1" runat="server" />

.ascx file to your web form.
• A Control as you designed is added to your
page as a single unit comprising three
different controls.
• Go to the source view of Default page. One
additional directive is added to your page as
• Create two more instances of UserControl.
and change properties as:
<uc1:NameControl ID="nclName" runat="server" />
<br />
<uc1:NameControl ID="nclFathersName" runat="server" />
<br />
<uc1:NameControl ID="nclMothersName" runat="server" />
<br />

shown below:
<%@ Register src="NameControl.ascx" tagname="NameControl"
• Add one button and change properties as:
tagprefix="uc1" %> <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

ranjan2130@gmail.com ranjan2130@gmail.com

Consuming User Control Implement Property in Consumer

• Go to design view which is having Caption as • Go to the Default.aspx and add Caption
default text but we want to have respective properties with respective text. (You may
Captions to the controls.
need to rebuild web site before it to make it
• We cannot access Label's Text property because it
is a part of UserControl not a property of the page. available).
• To do so add a property to user control as <uc1:NameControl ID="nclName" runat="server" Caption="Name" />
<br />
public string Caption <uc1:NameControl ID="nclFathersName" runat="server"
{ Caption="Father's name" />
get
{ <br />
return lblCaption.Text; <uc1:NameControl ID="nclMothersName" runat="server"
} Caption="Mother's Name" />
set <br />
{
lblCaption.Text = value;
}
} • Run the project.
ranjan2130@gmail.com ranjan2130@gmail.com

Access Properties Handle Event and Run

• Now access (read) properties of text boxes designed • Handle button Click event to get FullName
in UserControl and used in WebPage. including Name, Father's Name and Mother's
• Go to .ascx file and add a public property named Name.
FullName
protected void btnSubmit_Click(object sender, EventArgs e)
public string FullName {
{ string str;
get str = nclName.FullName + "<br/>";
{ str += nclFathersName.FullName + "<br/>";
return txtFirstName.Text + " " + txtLastName.Text;
str += nclMothersName.FullName + "<br/>";
}
Response.Write(str);
set
{ }
string[] name = value.Split(' ');
txtFirstName.Text = name[0];
txtLastName.Text = name[1]; • Run it and enter Name, Father's Name and
}
} Mother's Name and Submit it and see result.
ranjan2130@gmail.com ranjan2130@gmail.com

2
 9/1/2015

Note Palindrome Checker User Control

• The Controls in UserControl cannot be directly accessed in the
webform thus for customizing the UserControl, public
properties must be added to it.
• These public properties in most of the circumstances wrap
around the controls which are added to the UserControl.
• In the Example above FullName is the wrapper around
txtFirstName and txtLastName Text Property; Caption is the
wrapper around lblCaption Text Property.
• User control does not have design time facility when used in a
WebForm. The Properties of the UserControl can be set by
setting the attributes for the UserControl tag used in WebForm.
• Change FullName property in design view but that is not
reflected in Design view control.
• Run it. It reflects.
ranjan2130@gmail.com
• User controls are composite controls that contain child
controls very much like binary composite controls do.
They’re very much like miniature Web Forms.
• To get a good idea of how Web User controls work, lets
build the palindrome checker as a User control.
• Build a new Website in Visual Studio.
• Right-click the site and click Add New Item. Select the
Web User Control template and name the control
PalindromeCheckerUserControl.ascx.
• Switch to the Design view by clicking the Design tab.
Drag a Label, a TextBox, a Button, and another Label
from the Toolbox onto the User control. Delete the Text
property from the second label so that it shows its
identifier.
ranjan2130@gmail.com

.ASCX Designer Code Code Behind .ascx

using System;
<%Control Language="C#" using System.Collections.Generic;
AutoEventWireup="true" using System.Linq;
using System.Web;
CodeBehind="PalindromeCheckerUserControl.ascx.cs" using System.Web.UI;
using System.Web.UI.WebControls;
Inherits="PalindromeCheckerUserControl"%> using System.Collections;
<asp:Label ID="Label1" runat="server" Text="Type in a public partial class PalindromeCheckerUserControl : System.Web.UI.UserControl
{
Palindrome:"></asp:Label> public event EventHandler PalindromeFound; // public event
ArrayList alPalindromes;
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> protected void Page_Load(object sender, EventArgs e)
<asp:Button ID="Button1" runat="server" Text="Check for Palindrome" {

OnClick="Button1_Click" /><br /> }

private String text;
<asp:Label ID="labelPalindromeStatus" runat="server" Height="38px" public string Text
{
Width="304px"></asp:Label><br /> <br />
get
<asp:Table ID="Table1" runat="server"> {
return text;
</asp:Table> }

ranjan2130@gmail.com ranjan2130@gmail.com

Code Behind .ascx Code Behind .ascx

set protected string StripNonAlphanumerics(string str)
{ {
text = value; string strStripped = (String)str.Clone();
this.alPalindromes =(ArrayList)this.ViewState["palindromes"]; if (str != null)
if (this.alPalindromes == null) {
{ char[] rgc = strStripped.ToCharArray();
this.alPalindromes = new ArrayList(); int i = 0;
} foreach (char c in rgc)
if (this.CheckForPalindrome()) {
{ if (char.IsLetterOrDigit(c))
if (PalindromeFound != null) {
{ i++;
PalindromeFound(this, EventArgs.Empty); }
} else
alPalindromes.Add(text); {
this.labelPalindromeStatus.Text = String.Format("This is a strStripped = strStripped.Remove(i, 1);
palindrome <br/><FONT size=\"5\" color=\"blue\"><B>{0}</B></FONT>",text); }
} }
else }
{ return strStripped;
this.labelPalindromeStatus.Text = String.Format("This is NOT }
a palindrome <br/><FONT size=\"5\" color=\"red\"><B>{0}</B></FONT>",text); protected bool CheckForPalindrome()
} {
this.ViewState.Add("palindromes", alPalindromes); if (this.Text != null)
this.BuildPalindromesTable(); {
}
}

ranjan2130@gmail.com ranjan2130@gmail.com

3
 9/1/2015

Code Behind .ascx Code Behind .ascx

String strControlText = this.Text; foreach (string s in this.alPalindromes)
String strTextToUpper = null; {
strTextToUpper = Text.ToUpper(); TableCell tableCell = new TableCell();
strControlText = this.StripNonAlphanumerics(strTextToUpper); tableCell.BorderStyle = BorderStyle.Double;
char[] rgcReverse = strControlText.ToCharArray(); tableCell.BorderWidth = 3;
Array.Reverse(rgcReverse); tableCell.Text = s;
String strReverse = new string(rgcReverse); TableRow tableRow = new TableRow();
if (strControlText == strReverse) tableRow.Cells.Add(tableCell);
{ this.Table1.Rows.Add(tableRow);
return true; }
} }
else }
{ protected void Button1_Click(object sender, EventArgs e)
return false; {
} this.Text = this.TextBox1.Text;
} CheckForPalindrome();
else }
{ }
return false;
}
} • To test place control to a webpage and run
protected void BuildPalindromesTable()
{
this.alPalindromes = (ArrayList)this.ViewState["palindromes"];
the code.
if (this.alPalindromes != null)
{

ranjan2130@gmail.com ranjan2130@gmail.com

Thanks

ranjan2130@gmail.com