12 Asp.net Session17

Developing Web Applications Using ASP.NET Objectives In this session, you will learn to: Describe user controls and the underlying enabling technologies Create user controls Describe custom Web server controls and the underlying enabling technologies Create Web server controls Describe composite controls and how composite controls are created Create composite Web server controls Describe templated controls and the interfaces that enable their implementation Create templated controls

Ver. 1.0

Slide 1 of 21

Developing Web Applications Using ASP.NET User Controls A user control usually consists of: A number of Web Server controls and HTML controls Methods and properties to control the interaction between controls included in it Code to handle the user control events

User controls are created to encapsulate reusable logic for Web pages in your application. User controls have the following features: They are saved as files with a .ascx extension. They can contain code in the .ascx file or use a code-behind file. They do not contain , , or

tags. They have a <%@Control%> directive instead of <$@Page%> directive. Ver. 1.0

Slide 2 of 21

Developing Web Applications Using ASP.NET User Controls (Contd.) They inherit methods and properties from the System.Web.UI.UserControl class. They have a user interface, usually made up of Web server controls and HTML controls. They can be independently cached for enhanced performance.

A new user control can be added to a page by right-clicking the Web site folder in Solution Explorer and then selecting Add New Item. The user interface for the new control can be designed by using Design view or Source view. Event handlers and properties can be written in the code-behind file.

Ver. 1.0

Slide 3 of 21

Developing Web Applications Using ASP.NET User Controls (Contd.) If you want to share information between a user control and a page, you can create public properties for the user control. A user control can be added to a Web page by performing the following steps: Insert a <%@Register%> directive at the top of the page, underneath the <%@Page%> directive: <%@Register src=“~/controls/productselector.ascx” tagprefix=“AdvWorks” tagname=“productselector” %>

Insert the control in to the correct location on the page:

Ver. 1.0

Slide 4 of 21

Developing Web Applications Using ASP.NET Custom Web Server Controls Custom Web server controls provide an approach to reuse logic in an ASP.NET application. Custom Web server controls are: Written entirely by using managed code and have no markup files. Derived from System.Web.UI.Control, System.Web.UI.WebControl, or one of the existing Web server controls included with ASP.NET. Compiled into an assembly before deployment of the application.

Ver. 1.0

Slide 5 of 21

Developing Web Applications Using ASP.NET Custom Web Server Controls (Contd.) Custom Web server controls are different from User controls in the following ways: User controls are easier to create and lay out than Web server controls because they include markup. User controls may introduce delays at run time because controls are not compiled until the page is requested by the first user. Custom Web server controls provide better code security than user controls because they are deployed as compiled assemblies to the server.

Ver. 1.0

Slide 6 of 21

Developing Web Applications Using ASP.NET Custom Web Server Controls (Contd.) Custom Web server controls are written as classes. The first step to create a custom Web server control is to decide the class from which it will be derived. If the control is very similar to an existing Web server control, the control can inherit from the Web server control. If the control will have entirely new functionality, it should inherit from the Control class. To modify the HTML that is sent to the browser, you typically override the Render method. While creating a custom Web server control, you can use the App_Code directory to avoid repeated manual compilations. Once a custom Web server control is created, a developer can add it to the Toolbox, drag it to the design surface, and access its properties and events in the property browser. Ver. 1.0

Slide 7 of 21

Developing Web Applications Using ASP.NET Custom Web Server Controls (Contd.) To add a custom Web Server control to a page, you need to: 1. Use one of the following methods to register the control: Add a <%@Register%> directive to the Web page: <% Register tagPrefix=“AdvWorks” namespace=“AdventureWorks.Controls”%> Add tag in the Web.config file: <system.web> <pages> <pages> <system.web>

Ver. 1.0

Slide 8 of 21

Developing Web Applications Using ASP.NET Custom Web Server Controls (Contd.) 2. Add the control to the Web page by including the following markup at an appropriate position in the page:

Ver. 1.0

Slide 9 of 21

Developing Web Applications Using ASP.NET Composite Web Server Controls A composite Web server control has the following features: It has a user interface that is composed of several existing Web server controls. It is derived from the System.WebUI.WebControls.CompositeControl class. It creates the child control by overriding the CreateChildControls method. It is compiled into an assembly in the Bin folder before the deployment of the application.

Ver. 1.0

Slide 10 of 21

Developing Web Applications Using ASP.NET Composite Web Server Controls (Contd.) Comparison with Custom Web Server Controls Like custom Web server controls, a composite Web server control has no mark up fields and is implemented as a class in an assembly. Unlike custom Web server controls, a composite Web server control is composed almost entirely of a combination of existing Web server controls.

Ver. 1.0

Slide 11 of 21

