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)

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 style MyControl.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 Inside the list of create a list of 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 tag HtmlContainerControl – These are Tables and other controls that contain other controls See table 4-4 on page Other – Other controls such as

Slide 27 HTML Control (Example) Mark a tag as a servers-side control Store the date as the control’s inner HTML

Slide 28

Slide 29 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

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 The HTMLAnchor class implements tags tags designated runat=“server” and having an id will be seen by the server

Slide 34 HTML Controls The href property contains the link Store the text in InnerHtml or InnerText BusinessNews.HRef= " BusinessNews.Title = Business news channel"; BusinessNews.InnerHtml = " BusinessNews ";

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.