Transcript ASP.NET Controls

ASP.NET Controls
Lecture Overview

Identify the types of controls supported by
ASP.NET and the differences between them
Categorizing Controls

There are two types of controls used in
ASP.NET


HTML controls are standard HTML controls
understood by the browsers
ASP.NET (Web) controls are processed by the
server (IIS) and mapped to a complex array of
HTML controls
HTML Controls



Always map directly to HTML tags
All attributes are strictly compatible with
HTML
They allow you to perform
‘some’ server side
processing
Web Server Controls

Are implemented by the ASP server as .NET
Framework classes having a common .NET
programming interface


It works very similar to the desktop applications
Web Server controls often
have a richer
programming interface
Categorizing Server Controls
ASP.NET
CONTROLS
HTML CONTROLS
WEB CONTROLS
The runat Attribute

The runat attribute makes a server control a
server control


This is true for both HTML and Web controls
All tags without the runat attribute are
copied verbatim to the output stream (HTTP
response)

<asp:TextBox ID="TextBox3"
runat="server"></asp:TextBox>
Generalities

HTML controls and Web controls can
sometimes do the same thing



HTML controls can be used to conditionally
create client-side script
Web controls generally provide a ‘richer’
programmatic interface
We often use a mix of both
ASP.NET Server Controls (1)


These are unique to ASP.NET
All are contained in the
System.Web.UI.WebControls namespace



All derive from WebControl
runat=“server” attribute is required or the
markup will be rendered verbatim
The programming interface is intuitive and
feels like attaching event handlers to desktop
controls
ASP.NET Server Controls (2)

Controls are objects having methods,
properties and events



Buttons are clicked
SelectedIndexChanged fires for list boxes
and combo boxes
The wiring is a bit different
ASP.NET Server Controls
(Event Wiring 1)

ASP.NET Server controls have support events
similar to their desktop countertops
Names Match
ASP.NET Server Controls
(Properties 1)



ID – Name that will be used to reference the control
instance programmatically (It’s the Name property
that you are used to in VB)
Page – Page object on which the control resides
Parent – parent control instance
Use for container controls
Visible – Make the control instance visible or
invisible
EnableViewState defines whether contents are
persisted through view state



ASP.Net Server Controls
(Properties 2)
The Style property contains references to a
collection of CSS style
MyControl.Style[“border-color”] =
blue;



The CssClass property contains the name
of a defined CSS class
txtStyleDemo1.CssClass = "TextBox"
ASP.NET Server Controls
(Methods)




Focus – sets input focus to the control
instance when it is rendered
HasControls – denotes whether this
control instance has child controls
Controls – a collection of child controls
DataBind – binds the control instance to a
data source
ASP.NET Server Controls
(Events)





Same page and control events discussed in
the previous chapter
Init – First step in the life cycle
Load – occurs when the control is loaded into the
page
PreRender – fires just before the control is
rendered
Unload – control has been rendered. Use only to
close files or release connections
Web Forms Controls (List)

Buttons get clicked





LinkButton and Button
A menu does as the name implies
A CheckBox gets checked
You select items from a DropDownList
The RadioButton allows us to select an item
from a list of items
ASP Button and
LinkButton

Cause a post back by



Handing the OnClick event
Set the PostBackUrl to the desired page
(URL)
Handle the onCommand and use the value of
the CommandName property

Creates a multi-cast event handler
ASP Menu



Create an outer element named Menu
Inside the menu create an a list of <Items>
Inside the list of <Items> create a list of
<MenuItem>


Set the Text attribute to the visible menu item
text
Set the NavigateUrl attribute to the desired
page
ASP Menu
ASP CheckBox


Determine whether the box is check by
reading the Checked property
Set AutoPostBack to true to handle the
onCheckedChanged event
ASP DropDownList
ASP RadioButton
Help Pages (Note)
HTML Controls (Overview)

HTML controls are similar to ordinary HTML
controls

However, with the runat=“server” attribute
added


ASP.NET adds a programmatic way to interact
with the control instances on the server
ASP.NET controls are part of the
System.Web.UI.HtmlControls namespace
HTML Controls (Interface)


All HTML controls inherit from the
HtmlControl class
The properties are simple



Attributes returns a collection of attribute /
key value pairs
Style gets a CSS collection of applied CSS
properties
Disabled indicates whether the control is
disabled
HTML Controls (Categories)




HtmlInputControl – These represent the
variations of the <input> tag
HtmlContainerControl – These are
Tables and other controls that contain other
controls
See table 4-4 on page 113-114
Other – Other controls such as <img> <a>
HTML Control (Example)

Mark a <div> tag as a servers-side control

Store the date as the control’s inner HTML
Using Server Controls
with JavaScript



So far, we have seen both client and server controls
But how do we get client-side JavaScript into our
ASP.NET pages and call that code from the client?
 Include client-side script into script blocks
 Create dynamically with
RegisterClientScriptBlock and
RegisterStartupScript
As you will see, some controls rely on JavaScript to
operate (LinkButton) ASP generates the code
RegisterClientScriptBlock


Code is placed at the top of the page
Thus, the code executes “before” the page
has completely loaded

Good to register functions but bad for
referencing controls
RegisterStartupScript


Code is placed at the end of the page
Use when you want to reference other page
controls

Remember that HTML pages rendered and the
DOM is processed sequentially
RegisterClientScriptInclude


Again, the code appears at the beginning of
the page
Use to grab a bunch of JavaScript from a file
HTML Controls <a>


The HTMLAnchor class implements <a> tags
<a> tags designated runat=“server” and
having an id will be seen by the server
<a id="BusinessNews"
runat="server"></a>
HTML Controls <a>
The href property contains the link
 Store the text in InnerHtml or InnerText
BusinessNews.HRef=
"http://bloomberg.com";
BusinessNews.Title =
Business news channel";
BusinessNews.InnerHtml =
"<b>BusinessNews</b>";

HTML Input Controls

All input controls derive from
HtmlInputControl



Name is the read-only property containing the
control name
Type property mirrors the Type attribute
Value contains text appearing in the control
instance
The ServerChange event

It fires for most HTML controls to denote that
the control’s contents have changed from one
postback to the next

Use for check boxes, radio buttons, text boxes,
etc.