Developing Web Applications Using ASP.NET Composite Web Server Controls (Contd.) Composite Web server controls are written as classes. The creation of composite Web server controls is very similar to the way in which you create custom Web server controls. Composite Web server controls can be compiled into their own assemblies or added to assemblies with other controls and classes. While creating a composite Web server control, you can use the App_Code directory to avoid repeated manual compilations.

Ver. 1.0

Slide 12 of 21

Developing Web Applications Using ASP.NET Composite Web Server Controls (Contd.) To add a composite Web server control to a Web page, you need to: 1. Define a class that derives from System.Web.UI.WebControls.CompositeControl. 2. Override the Render method of the class and invoke the RenderControl method of any child control you create.

To add a composite Web server control to a Web page, you need to: 1. Use one of the following methods to register the control: Use a <%@register %> directive on the page Use the tag in the Web.config file

1. Add the control to the page

Ver. 1.0

Slide 13 of 21

Developing Web Applications Using ASP.NET Templated Controls A templated control is a special kind of composite control. It allows developers to modify the layout of the user interface by defining their own templates. A templated control is written in the same manner as a composite control. In addition to the tasks performed for creating a composite control, you need to perform the following tasks to create a templated control: Implement one or more properties of the type System.Web.UI.ITemplate. Expose a public property of type Sysytem.Web.UI.Control (or a derived class) to act as the owner of the template.

Ver. 1.0

Slide 14 of 21

Developing Web Applications Using ASP.NET Templated Controls (Contd.) You can add a templated control to a Web page in the same manner as a composite control. You can also specify your own template within the control tags to display the data as you wish.

Ver. 1.0

Slide 15 of 21

Developing Web Applications Using ASP.NET Demo: Creating Controls for Web Applications Problem Statement: You are a developer in the Adventure Works organization, a fictitious bicycle manufacturer. You have been asked to assist in creating a new Business-to-Consumer (B2C) Web application and a related Business-to-Employee (B2E) extranet portal. Decisions on the design of the application have already been made. You have been asked to carry out a number of specific tasks in order to implement various elements of this design. As part of the first phase of the B2C development, you have been asked to develop various controls for the Web application.

Ver. 1.0

Slide 16 of 21

Developing Web Applications Using ASP.NET Demo: Creating Controls for Web Applications (Contd.) Solution: To solve this problem, you need to perform following tasks: 1. Create User Controls a. b. c. d.

Open the Adventure Works Web site. Add a new user control called SiteCompass to the Web site. Add a label to the SiteCompass user control at design time. Add code to create controls dynamically for the SiteCompass user control. e. Add a property to the SiteCompass user control. f. Add the SiteCompass user control to the TopLevel.master master page. g. Test the SiteCompass user control.

Ver. 1.0

Slide 17 of 21

Developing Web Applications Using ASP.NET Demo: Creating Controls for Web Applications (Contd.) 2. Create Web Server Controls a. Add a class file for the custom Web server control. b. Add a private method to the custom Web server control class to update the status displayed to the user. c. Add an override method for RenderContents method of the Web server control. d. Add a public property for the custom Web server control. e. Write code to add the custom Web server control to the page at run time. f. Test the custom Web server control.

2. Create Composite Web Server Controls a. Modify the custom Web server control to inherit from the Composite Control class. b. Declare and add child controls to the ServiceChecker class. c. Add an event handler for a child control. d. Render the child control. e. Test the composite control.

Ver. 1.0

Slide 18 of 21

Developing Web Applications Using ASP.NET Demo: Creating Controls for Web Applications (Contd.) 4. Create Templated Controls a. b. c. d.

Modify the ServiceChecker class to support templates. Define a default template. Implement the template logic. Test the templated control when no template is supplied by the consumer of the control. e. Test the templated control when a custom template is supplied by the consumer of the control.

Ver. 1.0

Slide 19 of 21

Developing Web Applications Using ASP.NET Summary In this session, you learned that: A user control usually consists of a number of Web server controls and HTML controls, as well as method and properties to control the interaction between these controls. A user control can be added to a page by inserting a < %@Register%> directive at the top of the page and inserting the control at the correct location. Custom Web server controls are written entirely by using managed code and have no markup file. The class created for custom Web server controls is derived from existing Web server controls, or the Control class, .or the WebControl class.

Ver. 1.0

Slide 20 of 21

Developing Web Applications Using ASP.NET Summary (Contd.) To add a custom Web server control to a page, you need to first register the control in the Web page or in the Web.config file. A composite controls has a user interface that is composed of several existing Web server controls. The process of creating and adding a composite Web server control to a page is similar to the process of adding a custom Web server control. A templated control is a composite control, that allows a developer to change its layout. Developers can change the layout of a templated control by defining a template for the control.

Ver. 1.0

Slide 21 of 21