User Controls in ASP.NET

User Control
User Control represents the simplest form of ASP.NET control encapsualtion. Because they are the simplest, they are very easy to create and use. Mainly the grouping of existing server controls into a single control is a user control. User control code looks very similar to .aspx code as they use same html codes but this control wont have html, head tags. As you see user control takes .ascx extension whereas ASP.NET web page take .aspx, we have code behind fro user control as well .ascx.cs

Creating User Control
Creating user control is very simple in Visual Studio. To create a new user control, you first add a new user control file to your Web site. from the wesite menu, select Add New Item option(as shown Figure 1).

Figure (1)

 
After selecting Add New File dialog Box appears. Select Web User Control in templates section and in the Name Field you can assign a name with .ascx extension and click Add button buttom of the Add New Item dialog box(as Shown Figure 2).

 

Figure (2)

After adding user control in to your website it may look like this with different image(as shown in Figure 3)

 

Figure (3)

with an extension .ascx, this extension indicates that this is a user control.

As you see HTML source looks like below code
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserControl.ascx.cs" Inherits="UserControl" %>

ASP Web Page has this type of code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sep06.aspx.cs" Inherits="practice_Sep06" %> Here user control use @Control directive rather than the @Page directive, which a web page would use. Did you notice there is no default HTML tags for User control like head, body and form. Now you can add couple of server controls to your user controls. Adding Controls to user Control Its very simple Go to Design Mode in .ascx file. drag controls from Toolbox onto your user control as your requirement, I added a Label Control and a Button Control(as shown in Figure 4).

Figure (4)

In Code Behind lets add a few steps of code before adding user control to the web page.

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "WelCome to My First user Control";
}

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You Clicked on the Button";
}

Double click on the button to get Button click event. Lets go to important part Adding user Control to web page. Adding User Control to Web Pages Its very simple Go to your web page(.aspx) in design mode drag and drop user control in a particular area as your requirement. Thats it you see the same you see on web user control design here on ASP Web Page. Try to run the web page it should look like(as shown in Figure 5).

Figure (5)

Cool Then try to click on the Button then you see the Label Text Change to "You Clicked on the Button"(as shown in Figure 6).

 

Figure (6)

If you see this then your user control is working fine. Hence, Your first user control is ready to use, you can add this user control to multiple pages as your requirement. By this way you can Html Tables to format the controls to your user controls.