web controls chapter-7. page 2 synopsis stepping up to web controls basic web control classes ...

Web Controls Chapter-7

Synopsis

Stepping Up to Web controls

Basic Web control classes

Web control classes

Web control Base class

Units, Enumerated values,colors,Fonts

www.tech.findforinfo.com


They Provide rich user interface design

A web control is a programmed object but doesn’t correspond to a single HTML tag.Eg Calendar or DataGrid control.

They Provide a consistent object model

The simple textbox can be created by one of the three elements

All the above three elements are consolidated as a single text box

<textarea>,<input type=“text”> <input type=“password”>



The tailor their output automatically

ASP.NET recognizes the type of the browser and adjusts the HTML code.The details of the client need not to be known

They Provide high level features

The Web controls provide access to the additional events,properties,and methods


Basic Web Control Classes

Control class Underlying HTML element

Label <span>

Button <input type=“submit”> & <input type=“button”>

Text Box <input type=“text”> & <input type=“textarea”> or<input type=“password>

Check Box <input type=“checkbox”>

RadioButton <input type=“radio>

HyperLink <a>

LinkButton <a> with a contained <img> tag

ImageButton <input type=“image”>

Image <img>


Control class Underlying HTML element

ListBox <select size=“X”> where X is the number of rows

DropDownList <select>

CheckBoxList A list or <table> with multiple <input type=“checkbox”> tags

RadioButtonList A list or <table> with multiple <input type=“radio”> tags

Panel <div>

Table,TableRow

And TableCell

<table>,<tr>,<td> or <th>

Basic Web Control Classes


The Web control tags

ASP.Net tags have a special format

Always begin with the prefix asp: followed by the class name.

If there is no closing tag they must end with />

Any attribute on the tag corresponds to the control property

Apart from the runat=“server” attribute which declares the control will be processed on the server

<asp:TextBox id=“textbox1” runat=“server” />


The Web control tags

Alternatively some text could be placed ,set the size property,make it readonly,change the background color

TextBox.TextMode property allows you to specify • SingleLine(the default)

• MultiLine(For text area)

• Password(For an input control that displays only asterisk)

<asp:TextBox id=“textbox1” BackColor=“Yellow” text=“HelloWorld”ReadOnly=“True” TextMode=“MultiLine Rows=“5” runat=“server”


Base Controls

ButtonCheckBoxRadioButtonHyperlink Image ImageButtonRepeaterAdrotatorCalendar

LabelLinkButtonPanelTableTableCellTableRowTextBox


Web Control Classes

Web control classes are defined in the System.Web.UI.WebControls namespace

ListControl– CheckBoxList

– RadioButtonList

– ListBox

– DropDownList

• BaseDataList

Gridview

Repeater

Formview


BaseValidator

Compare Validator

Custom Validator

Range Validator

Regular Expression Validator

Required Field Validator

Validation Summary


The Web Control base class

All Web controls begin by inheriting from the WebControl base class

This class defines the essential functionality



Property DescriptionAccess Key Specifies the key board shortcut as one letter.Eg if

you set this to “Y”,the ALT-Y keyboard combination will change focus

BackColor,BorderColor and ForeColor

Sets the appropriate color

Foreground color is used for text

BorderWidth Specifies the size of the control border

Border Style Some of the styles are Dashed,Dotted,Double,Groove,Ridge,

Inset,Outset,Solid and None

Enabled When set to false the control will be visible but will not be able to receive the input from the user



Property DescriptionEnableViewState True:The control uses the hiddenfield to store

information about properties

Font Specifies the font to be rendered, System.Drawing.Font.Object

Height and Width Specifies the width and height of the control

Page Provides a reference to the web page that contains this control as a System.Web.UI.Page object

TabIndex A number that controls the tab order. The control with the tab index 0 has the focus when the page is loaded. Pressing tab the focus is transferred to the next control with the next tab index

ToolTip Displays a text message when the user hovers the mouse over the control

Visible When set to false the control will be hidden and will not be rendered to the final HTML page that is sent to the client


Units

All the properties that use measurements including BorderWidth,Height and width use the special Unit structure

When setting the unit in a control tag make sure you add (pixels)px and percentage(%) to number to indicate the type of unit

<asp:Panel Height =“300 px” Width=“50%” id=“pn1” runat=“server” />

pn1.Height=Unit.Pixel(300)pn1.Width=Unit.Percentage(50)


Enumerated Values

Enumerations are used in .NET class library group together a set of related constants

Predefined collections of options for particular property

Eg BorderStyle Property

The style can be choosen from the predefined values

Dashed

Solid

Inset

Outset

Ctrl1.BorderStyle=BorderStyle.Dashed


Colors

The color property refers to the color object from the System.Drawing namespace.

The color object can be created in different ways

Using ARGB(alpha,red,green,blue) –Specify each value as integer

Using a predefined .NET color name-Choose the color from the Color class

Using HTML class-You specify this value as a string


Fonts

The font property refers to the FontInfo object from the System.Drawing namespace

Property Description

Name A string indicates the font name(such as “Arial”)

Size The size of the font

B,I,U,StrikeOut Font style


List Controls

CheckboxList control – default multiple selection

RadioButtonList Control -default single selection

ListBox -default single selection [Multiple selection possible SelectionMode property]

Dropdown List - default single selection


Table Object Hierarchy

Table Object

Table Cell

Controls

Table Cell

Controls

Table Cell

Controls

Table Row


AutoPostBack

How can you write server code that will react to an event that occurs on the client?

The answer is new innovation called the automatic postback

The Automatic postback submits the page back to the server when it detects a specific user

Here a new updated page is created

All input controls support the Autopostback


The following controls that support AutoPostBack

Events Web controls

Click Button,ImageButton

TextChange TextBox

CheckChanged CheckBox,RadioButton

SelectIndexChanged All list controls


Page processing sequence

Webclient

Page objectcreated

Page load Handler

Final PageIs rendered

Page objectcreated

Page load Handler

Run the eventhandler

Final PageIs rendered

HTML output

rendered

Page Postback


The PostBack processing sequence

The page object is created from the aspx file

Page.Init event occurs

Controls are populated with information from the viewstate

Page.Load event occurs

All the other events occur

Page.Prerender event occurs

Control information is stored in the viewstate

HTML page is rendered

Page.Unload event occurs

Page object is released from memory


How Postback event works

The AutoPostBack feature uses JavaScript function named _doPostback

ASP.NET adds the script automatically to the controls that are set to use the AutoPostBack property

It also adds two additional hidden input fields that are used to pass the information back to the server

Namely ID and value


ViewState


How Postback event works

Finally the control that has the AutoPostBack property set is connected to the script using the OnClick or OnChage attribute

To say in other words ASP.NET converts the client-side Java script event into server side ASP.NET event using the function

All the above process were done manually in traditional ASP but in ASP.NET framework everything is automatic


What happens when the user changes the control that has set the AutoPostBack property

On the client side the Javascript is invoked and the page is resubmitted to the server

ASP.NET recreates the page object for the .aspx file

ASP.NET receives the state information from the hidden field

Updates the control accordingly

The Page.load event is fired

The appropriate change event is fired for the control

The Page.Unload event fires and the page is rendered (Transmitted as a set of objects to HTML)

The new page is sent to the client


web controls chapter-7. page 2 synopsis stepping up to web controls basic web control classes ...

Documents