ASP.NET Controls

Slide 2

Lecture Overview Identify the types of controls supported

by ASP.NET and the differences between them

Slide 3

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

Slide 4

HTML Controls Always map directly to HTML tags All attributes are strictly compatible

with HTML They allow you to perform

‘some’ server side processing

Slide 5

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

Slide 6

Categorizing Server Controls

ASP.NET CONTROLS

HTML CONTROLS

WEB CONTROLS

Slide 7

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>

Slide 8

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

Slide 9

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

Slide 10

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

Slide 11

ASP.NET Server Controls(Event Wiring 1) ASP.NET Server controls have support

events similar to their desktop countertops

Names Match

Slide 12

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

Slide 13

ASP.Net Server Controls (Properties 2) The Style property contains references

to a collection of CSS styleMyControl.Style[“border-color”] = blue;

The CssClass property contains the name of a defined CSS class

txtStyleDemo1.CssClass = "TextBox"

Slide 14

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

Slide 15

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

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

ASP Menu

Slide 20

ASP CheckBox Determine whether the box is check by

reading the Checked property Set AutoPostBack to true to handle the onCheckedChanged event

Slide 21

ASP DropDownList

Slide 22

ASP RadioButton

Slide 23

Help Pages (Note)

Slide 24

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

Slide 25

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

Slide 26

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>

Slide 27

HTML Control (Example) Mark a <div> tag as a servers-side

control

Store the date as the control’s inner HTML

Slide 28

Slide 29

Using Server Controlswith 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

Slide 30

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

Slide 31

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

Slide 32

RegisterClientScriptInclude Again, the code appears at the

beginning of the page Use to grab a bunch of JavaScript from a

file

Slide 33

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>

Slide 34

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

Slide 35

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

Slide 36

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.