12 asp.net session17

Developing Web Applications Using ASP.NET
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
Objectives

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 <html>, <body>, or <form> tags.
They have a <%@Control%> directive instead of <$@Page%>
directive.
User Controls

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.
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:
<AdvWorks:productselector id=“productSelector1”
runat=“server” customProperty=“true”/>
User Controls (Contd.)

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.
Custom Web Server Controls

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.
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.

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 <controls> tag in the Web.config file:
<system.web>
<pages>
<controls>
<add tagPrefix =“AdvWorks”
namespace=“AdventureWorks.Controls”/>
<controls>
<pages>
<system.web>

2. Add the control to the Web page by including the following
markup at an appropriate position in the page:
<AdvWorks:ProductSelector id=“ProductSelector1
runat=“server”/>

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.
Composite Web Server Controls

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.
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.

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 <controls> tag in the Web.config file
2. Add the control to the page

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.
Templated Controls

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.
Templated Controls (Contd.)

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.
Demo: Creating Controls for Web Applications

Solution:
To solve this problem, you need to perform following tasks:
1. Create User Controls
a. Open the Adventure Works Web site.
b. Add a new user control called SiteCompass to the Web site.
c. Add a label to the SiteCompass user control at design time.
d. 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.
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.
3. 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.

4. Create Templated Controls
a. Modify the ServiceChecker class to support templates.
b. Define a default template.
c. Implement the template logic.
d. 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.

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.
Summary

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.
Summary (Contd.)

12 asp.net session17

Recommended

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to 12 asp.net session17 (20)

More from Vivek Singh Chandel (19)

Recently uploaded (20)

12 asp.net session17