Web User Controls
User controls are those controls which we create and add to Web pages. Creating a user control for Web Application is very similar to creating a user control in Windows Application. User controls in ASP.NET are based on the System.Web.UI.UserControl class and the class hierarchy is as follows:
Object
Control
TemplateControl
UserControl
Object
Control
TemplateControl
UserControl
Creating User Controls
To create a user control select Project->Add Web User Control from the main menu to add it to an existing project. It looks like the image below.
You can also select File->New->Project->Visual Basic Projects->Web Control Library to create a new user control. The dialog box looks like the image below.
By default, user control files have an "ascx" extension. The following user control sample which we will create is a simple control that contains hyperlinks. While browsing the Internet you might notice some Web sites that have lots of links towards the bottom of the page and those links are found on each and every Web page of that site. For example, if you hit amazon.com you will notice 17-20 links towards the bottom of the page and on each and every page of amazon.com you will find those links. Creating such kind of links manually on each and every page of the site can be a pain as you need to make sure that each and every link works and none is broken. With a ASP.NET user control you can create just one control of that kind and add that to each and every page without creating the links manually on each and every page.
To start, add a user control file to the project selecting from Project->Add Web User Control and drag five hyperlink server controls from the toolbox on to the user control file (WebUserControl1.ascx). We are designing the user interface for the user control at this time. Select each hyperlink control and set it's NavigateUrl to a site of yourchoice and Target property to "_parent". The HTML view of this file looks like this:
| <%@ Control Language="vb" AutoEventWireup="false" Codebehind="WebUserControl1.ascx.vb"_ Inherits="asp.WebUserControl1" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> <asp:HyperLink id="HyperLink1" runat="server" Target="_parent"_ NavigateUrl="http://www.startvbdotnet.com">Startvbdotnet</asp:HyperLink> <asp:HyperLink id="HyperLink2" runat="server" Target="_parent"_ NavigateUrl="http://www.microsoft.com">Microsoft</asp:HyperLink> <asp:HyperLink id="HyperLink3" runat="server" Target="_parent"_ NavigateUrl="http://www.msdn.microsoft.com">MSDN</asp:HyperLink> <asp:HyperLink id="HyperLink4" runat="server" Target="_parent"_ NavigateUrl="http://www.msdn.microsoft.com/vbasic">Visual Basic Home</asp:HyperLink> <asp:HyperLink id="HyperLink5" runat="server" Target="_parent"_ NavigateUrl="http://www.msdn.microsoft.com/net">.NET Home</asp:HyperLink> |
Notice the code above, the code doesn't have any HTML elements like, <HEAD>, <BODY>, etc. By default Web user controls cannot contain the HTML tags that inlcude the <HTML>, <HEAD>, <BODY> and <FORM> tags.
Once you are finished designing the user interface it's now time to use the control. To use the newly created user control, in the Web Forms Designer, open the Web Formspage you want to add the control to, and make sure that the page is in Design View. Select the user control's file in Solution Explorer, and drag it onto the page. That add's the user control to the form. Note that because the Web User Control has not been compiled, VB doesn't know what it will look like at run time, so it gives it a generic apperance at design time. The image below displays that.
Adding a User Control Manually
We also can add a user control to a Web Forms page in HTML view. The procedure above demonstrated creation of a user control and adding it to a Web form by drag and drop feature. The following two steps will show you how to add it in code.
Register the user control
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="uc1" TagName="links" Src="WebUserControl1.ascx" %>
The values for each attribute mentioned on the above line of code are as follows:
TagPrefix: The TagPrefix determines a unique namespace for the user control. If multiple user controls on the page happen to have the same name, they can be differentiated from each other using this
TagName: The TagName is the name for the user control. This name is used along with the tag prefix to uniquely identify the namespace for the control
Src: Src attribute is the virtual path to the user control
<%@ Register TagPrefix="uc1" TagName="links" Src="WebUserControl1.ascx" %>
The values for each attribute mentioned on the above line of code are as follows:
TagPrefix: The TagPrefix determines a unique namespace for the user control. If multiple user controls on the page happen to have the same name, they can be differentiated from each other using this
TagName: The TagName is the name for the user control. This name is used along with the tag prefix to uniquely identify the namespace for the control
Src: Src attribute is the virtual path to the user control
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:links id="links1" 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.
<uc1:links id="links1" 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.
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.
Register the user control
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.
No comments:
Post a Comment