Post on 25-Feb-2016
description
transcript
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.