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
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 your choice 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 Forms page 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” mce_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.
