Introduction to Web User Controls The ASP.NET server controls provide a great deal of functionality, but they cannot cover every situation. Web user controls enable you to easily define controls as you need them for your applications, using the same programming techniques that you use to write Web Forms pages. You can even convert a Web Forms page into a Web user control with a few modifications. (For details see Walkthrough: Converting a Web Forms Page to a User Control.) To make sure that a user control cannot be run as a standalone Web Forms page, user controls are identified by the file name extension .ascx. Note Web user controls are not to be confused with Web custom controls. For more information, see Recommendations for Web User Controls vs. Web Custom Controls. User Control Structure A Web user control is similar to a complete Web Forms page, with both a user interface page and a code-behind file. The user interface page differs from an .aspx file in these ways: The extension must be .ascx. The user control does not have <HTML>, <BODY>, and <FORM> elements in it (these elements must be in the hosting page). In every other way, a user control is like a Web Forms page. You can use the same HTML elements and Web controls on a user control that you do on a standard Web Forms page. For example, if you are creating a user control to use as a toolbar, you can put a series of Button Web server controls onto the control and create event handlers for the buttons. Creating Web User Controls You design Web user controls in much the same way that you design Web Forms pages. You can use the same HTML elements and Web controls on a user control that you do on a standard Web Forms page. However, the user control does not have <HTML>, <BODY>, and <FORM> elements in it, and the file name extension must be .ascx. To create a Web Forms user control 1. Create a Web project. For details, see Creating Web Projects. 2. On the Project menu, click Add Web User Control. Change the name as desired and click Open to open the control in the designer. 3. Add text and controls to the design surface. Any controls that you want to be able to access programmatically must be Web Forms server controls or HTML server controls. 4. Use the Web Forms Designer to set properties and create any code required for your control. Adding User Controls to a Web Forms Page You can add a Web user control to a Web Forms page in Design view by simply dragging the control from Solution Explorer and dropping it where you want it to appear in the page. The Web Forms Designer automatically adds an @ Register directive and a tag for the control to the page. From that point, the control becomes part of the page and is rendered when the page is processed. Also, the control's public properties, events, and methods are exposed to the page and can be worked with programmatically. You can also add user controls to a page programmatically. Note The user control must be in the same project as the Web Forms page. To add a user control to a Web Forms page 1. 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. 2. Select the user control's file in Solution Explorer, and drag it onto the page. To add a user control to a Web Forms page in HTML view 1. In the Web Forms Designer, open the Web Forms page you want to add the control to, and then switch to HTML view. 2. At the top of the page, before the <HTML> tag, add a directive that registers the control so it will be recognized when the page is processed. You use the directive to associate a name and a namespace with the Web user control by specifying TagPrefix, TagName, and Src location values. For example: Copy Code <%@ Register TagPrefix="uc1" TagName="menu" Src="menu.ascx" %> Put the directive in its own line. If there are no other directives, make it the first line in the file. The values for each attribute are listed in the following table. Attribute Description TagPrefix The TagPrefix determines a unique namespace for the user control, so that if multiple user controls on the page happen to have the same name, they can be differentiated from each other. This will be the prefix to the control's name (such as <myNameSpace:xxx>) in the tag. TagName The TagName is the name for the user control. This name is used in conjunction with the tag prefix to uniquely identify the namespace for your control, as in the following prefix:tagname element:<myNameSpace:myUserControl ... /> Src The Src attribute is the virtual path to the user control, for example "UserControl1.ascx" or "/MyApp/Include/UserControl1.ascx". 3. In the <BODY> portion of the file, create a tag for your control where you want the control to appear. Use the TagPrefix and TagName you registered in Step 2. Give your control an ID and set the attribute runat=server, as in the following example: Copy Code <uc1:menu id="Menu1" runat="server"/> 4. If your control has properties that you can set at design time, optionally set them by declaring their values in the tag: Copy Code <uc1:menu id="Menu1" runat="server" enabled=true /> 5. Proceed with designing the rest of your Web Forms page. You can switch to Design view to work with your page. The user control will be displayed using a glyph to indicate its location in the page, but will not display a WYSIWYG rendering in the designer. To edit the control, switch back to HTML view. Working with User Controls Programmatically The public properties, methods, and events of a user control that is registered in a page are exposed to the parent Web Forms page. By simply adding a declaration for the user control to the code-behind class for the Web Forms page, you can work with the complete object model of the user control to your page's code. To set a property of a user control in a Web Forms page 1. Select the user control file in Solution Explorer and drag it onto your page. Note the ID of the user control displayed in the page. 2. Press F7 to switch from Design view to the code-behind file. 3. In the Declarations area, add a line to declare the user control. For example, for a user control of type WebUserControl1 whose ID is myControl1: Copy Code // C# public class MyPage : System.Web.UI.Page { protected menu Menu1; Note The ID in the code-behind declaration must exactly match the ID for the user control in Design view. Now that you have a code declaration for the user control, all of the public properties, methods, and events of your user control are available, and will appear in the IntelliSense statement completion dropdowns. 4. Write code to call methods or set properties of your user control. For example: Copy Code // C# Menu1.Visible = true; Menu1.DataBind(); Adding User Controls to a Web Forms Page Programmatically To add Web user controls to a Web Forms page, you must perform some steps that you do not normally need when adding existing Web Forms server controls. For details, see Creating Instances of User Controls Programmatically.
评论