Web Controls Chapter-7. Page 2 Synopsis Stepping Up to Web controls Basic Web control classes ...
-
Upload
william-parker -
Category
Documents
-
view
216 -
download
2
Transcript of Web Controls Chapter-7. Page 2 Synopsis Stepping Up to Web controls Basic Web control classes ...
Web Controls Chapter-7
Page 2
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
Page 3
Stepping Up to Web controls
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”>
www.tech.findforinfo.com
Page 4
Stepping Up to Web controls
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
www.tech.findforinfo.com
Page 5
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>
www.tech.findforinfo.com
Page 6
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
www.tech.findforinfo.com
Page 7
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” />
www.tech.findforinfo.com
Page 8
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”
www.tech.findforinfo.com
Page 9
Base Controls
ButtonCheckBoxRadioButtonHyperlink Image ImageButtonRepeaterAdrotatorCalendar
LabelLinkButtonPanelTableTableCellTableRowTextBox
www.tech.findforinfo.com
Page 10
Web Control Classes
Web control classes are defined in the System.Web.UI.WebControls namespace
ListControl– CheckBoxList
– RadioButtonList
– ListBox
– DropDownList
• BaseDataList
Gridview
Repeater
Formview
www.tech.findforinfo.com
Page 11
BaseValidator
Compare Validator
Custom Validator
Range Validator
Regular Expression Validator
Required Field Validator
Validation Summary
www.tech.findforinfo.com
Page 12
The Web Control base class
All Web controls begin by inheriting from the WebControl base class
This class defines the essential functionality
www.tech.findforinfo.com
Page 13
The Web Control base class
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
www.tech.findforinfo.com
Page 14
The Web Control base class
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
www.tech.findforinfo.com
Page 15
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)
www.tech.findforinfo.com
Page 16
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
www.tech.findforinfo.com
Page 17
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
www.tech.findforinfo.com
Page 18
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
www.tech.findforinfo.com
Page 19
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
www.tech.findforinfo.com
Page 20
Table Object Hierarchy
Table Object
Table Cell
Controls
Table Cell
Controls
Table Cell
Controls
Table Row
www.tech.findforinfo.com
Page 21
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
www.tech.findforinfo.com
Page 22
The following controls that support AutoPostBack
Events Web controls
Click Button,ImageButton
TextChange TextBox
CheckChanged CheckBox,RadioButton
SelectIndexChanged All list controls
www.tech.findforinfo.com
Page 23
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
www.tech.findforinfo.com
Page 24
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
www.tech.findforinfo.com
Page 25
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
www.tech.findforinfo.com
Page 26
ViewState
www.tech.findforinfo.com
Page 27
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
www.tech.findforinfo.com
Page 28
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
www.tech.findforinfo.com