Creating User Control in ASP.Net

Background

I have often read a common question in forum posts of how to create a User Control in ASP.NET but no one has provided the proper solution so by considering the preceding requirements I have decided to write this article to provide the step-by-step solution to create the User Control. So let us start creating an application so beginners can also understand.

 

What a User Control is

 

A User Control is a reusable page or control with an extension of .ascx  and created similar to an .aspx page but the difference is that a User Control does not render on its own, it requires an .aspx page to be rendered.

 

User Controls are very useful to avoid repetition of code for similar requirements. Suppose I need a calendar control in my application with some custom requirements in multiple pages, then instead of creating the control repetitively you can create it once and use it on multiple pages.

 

Key points

• The User Control page structure is similar to the .aspx page but a User Control does not need to add an entire HTML structure such as body, head and form.

• A User Control has an .ascx extension.

• A User Control is derived from the UserControl class whereas an .aspx page is derived from the Page class.

• A User Control does not render on its own, it needs an .aspx page.

• To use a User Control in an .aspx page you need to register the control in the .aspx page.
  

So let us learn practically about User Controls in depth.

Step 1: Create Web Application

 

Now let us create the sample web application as follows:

1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
   
   
2. "File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).
   
   
3. Provide the web site a name such as "CreatingUsercontrol" or another as you wish and specify the location.

Step 2: Create the User Control

1. Then right-click on the project in the Solution Explorer then select "Add New Item" then select Web User Control template as in the following:

Now click on Add then User Control will be added into the solution of the application. Now open the design mode and add the two textboxes, one label, one button and after adding the studentcontrol.ascx the source code will look as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="StudentUserControl.ascx.cs" Inherits="StudentUserControl" %>


<h3>This is User Contro1   </h3>
<table>

<tr>
<td>Name</td>
<td>

    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>City</td>
<td><asp:TextBox ID="txtcity" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
     </td>
</tr>
<tr>
<td></td>

<td>
    <asp:Button ID="txtSave" runat="server" Text="Save" onclick="txtSave_Click" />  </td>
</tr>
</table><br />
 <asp:Label ID="Label1" runat="server" ForeColor="White" Text=" "></asp:Label>

In the preceding code you have noticed that there is no whole HTML code in User Control such as head, body and form even then it will create the server control. Now switch to design mode then the control will look such as follows:

 

 

 

Now double-click on the save button and write the following code in the studentusercontrol.ascx.cs file as:

protected void txtSave_Click(object sender, EventArgs e)
{
    Label1.Text="Your Name is "+txtName.Text+"  and you are  from  "+txtcity.Text;
}

In the preceding code, whenever the user enters text into the preceding text boxes, after clicking on the save button it is displayed on the label. Now we are ready with the User Control, let us try to run it in a browser as it is showing in the following error:

 

 

As already discussed in the preceding, a User Control does not run directly on its own. To render a User Control you must use it in an .aspx page, now let us add the User Control in the .aspx page.

 

Step 3: Adding User Control into .aspx page

 

Now we need to add the User Control into an .aspx page to use it so let us add the Default.aspx page by right-clicking on the projct in the Solution Explorer. After adding the .aspx page then the Solution Explorer will look such as follows:

 

 

Step 4: Register the User Control on .aspx page

 

To use a User Control in an .aspx we need to register it using the Register page directive, the register page directive has the following properties as:

 

 

 

• Assembly: This is an optional property used to register the assembly, for example Ajax control toolkit.

• Namespace: This property is used to specify the namespace.

• Src: Used to set the source of User Control.

• TagName: Used to provide the name for the User Control used on a page similar to a TextBox or label, you can define any name.

• TagPrefix: This is used to specify the prefix name of User Control which is similar to ASP. You can define any prefix name.
  

Now that we are familiar with the properties, let us register the User Control in an .aspx page. Go to the default.aspx source code, go to the top of the source code and the Register property and select it or if the User Control is not shown here click on or pick the URL as:

 

 

After clicking on Pick URL the following window is shown, browse to the file location of the User Control then select it and click on the OK button as in the following:

 

 

 

After clicking the OK button, the User Control file path will be added to the register directive. Now after defining the tagname and tagprefix the Register directive will look as in the following:

 

 

Now let us enter the TagPrefix into the form section then the control will be shown as follows:

 

Now select the control and define the properties such as runat and Id. After defining it the User Control will look as in the following:

<uc:Student ID="studentcontrol" runat="server" />

Now the whole code of the default .aspx code will look as in the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Src="~/StudentUserControl.ascx" TagPrefix="uc" TagName="Student"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Article by Vithal Wadje</title>
</head>
<body bgcolor="blue">
    <form id="form2" runat="server">
    <div style="color: White;">
        <h4>
            Article for C#Corner
        </h4>


    <uc:Student ID="studentcontrol" runat="server" />

    </div>
    </form>

</body>
</html>

Now run the application, the UI will look as in the following:

 

 

 

Now enter the name and city into the preceding two text boxes and click on the save button. The output will be shown as follows:

 

 

 

Now you have seen that, we do not have any code on the .aspx page but still the output is shown because all the logic is written in the User Control, we can use the same User Control at N numbers of times by defining unique Ids on the same page or on multiple pages.

 

Note

• For more details and explanation, download the Uploaded Zip file.
  

Summary

From all the preceding examples you have learned how to create a User Control. I hope this article is useful for all readers, if you have a suggestion then please contact me.