Post
Ask Question

Web User Controls in ASP.Net

Web user controls
 
Web user controls are derived from System.Web.UI.UserControl namespace. These controls once created, can be added to the aspx page either at design time or programmatically during run time. But they lack the design time support of setting the properties created along with the control. They cannot run on their own and they need to stand on another platform like an aspx page. Even if we try to load it on a web browser, IIS will not serve the files of the type .ascx.
  1. Create a new ASP .Net web application using Visual Studio.Net.
  1. Add a Web User Control to the project. Name it as WebUserControl1.ascx.
     
  2. Add a Panel Control on the user control form
  1. Add a hyperlink,a TextBox and a button Add a property to the User Control as follows.
    1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %>   
    2. <style type="text/css">   
    3. .style1   
    4. {   
    5. width: 100%;   
    6. }   
    7. .style2   
    8. {   
    9. width: 927px;   
    10. }   
    11. </style>   
    12. <table class="style1">   
    13. <tr>   
    14. <td bgcolor="#990000" class="style2">   
    15. <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="True"   
    16. ForeColor="White" NavigateUrl="~/Home.aspx">Home</asp:HyperLink>   
    17. </td>   
    18. <td>   
    19.  </td>   
    20. </tr>   
    21. <tr>   
    22. <td class="style2">   
    23. <br />   
    24. </td>   
    25. <td>   
    26.  </td>   
    27. </tr>   
    28. </table>   
    29. <asp:Panel ID="Panel1" runat="server">   
    30. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>   
    31. <br />   
    32. <br />   
    33. <asp:Button ID="Button1" runat="server" Text="Button" />   
    34. </asp:Panel>
    Microsoft Visual Studio

     
  2. Write the following code in WebUserControl1.ascx.cs file 
    1. using System;   
    2. using System.Collections;   
    3. using System.Configuration;   
    4. using System.Data;   
    5. using System.Linq;   
    6. using System.Web;   
    7. using System.Web.Security;   
    8. using System.Web.UI;   
    9. using System.Web.UI.HtmlControls;   
    10. using System.Web.UI.WebControls;   
    11. using System.Web.UI.WebControls.WebParts;   
    12. using System.Xml.Linq;   
    13. using System.Drawing;   
    14.   
    15. namespace WebApplication3   
    16. {   
    17. public partial class WebUserControl1 : System.Web.UI.UserControl }  
    18. {   
    19. protected void Page_Load(object sender, EventArgs e)   
    20. {   
    21. Panel1.BackColor = backColor;   
    22. }   
    23. protected Color backColor;   
    24. public Color BackColor   
    25. {   
    26. get   
    27. {   
    28. return backColor;   
    29. }   
    30. set   
    31. {   
    32. backColor = value;   
    33. }  
    34. }  
    35. }   
    36. }
  3. The above can be used set the Background color of the control. Add the following code to the Page_Load event of the control.
    1. protected void Page_Load(object sender, EventArgs e)  
    2. {  
    3.     Panel1.BackColor = backColor;  
    4. }  
    Now Add another web form as Home.aspx.

  4. Drag and drop the WebUserControl1.ascx into the Web form. This will put the following entries in the aspx page
    1. <%@ Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>    
    1. <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />  
    This entry will be found inside the <form> .. </form> tag.

  6. Build the application.

  7. Select and view the TestPage.aspx in the browser. This will show the page with the control loaded with it.

  8. Now if we need we can change the background color to Gray, by adding the property in the control as follows.
    1. <uc1:WebUserControl1 ID="WebUserControl11" runat="server" BackColor=Gray/>
    Now if the application is built, the home.aspx will show our user control with a gray background.

    ASP.NET User Control
Advantages of a Web User Control
 
The biggest advantage of the Web User controls is that they can be created as a site template and used through out the site. For example they can be made to contain the Menu/Link structure of a site and can be used at all the other aspx pages.  This means the following :
  1. If the website introduces a new site-wide link within the current layout/structure, it is enough if we put it on the user control once. All pages will be updated once if the web user control is used in them.
  2. If there is any link to be corrected, it can be done once at the server side.  
  3. The .ascx files can either be used as a simple alternative to the plain HTML or they can also be used to respond to events: This means even custom code can be created against them and put in the code behind files.
Drawbacks / Disadvantages
 
Though the User controls offer a flexibility of having a site wide modifications, if the whole structure of the site changes, the HTML/aspx code of all the pages should be modified. But as long as the site maintains a same layout, then Web User controls are the number one choice for maintaining the generic layout of the site. Another disadvantage is It can not be just be simply referenced for using in a different project. If we want to use this User Control in a different project, we have to copy the file and modify the namespace to the host namespace name. 


Similar Articles