Converting ASP.NET Web Froms Page to Web User Control

Web User Conrols

We also can convert a normal Web forms page to a user control with minor alterations. Web user controls are very similar to Web Forms pages and they are created using the same techniques. When you convert a Web Forms page to a Web user control, you are creating a reusable UI component that can be used on other Web Forms pages.

Converting a Web Forms Page to a User Control

Select the Web Forms page which you want to convert to a user control, go to design view. Add some controls to the form if you do not have any. Say, you added two labels and two textboxes to create a log-in/password style boxes. To convert a Web page to a user control you need to modify the HTML code of the ASPX file. To do that, switch to HTML view and remove the <HEAD>, <BODY>, <HTML and <FORM> tags. By default, user controls are designed not to contain any HTML tags. Also, you need to change the @Page directive to @ Control directive. After removing the HTML tags the page should look like this:

<%@ Control Language="vb" AutoEventWireup="false" Codebehind="WebForm7.aspx.vb"_
Inherits="asp.WebForm7"%>
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 179px; POSITION: absolute;_
TOP: 112px" runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 102; LEFT: 181px; POSITION: absolute;_
TOP: 152px" runat="server"></asp:TextBox>
<asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 84px; POSITION: absolute; TOP:_
114px" runat="server">Username<asp:Label>
<asp:Label id="Label2" style="Z-INDEX: 104; LEFT: 89px; POSITION: absolute; TOP:_
152px" runat="server">Password</asp:Label>

After you are done with the code, save and close it.

Changing the extension of the file

This step involves changing the extension of the file from "aspx" to "ascx". The Web forms page which we want to convert to a user control has an "aspx" entension. Say, the Web forms page file is WebForm7.aspx. You need to change the extension of WebForm7.aspx to WebForm7.ascx. To do that, open Solution Explorer window, select WebForm7.aspx, right-click on it and select rename from the menu. Change the extension of WebForm7.aspx tp WebForm7.ascx. Now, your web page is ready to be used as a user control.

Using the user control

You can use the user control which you created above in two ways. First method is to drag the user control file and drop it on a Web forms page in which you want to use the newly created control. The second method is a bit different and involves a two step process. The following two steps explains that.

The first step in the process is to register the user control which we created. To do so, open the Web forms page to which you want to add the user control. Go to design view and switch to HTML view and at the top of the page, before the <HTML> tag, you need to add a directive that registers this control so that it will be recognized when the page is processed. You should use the directive to associate a name and a namespace with the Web user control by specifying TagPrefix, TagName, and Src location values. The line of code for that looks like this:

<%@ Register TagPrefix="login" TagName="logss" Src="WebForm7.ascx" %>

Adding the User Control

The next step is to add the user control to the page. To add the user control to a page use the following line of code:

<uc1:login id="logs" runat="server"/>

The above line of code should be placed in the <BODY> region of the page and within the <FORM> element. You can place the line code where you want the control to appear on the page. When you run the application the Web User control will be displayed on the page.