UserControl in Asp.net WebForm
In Asp.Net Web Forms application development UserControl is one of the very frequently used control for many reason, as a developer we love UserControls for reusability of GUI.
User Control is very easy to implement, but there are few challenge also in some situation, so let's learn user control step by step.
ASP.NET Usercontrol is just like small part of any web page or web form. Here are few characteristic of User Control.
- Usercontrol file has .ascx extension
- You should not write any
<html>, <body>, <form>tags in user control, as they are going to be a part of webform - Note: You can't write form tag does not mean you cannot create form in user control
- User control file has Control directive instead of Page directive.
Add UserControl in Asp.Net
Here in example we create a user control and use that as a partial header in webpage.
Let's add a user control in your project.
Right Click on Project => Add => New Item => Web User Control
Now let's add following code in your user control.
In user control we have added one Label, one textBox and one button, so user can subscribe
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="subscribe.ascx.cs" Inherits="WTRWebForm.subscribe" %> <div style="padding: 5px;"> <asp:Label ID="labMessage" runat="server" Text="Label"> </asp:Label> <br /> Email <asp:TextBox ID="txtSubscribe" runat="server"> </asp:TextBox> <asp:Button ID="btnSubscribe" runat="server" Text="Subscribe" OnClick="btnSubscribe_Click" />
Now we can add this user control as reusable component in two ways
- By adding in .aspx webpage
- By adding in MasterPage
We will experiment both ways to understand the differences, so you can use them as per your business demand.
One obvious difference that when you add user control in master page that become more generic and applied to all pages that uses the master page, on the other hand when you add user control to any particular page that's just reusability of user control.
But there is major difference in event life cycle, which we see in next step while implementing.
Adding user control in web page
Registering or Adding user control in web page is very simple.
// after Page directive add this line
<%@ Register Src="~/subscribe.ascx" TagPrefix="uc1" TagName="subscribe" %>
// call the user control wherever you want in page
<uc1:subscribe runat="server" id="ucSubscribe" />
Now let's try to access the label in user control from parent page, and change the label caption text
protected void Page_PreRender(object sender, EventArgs e)
{
subscribe _subscribeUC = this.ucSubscribe as subscribe;
if (_subscribeUC != null)
{
Label _labMessage = _subscribeUC.FindControl("labMessage") as Label;
_labMessage.Text = "Accessing from Home page";
}
}
Registering Usercontrol in Master Page
Adding user control in Master page
Now we add the user control in a master page, so the control will be available to all the pages under this master page.
Registering or Adding user control in master page is same as web form page.
// after Master directive add this line
<%@ Register Src="~/subscribe.ascx" TagPrefix="uc1" TagName="subscribe" %>
// call the user control wherever you want in masterpage
<uc1:subscribe runat="server" id="ucSubscribe" />
Now let's try to access the label in usercontrol from any page under this master page, and change the label caption text.
protected void Page_PreRender(object sender, EventArgs e)
{
subscribe _subscribeMUC = this.Master.FindControl("ucSubscribe")
as subscribe;
if (_subscribeMUC != null)
{
Label _labMessage = _subscribeMUC.FindControl("labMessage") as Label;
_labMessage.Text = "Accessing Master Page UC";
}
}
Remember to access user control property in Page_Prerender event to make any changes
