This document discusses ASP.NET server controls. It begins with an overview of client-server architectures on the internet and a comparison of ASP and ASP.NET. It then covers the ASP.NET architecture and the different types of ASP.NET server controls including basic web controls, list controls, data controls, rich controls and validation controls. Examples are provided of creating user controls and custom controls to add dynamic functionality and reusable components to ASP.NET applications.
2. Agenda
Introduction about internet & client
server architecture.
Comparison between Asp.NET & ASP.
ASP.NET Architecture.
Asp. Net Server Controls.
Proc of using controls.
Example.
3. The Internet
The Internet is a vast interconnected
collection of computer networks of
many different types.
It is the dominant distributed system at
the current time.
World’s largest client/server
application.
4. Client/Server Architectures
Application is modeled as a set of
services that are provided by servers
and a set of clients that use these
services
Clients know the servers but the
servers do not need to know all the
clients
s1
s2 s3
s4
c1
c2 c3 c4
c5
c6
c7 c8
c9
c10
c11
c12
Client process
Server process
5. Microsoft and DS
ASP.NET Web services and .NET
Remoting are the generic ways to build
distributed applications.
6. “Classic” ASP
Successes
Simple procedural programming model
No compiling, just save
Support for multiple scripting languages
Mix HTML and code
8. ASP.NET
ASP.NET is a web application
framework developed and marketed by
Microsoft to allow programmers to
build dynamic web sites, web
applications and web services.
First released in January 2002 with
version 1.0 of the .NET Framework, and
is the successor to Microsoft's Active
Server Pages (ASP) technology.
9. ASP.NET part of .NET Framework
Base Class Library
Common Language Specification
Common Language Runtime
ADO.NET: Data and XML
VisualStudio.NET
ASP.NET: Web Services
and Web Forms
Windows
Forms
Visual Basic® C++ C# JScript® …
10. Elements of an ASP.NET
application three-tier architecture
HTML pages
.aspx
User controls
.ascx
Style sheets
.css
Code behind
for .aspx files
.aspx.cs
Code behind
for user
controls
.ascx.cs
Other classes
.cs
Database
classes
.cs
DatabaseDatabase
layer
Business Rules
Layer
Presentation
layer
11. How ASP.NET applications
work
When IIS receives an HTTP request for an ASP.NET
page, it forwards the request to ASP.NET. ASP.NET
then creates and executes a compiled page that
combines the page class with the compiled C# code.
When the compiled page is executed, an instance of
the ASP.NET page class is generated. Then,
ASP.NET the appropriate events, which are
processed braises y the event handlers in the page.
Finally, the page generates the HTML that’s passed
back to IIS.
The ASP.NET page is compiled only the first time
it’s requested. After that, the page is run directly
from the DLL file.
18. ASP.NET
Features .. cont
Simplified browser support
Simplified form validation
Code behind pages
More powerful data access
Simplified configuration
20. What Is A Server Control?
A server control is a .NET component
that is used to generate the user
interface of an ASP.NET Web
application.
Controls range in complexity and
power: button, text, drop down,
calendar, data grid, ad rotator,
validation
It is implemented as a managed class
deriving directly or indirectly from the
System.Web.UI.Control base class.
21. What Is A Server Control?
Speaking More Practically…
A Web user interface element
Renders into HTML, script or a different markup format
Allows customization of rendering
A Web user interface component
Exposes properties, events and methods and is
programmable
Provides higher level abstractions
Performs post-back processing
Handles differences between browsers
Consistent programming model
22. ASP.NET Server App
Raising A Server Event
Mapping a browser event to server event
Click!
Button1
Control
Control
Control
Button1.RaisePostBackEvent()
calls OnClick()
invokes event handler
Button1_Click()
Controls registered to receive
post-back event notification
IPostBackEventHandler
HTTP form post
23. ASP.NET Server Controls
Organized into logical families
• HTML controls
• Controls / properties map 1:1
with HTML
• Web controls
• Richer functionality
• More consistent object model
24. HTML Server Controls
HTML elements exposed to the server for
programming, with an object model mapping to the
element
Additional attribute runat=“server”
HTML controls map one-to-one to HTML elements
HTML server controls are primarily used when
migrating older ASP pages to ASP.NET.
26. Web Server Controls
ASP.NET Web server controls are
objects on ASP.NET Web pages that
run when the page is requested and
that render markup to a browser.
Many Web server controls resemble
familiar HTML elements, such as
buttons and text boxes.
Other controls encompass complex
behavior, such as a calendar controls,
and controls that manage data
connections.
27. Web Server Controls
Web server controls offer more functionality
than HTML controls.
Consistent object model
Richer functionality
E.g. AutoPostBack, additional methods
Label1.BackColor = Color.Red;
Table.BackColor = Color.Blue;
28. How Web controls appear ..
Web controls appear in HTML markup as
namespaced tags
Web controls have an asp: prefix
Defined in the System.Web.UI.WebControls
namespace
This namespace is automatically mapped to
the asp: prefix
<asp:button onclick="button1_click“ runat=server>
<asp:textbox onchanged="text1_changed“ runat=server>
31. Properties To Controls Display
Web Controls provide extensive
properties to control display and
format, e.g.
Font
BackColor, ForeColor
BorderColor, BorderStyle,
BorderWidth
Style, CssClass
Height, Width
Visible, Enabled
33. 2 Ways To Author
Server Controls
User Controls
Simple, declarative authoring model (.ascx file)
Scoped to a single application
Well suited to static content and layout
“Custom” or Compiled Controls
Code-based authoring model (.cs or .vb class file)
Easily shared across applications
Well suited to dynamic or programmatic
generation of content and layout
More complex, but also more capabilities
34. Web User Controls
What they are:
Similar in functionality to ASP include
files but much better.
Encapsulate HTML and code into smaller
functional units.
Built similar to web forms but hosted on a
page as an object.
Reusable within the web project that
hosts them.
35. Two part entry into the aspx page
Part 1: The declaration.
<%@ Register TagPrefix="uc1" TagName="PageHeader"
Src=“_PageHeader.ascx" %>
TagPrefix: This is like a namespace in case you want to include
other controls with the same name. Usually defaults to uc1.
TagName: Again its only significance is to help uniquely identify
the control on the page. Usually defaults to the name of the
class.
Src: Let’s the page know where it can find the ascx file that goes
with the control.
36. Two part entry into the aspx page
Part 2: The actual control tag.
<uc1:pageheader id="_PageHeader1" runat="server" />
TagName
TagPrefix
Required if manipulating on Server
Unique instance identifier
37. Create Custom Controls
Creating your own controls can
simultaneously improve the quality of
your Web applications, make you more
productive and improve your user
interfaces.
Next Slide will discuss create HTML5
video Player controls.
38. HTML video player
ASP.NET custom controls are more
flexible than user controls.
We can also share a custom control
among projects.
create our custom control in a web
custom control library that is compiled
separately from our web application.
we can add that library to any project
in order to use our custom control in
that project.
39. HTML video player
The controls attribute is for adding
play, pause and volume controls.
Autoplay, controls, height, loop,
preload, src, width, poster.
43. Adding Properties
VideoUrl: A string property which specifies the URL of
the video to play.
PosterUrl: A string property which specifies the address
of an image file to show while no video data is available.
AutoPlay: A boolean property to specify whether the
video should automatically start playing or not, when the
webpage is opened.
DisplayControlButtons: A boolean property that
specifies whether the player navigation buttons are displayed
or not.
Loop: A boolean property that specifies whether the video
will start over again or not, every time it is finished.
45. Creating the Render Contents
Method
The primary job of a server control is
to render some type of markup
language to the HTTP output stream,
which is returned to and displayed by
the client.
The overridden RenderContents
method is the primary location where
we tell the control what we want to
render to the client.
46. Creating the Render Contents
Method
protected override void RenderContents(HtmlTextWriter output) { }
RenderContents method has one method
parameter called output. This parameter is
an HtmlTextWriter object, which is what the
control uses to render HTML to the client.
The HtmlTextwriter class has a number of
methods you can use to render your HTML,
including AddAttribute and
RenderBeginTag.
53. Types of Web Controls
Types of Web Controls
Basic Web controls
List controls
Data Controls
Rich controls
Validation controls
54. Basic Web Controls
Are rendered to simple HTML elements, provides
additional server-side functionality for a developer.
Basic Web controls provide the same functionality as their
HTML server control counterparts. However, basic Web
control include additional methods, events, and properties
against which you can program.
Supported controls
<asp:button>
<asp:imagebutton>
<asp:linkbutton>
<asp:hyperlink>
<asp:textbox>
<asp:checkbox>
55. Basic Web Controls ..cont
Label
Change text with the help of code.
TextBox
Can be used to display a single-line text
box, password text box, and multi-line
text box by selecting its mode.
The modes are mutually exclusive.
<%@ ValidateRequest="False" %>
56. Basic Web Controls ..cont
Button
OnClickRaises the Click event.
Form is submitted to the server
Private void Button_Click( s As Object, e As
EventArgs )
OnCommandRaises the Command event.
The form is submitted with values of the
CommandName and CommandArgument properties.
Private void Buttom_Command( s As Object, e As
CommandEventArgs )
Image
With the help of image control we can create image
maps.
Link Button
Rendered as Hyperlink
57. Basic Web Controls ..cont
RadioButton
One radio button can be selected from a
group
CheckBox
Multiple checkboxes can be selected at a
time
58. Basic Web Controls ..cont
TextBox, ListControl, CheckBox
and their subclasses don’t
automatically do a postback when
their controls are changed
Specify AutoPostBack=true to make
change events cause a postback
59. List Controls
Controls that handle repetition
Supported controls
Repeater, DataList and DataGrid
controls expose templates for
customization
60. List Controls ..cont
DropDownList
Acts as radio button list
Covers less space
List Box
Acts as Checkbox list
Selection Mode enables multiple
selection in the list.
61. Rich Controls
provide a rich user interface for
particular tasks.
Custom controls with rich
functionality
Supported Controls
<asp:calendar>
<asp:adrotator>
More will be added
63. Data Controls
Data access in ASP.NET 2.0 can be
accomplished completely declaratively
(no code) using the new data-bound
and data source controls.
There are new data source controls to
represent different data backends such
as SQL database, business objects,
and XML.
There are new data-bound controls for
rendering common UI for data, such as
gridview, detailsview, and formview..
64. Data Controls
Data source controls - these controls
provides data binding to different data
sources
Data view controls - these are various
lists and tables, which can bind to data
from data sources for display
66. Validation Controls
Why Validate?
Usability
Frustrating for the user
Data Integrity
Ensure your getting data in the format you
expect
Security
Keeping your forms from being used against
you or your users
Assume all input is evil
67. Validation Controls …cont
Cross Site Scripting Attack
Cross-site scripting allows hackers to run
malicious script in a client’s Web browser
Any Web page that renders dynamic HTML
based on content that users submit is
vulnerable
That script can then be executed by the
browser of an unsuspecting user. The
browser has know way of knowing that the
script shouldn’t be executed.
68. Where to Validate?
Server Side
CGI, ASP, .Net, Coldfusion, etc.
Pros
Ensures that every time the form is submitted, the
validation will run.
Allows for validation against other server resources,
such as a backend database and business rules.
Cons
Puts more load on the server.
Slower
69. Where to Validate?
Client Side
JavaScript
Pros
Processing is done on the client computer
Faster
Cons
Will not work if the user has it disabled
Not a solution for security.
Not a good solution for data integrity.
70. When Server Side is also Client Side
Many server side controls will produce
JavaScript for validation when the page is
served.
Asp.net form field with validation
<form runat="server">
Email:<asp:textbox id="txtEmail" size="20" runat="server"/><br>
<ASP:RequiredFieldValidator ControlToValidate="txtEmail" Display="Static"
ErrorMessage="*Email is a required field."
runat="server"/>
Resulting form on Page
<form name="_ctl0" method="post" action="name_email1.aspx"
language="javascript" onsubmit="ValidatorOnSubmit();" id="_ctl0">
<script language="javascript" type="text/javascript"
src="/aspnet_client/system_web/1_0_3705_6018/WebUIValidation.js"></
script>
Server Side Validation : Page.IsValid “ Gets a value
indicating whether page validation succeeded”.
71. Validation Controls …cont
provide a way to reduce the number of
server round-trips by adding client side
validation code
<asp:RequiredFieldValidator>
Ensures that a value is entered
Display properties
Dynamic, static or none
Comparing to an Initial Value
Set InitialValue property
72. Validation Controls …cont
<asp:RegularExpressionValidator>
Tests if value matches a predefined pattern
Validating email (haidermujtaba@hotmail.com)
S+@S+.S+
Specifying length
S{0,10}
Digits
d{5}
73. Validation Controls …cont
<asp:CompareValidator>
Compares value against constant, another
control or data type
<asp:RangeValidator>
Checks if value is within minimum and
maximum values
<asp:ValidationSummary>
Displays list of validation errors in one place
<asp:CustomValidator>
Lets you create custom client- or server-side
validation function
74. Validation Controls …cont
Validation controls are derived from
System.Web.UI.WebControls.BaseValidato
r, which is derived from the Label
control
Validation controls contain text which
is displayed only if validation fails
Text property is displayed at control
location
ErrorMessage is displayed in
summary
75. Validation controls offer the following
advantages:
You can associate one or more validation
controls with each control that you want to
validate.
The validation is performed when the page
form is submitted.
You can specify programmatically whether
validation should occur, which is useful if
you want to provide a cancel button so that
the user can exit without having to fill valid
data in all of the fields.
The validation controls automatically detect
whether validation should be performed on
the client side or the server side.
78. Pros
All Web Controls follow a rich object
model that provides type-safe
programming capabilities.
Web Controls are able to raise a
greater variety of server-side events.
Some controls (DataGrid, repeater, etc)
have the ability to define your own look
for the control using templates.
Web Controls are extensible, meaning
that you can create your own Web
Controls
79. Pros
Developers don’t need any web
experience to write web apps.
Developers can focus on their
application -NOT on maintaining the
illusion of a state ful windows
application via web forms.
Maintainable, reusable code. That mix
of VBScript and HTML that worked OK
for simple jobs but was unmanageable
for serious jobs has gone.