Introduction

In daily development we use UserControls. Now the question is, what are UserControls and why do we use them.

In Software Development, everybody is talking about reusability. A UserControl also provides for reusability. In other words, we can create and edit in one thing and get results everywhere, wherever you use the item.

For example we have an e-mail form or a contact us form and I want to use it in 4 different pages in various parts. And if the client requirnments change then I just make the changes in one place and automatically the changes will be done in all forms. So for this we can use a UserControl.

How to create a User Control

Have a look at the following example:

  1. Open Visual Studio.
  2. "File" -> "New" -> "Project..." then seelct ASP.NET Webform Application.
  3. Add a new web form.

To create a new UserControl, in Solution Expolrer, Add New Item, provide your File Name and click Add.

web user control

When you click on the Add Button the following screen will be shown.

Add Button

ContactUC.ascx

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ContactUC.ascx.cs" Inherits="UserControlDemo.ContactUC" %>
  3. <table>
  4. <tr>
  5. <td>
  6. <fieldset>
  7. <asp:Label ID="lblMessage" runat="server"></asp:Label>
  8. </fieldset>
  9. </td>
  10. </tr>
  11. <tr>
  12. <td>
  13. <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
  14. </td>
  15. <td>
  16. <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
  17. </td>
  18. </tr>
  19. <tr>
  20. <td>
  21. <asp:Label ID="lblAddress" runat="server" Text="Address"></asp:Label>
  22. </td>
  23. <td>
  24. <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
  25. </td>
  26. </tr>
  27. <tr>
  28. <td>
  29. <asp:Label ID="lblPhone" runat="server" Text="Phone"></asp:Label>
  30. </td>
  31. <td>
  32. <asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
  33. </td>
  34. </tr>
  35. <tr>
  36. <td>
  37. <asp:Label ID="lblEmail" runat="server" Text="Email"></asp:Label>
  38. </td>
  39. <td>
  40. <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
  41. </td>
  42. </tr>
  43. <tr>
  44. <td>
  45. <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
  46. </td>
  47. </tr>
  49. </table>
ContactUC.ascx.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  8. namespace UserControlDemo
  9. {
  10. public partial class ContactUC : System.Web.UI.UserControl
  11. {
  12. private string _header;
  13. public string Header
  14. {
  15. get { return _header; }
  16. set { _header = value; }
  17. }
  18. protected void Page_Load(object sender, EventArgs e)
  19. {
  20. lblMessage.Text = _header;
  21. }
  22. }
  23. }
UcDemo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UcDemo.aspx.cs" Inherits="UserControlDemo.UcDemo" %>
  2. <%@ Register Src="~/ContactUC.ascx" TagPrefix="uc1" TagName="ContactUC" %>
  4. <!DOCTYPE html>
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head runat="server">
  8. <title></title>
  9. </head>
  10. <body>
  11. <form id="form1" runat="server">
  12. <div>
  13. <uc1:ContactUC runat="server" id="ContactUC"/>
  14. </div>
  15. </form>
  16. </body>
  17. </html>
Understand the code

A UserControl is nothing but a webpage where you can put your controls, write their events into a .cs file and use whenever you want. In the preceding example as you can see we have a UserControl where we want to create a contactus kind of page, where we have one lblMessage, where we use the UserControl property for header. Here we have 4 textboxes and one button, for inserting user info. If we want to write code for the submit button then we can write it here.

In ContactUC.ascx.cs, here we add a property and use this property in lblMessage.Text at the PageLoad event.
  1. private string _header;
  2. public string Header
  3. {
  4. get { return _header; }
  5. set { _header = value; }
  6. }
  7. protected void Page_Load(object sender, EventArgs e)
  8. {
  9. lblMessage.Text = _header;
  10. }
Calling a UserControl in to a web page

When you drag a UserControl onto a page. You can see this code.
  1. <%@ Register Src="~/ContactUC.ascx" TagPrefix="uc1" TagName="ContactUC" %>
  2. <uc1:ContactUC runat="server" id="ContactUC" Header="User Contact Us Page" />
UcDemo.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UcDemo.aspx.cs" Inherits="UserControlDemo.UcDemo" %>
  2. <%@ Register Src="~/ContactUC.ascx" TagPrefix="uc1" TagName="ContactUC" %>
  4. <!DOCTYPE html>
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head runat="server">
  8. <title></title>
  9. </head>
  10. <body>
  11. <form id="form1" runat="server">
  12. <div>
  13. <uc1:ContactUC runat="server" id="ContactUC" Header="User Contact Us Page" />
  14. </div>
  15. </form>
  16. </body>
  17. </html>
You can change the header property depending on your requirements. If you want to add more properties to it, you can create more properties in your .cs file.

That's it. Press F5 and run your code.