Asp.net server controls

ASP.NET Server Controls
Prepared By:
Eng. Raed T Aldahdooh
Overview About the key concepts ASP.NET server
controls.

Agenda
 Introduction about internet & client
server architecture.
 Comparison between Asp.NET & ASP.
 ASP.NET Architecture.
 Asp. Net Server Controls.
 Proc of using controls.
 Example.

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.

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

Microsoft and DS
 ASP.NET Web services and .NET
Remoting are the generic ways to build
distributed applications.

“Classic” ASP
Successes
 Simple procedural programming model
 No compiling, just save
 Support for multiple scripting languages
 Mix HTML and code

“Classic” ASP
Challenges
 Code readability
 Coding overhead
 Reuse “a simple file include model ”.
 Performance

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.

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® …

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

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.

ASP.NET
Architecture
ASPX
.ASPX

ASP.NET
Architecture
.ASPXCompiled

ASP.NET
Architecture
.ASPXCompiled .ASPXCompiled

Visual BasicSource
code
Compiler
C++C#
CompilerCompiler
Assembly
IL Code
Assembly
IL Code
Assembly
IL Code
Operating System Services
Common Language Runtime
JIT Compiler
Native Code
Managed
code
Unmanaged
Component
ASP.NET
Execution Model

ASP.NET
Features
 Powerful controls
 ASPX, ASP – side by side
 Simplified programming model
 Simplified deployment
 Better performance
 Security

ASP.NET
Features .. cont
 Simplified browser support
 Simplified form validation
 Code behind pages
 More powerful data access
 Simplified configuration

.NET Controls

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.

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

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

Organized into logical families
• HTML controls
• Controls / properties map 1:1
with HTML
• Web controls
• Richer functionality
• More consistent object model

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.

HTML Supported controls
 Supported controls
 <a>
 <img>
 <form>
 <table>
 <tr>
 <td>
 <th>
 <select>
 <textarea>
 <button>
 <input type=text>
 <input type=file>
 <input type=submit>
 <input type=button>
 <input type=reset>
 <input type=hidden>

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.

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;

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>

Code Behind
Code Behind
private void Button_Click( s As Object, e As EventArgs )
{
If (s.id == "btnHello“)
{
lblMessage.Text = "Hello!"
}
Else
{
lblMessage.Text = "Goodbye!"
}
}
ASPX PAGE:
<form Runat="Server">
<asp:button id="btnHello" Text="Say Hello!" OnClick="Button_Click" Runat="Server" />
<asp:button id="btnGoodbye" Text="Say Goodbye!" OnClick="Button_Click" Runat="Server" />
<asp:Label id="lblMessage" Runat="Server" />
</form>

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

Create Controls
• User controls
• Custom controls

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

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.

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.

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

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.

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.

HTML video player
 The controls attribute is for adding
play, pause and volume controls.
 Autoplay, controls, height, loop,
preload, src, width, poster.

Creating a Custom Control Project

Adding a Web Custom Control
to the Project
The new custom control vedioPlayer.cs is created

VedioPlayer.cs
Modifying the Class
Declaration Line

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.

Add the following code to the VideoPlayer class

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.

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.

Adding VideoPlayer Control to
the Visual Studio Toolbox

Placing the VideoPlayer
Control on ASP.NET Web
Page

Types of Web Controls
 Types of Web Controls
 Basic Web controls
 List controls
 Data Controls
 Rich controls
 Validation controls

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.
 <asp:button>
 <asp:imagebutton>
 <asp:linkbutton>
 <asp:hyperlink>
 <asp:textbox>
 <asp:checkbox>

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" %>

 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

 RadioButton
 One radio button can be selected from a
group
 CheckBox
 Multiple checkboxes can be selected at a
time

 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

List Controls
 Controls that handle repetition
 Repeater, DataList and DataGrid
controls expose templates for
customization

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.

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

Visual Studio Standard controls

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

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

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

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.

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

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.

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

 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

 <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}

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

 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

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.

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

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.

Example Of using
Server Controls
demo

Asp.net server controls

Recommended

More Related Content

What's hot (20)

Similar to Asp.net server controls (20)

Recently uploaded (20)

Asp.net server controls