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

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,

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

Page  5 Basic Web Control Classes Control classUnderlying HTML element Label Button & Text Box & or Check Box RadioButton HyperLink LinkButton with a contained tag ImageButton Image

Page  6 Control classUnderlying HTML element ListBox where X is the number of rows DropDownList CheckBoxListA list or with multiple tags RadioButtonListA list or with multiple tags Panel Table,TableRow And TableCell,, or Basic Web Control Classes

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

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”

Page  9 Base Controls  Button  CheckBox  RadioButton  Hyperlink  Image  ImageButton  Repeater  Adrotator  Calendar  Label  LinkButton  Panel  Table  TableCell  TableRow  TextBox

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

Page  11 BaseValidator  Compare Validator  Custom Validator  Range Validator  Regular Expression Validator  Required Field Validator  Validation Summary

Page  12 The Web Control base class  All Web controls begin by inheriting from the WebControl base class  This class defines the essential functionality

Page  13 The Web Control base class PropertyDescription Access KeySpecifies 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 BorderWidthSpecifies the size of the control border Border StyleSome of the styles are Dashed,Dotted,Double,Groove,Ridge, Inset,Outset,Solid and None EnabledWhen set to false the control will be visible but will not be able to receive the input from the user

Page  14 The Web Control base class PropertyDescription EnableViewStateTrue:The control uses the hiddenfield to store information about properties FontSpecifies the font to be rendered, System.Drawing.Font.Object Height and WidthSpecifies the width and height of the control PageProvides a reference to the web page that contains this control as a System.Web.UI.Page object TabIndexA 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 ToolTipDisplays a text message when the user hovers the mouse over the control VisibleWhen set to false the control will be hidden and will not be rendered to the final HTML page that is sent to the client

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 pn1.Height=Unit.Pixel(300) pn1.Width=Unit.Percentage(50)

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

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

Page  18 Fonts  The font property refers to the FontInfo object from the System.Drawing namespace PropertyDescription Name A string indicates the font name(such as “Arial”) Size The size of the font B,I,U,StrikeOut Font style

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

Page  20 Table Object Hierarchy Table Object Table Cell Controls Table Cell Controls Table Cell Controls Table Row

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

Page  22 The following controls that support AutoPostBack EventsWeb controls ClickButton,ImageButton TextChangeTextBox CheckChangedCheckBox,RadioButton SelectIndexChangedAll list controls

Page  23 Page processing sequence Web client Page object created Page load Handler Final Page Is rendered Page object created Page load Handler Run the event handler Final Page Is rendered HTML output rendered Page Postback

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

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

Page  26  ViewState

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

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