ASP .NET 4 Unleashed
Chapter 1
.aspx page: contains C# script and HTML code including <asp> tags.
Listing 1.1 FirstPage.aspx
Resulting HTML sent to browser.
Listing 1.1 FirstPage.aspx
Browser’s rendering of HTML code.
Elements of an ASP .NET Page• Directives – controls compilation
• Code declaration – contains application logic in C# or VB
• ASP .NET controls – most need to appear within a <form> tag in HTML portion
• Literal text and HTML tags – anything you can put in an HTML document
See pages 41-51
Directives• Preprocessing instructions that affect overall
behavior of pages and controls.• Directives have attributes that you can set for
affecting behavior
• Syntax: begin with @ symbol…..embed in <% %> tags with attributes:
<% @Directive attribute1 = “value” attribute2 = “value” %>
Every .aspx page will have a Page directive. One attribute of this directive indicates the language of its underlying code.
Listing 1.1 FirstPage.aspx
Listing 1.2 SendMail.aspx
The Import directive is used if you need to import a namespace.
Namespace a collection of related classes. In the Java world these are called packages.
Directives in ASP .NET
If the C# (or VB) code is held in the .aspx file, then it will be contained withing a <script> tag that is specified to run on the server. Here we have code written in C#.
Listing 1.1 FirstPage.aspx
An .aspx page is a web page, so it will contain HTML code (and could also contain JavaScript). So, you will see <head> and <body> and <form> tags, among others.
Listing 1.1 FirstPage.aspx
Unlike regular web pages, though, .aspx pages also include Web Server Controls. These will be represented by <asp:> tags of various sorts.
This is a Label, which ultimately renders a <span> tag in the final HTML that is sent to the client’s browser.
Listing 1.1 FirstPage.aspx
The id attribute of the <asp> tag determines the name of the corresponding C# or VB object in the corresponding code.
Listing 1.1 FirstPage.aspx
Page_Load is an event-handler method of the Page class. This is triggered when a page is going to be loaded.
Note the DateTime class…you should be familiar with this from CIS 221. You used many .NET framework classes then.
Listing 1.1 FirstPage.aspx
Buttons and User-Generated Events
Listing 1.6 ShowButtonClick.aspx
.aspx code
C# code
Listing 1.6 ShowButtonClick.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE THE BUTTON CLICK
Listing 1.6 ShowButtonClick.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER THE BUTTON CLICK
Listing 1.6 ShowButtonClick.aspx
This is the even-handler method for the button click
The Button web server control represented in an <asp> tag.
The Button control’s OnClick attribute identifies the name of the method that will be invoked when the button is clicked.
Listing 1.6 ShowButtonClick.aspx
Note that the Label initially has no text. However, when the button is clicked, the C# code assigns a value into the Label’s Text property, which will cause the text to appear.
Listing 1.6 ShowButtonClick.aspx
A Button control renders an HTML input tag.
A Label control renders an HTML span tag.
More with Buttons
Listing 1.7 ButtonCounters.aspx
.aspx code
Listing 1.7 ButtonCounters.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE THE BUTTON CLICK
Listing 1.7 ButtonCounters.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER SOME BUTTON CLICKS
Listing 1.7 ButtonCounters.aspx
Like the Label control, Button controls have a Text property that can be initialized in the .aspx code and dynamically altered during runtime.
Listing 1.7 ButtonCounters.aspx
In this example, both Button controls trigger the same event-handler. So, the event-handler needs to determine which button generated the event.
The sender parameter is a reference to the event-generating control (like e.getSource() in Java event-handler methods)
The code in the Button_Click method casts sender as a Button in order to set its Text property value.
Note how the value is set by converting to a number, adding to that number, then converting back to a string.
Web Controls in the API
• Almost all Web control classes are in the System.Web.UI.WebControls Namespace.
• Almost all of the Web Controls are subclasses of WebControl
Image Buttons and Event Arguments
Listing 1.8 ShowEventArgs.aspx
.aspx code
Listing 1.8 ShowEventArgs.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE BUTTON CLICK
Listing 1.8 ShowEventArgs.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER BUTTON CLICK
ViewState
• An ASP .NET approach to maintaining state between postbacks
• Keeps track of values in WebControl properties as you progress through postbacks
• Accomplished by automatically creating a hidden input tag and setting values, then using these values during postback
Listing 1.9 ShowViewState.aspx
.aspx code
Listing 1.9 ShowViewState.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE BUTTON CLICK
ViewState is an ASP.NET feature that enables the server controls to retain their state values across the form posts. For every ASP.NET Web Form, there will be a hidden form field called _VIEWSTATE. No matter whether the form contains any control or not, this hidden field exists as long as there is a form tag and the runat attribute set to server. The value of this hidden field contains all the state values of all the controls that are participated in the ViewState.
Listing 1.9 ShowViewState.aspxResulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER BUTTON CLICK
Note that the value of the _VIEWSTATE tag has changed…this is because values of server controls have been modified.
Listing 1.9 ShowViewState.aspxResulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER BUTTON CLICK
The _EVENTVALIDATION tag is a security feature. It verifies whether a postback from a control on client-side is really from that control and not from a malicious person trying to break your application. .
For more on _VIEWSTATE and _EVENTVALIDATION
• Read this link:
• http://msdn.microsoft.com/en-us/magazine/cc163512.aspx
NOTE: you can disable View State for the whole page. In the @ Page directive, enter this attribute: enableviewstate=“false”
Listing 1.11 DisableViewState.aspx
You can disable individual controls of the page. A Web Control’s EnableViewState property can be set to false
Listing 1.11 DisableViewState.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE BUTTON CLICK
Listing 1.11 DisableViewState.aspx
Resulting HTML sent to browser.
Although Label2’s values are updating, Label1’s are not, because it’s View State has been disables.
AFTER 3 BUTTON CLICKS
Listing 1.10 ShowTrace.aspx
Trace attribute in @Page directive causes the page to display with detailed software trace information.
Listing 1.10 ShowTrace.aspx
This example makes use of Calendar control.
Listing 1.10 ShowTrace.aspx
Resulting HTML sent to browser.
Note: some JavaScript is generated
Browser’s rendering of HTML code.
The Control Tree• Every web page (html or .aspx) is a hierarchy of
elements containing other elements containing other elements– The same is true for all markup documents (e.g. XML)
• Every element in an .aspx page is represented by ASP .NET via control classes (Web controls, HTML controls, or Literal controls)
• The trace shows the hierarchy of controls…this is called the Control Tree
Listing 1.13 ShowControlTree.aspx
.aspx code
Listing 1.13 ShowControlTree.aspx
HTML tags with runat=“server” are represented as HtmlControls.
Listing 1.13 ShowControlTree.aspx
<asp:> tags are represented by their corresponding WebControl-derived class.
Listing 1.13 ShowControlTree.aspx
Text in the document that is not an element with runat=“server” are represented as LiteralControls.
Listing 1.13 ShowControlTree.aspx
.This example makes use of a DropDownList, populated with ListItems.
Resulting HTML Resulting HTML after select
Listing 1.13 ShowControlTree.aspx
Resulting HTML sent to browser.
More About HTMLContols
Listing 1.5 HtmlControls.aspx
Note: by indicating runat=“server for an HTML element you turn it into an HtmlControl object. Therefore, you can manipulate its properties at runtime.
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
Listing 1.5 HtmlControls.aspx
Code-behind Files• In large-scale applications, it’s best to separate the
HTML/ASP code from the underlying C#/VB code.
• Code separation makes it possible for User Interface developers to work independently of Programmers.
• In .NET, this is accomplished through the use of code-behind files
Listing 1.14 FirstPageCodeBehind.aspx
Here we have the .aspx code (HTML with <ASP> tags only…no C# or VB code).
Listing 1.15 FirstPageCodeBehind.cs
This is a separate file. Program code is completely separated from HTML code.
Listing 1.15 FirstPageCodeBehind.cs
Code-behind classes are partial classes.
A partial class indicates that other parts of the class (e.g. the .aspx stuff) can be defined elsewhere.
The code-behind class is a subclass of Page, which is a class in the System.Web.UI namespace.
Listing 1.15 FirstPageCodeBehind.cs
The using keyword in C# is identical to the import keyword in Java.
Using namespaces is the same as importing packages.
Listing 1.15 FirstPageCodeBehind.cs
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE BUTTON CLICK
Listing 1.15 FirstPageCodeBehind.cs
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER BUTTON CLICK
Page Events
Important Page Events
• Init– Occurs when the page is initialized (i.e. loaded from its first access
from the browser), which is the first step in the its lifecycle. No controls within the page have been created yet, so they cannot be accesses or used.
• Load– Occurs every time the browser accesses the page (including
during postback). By now controls in the page have been created and are available for use.
• Unload– Occurs when the page is unloaded from memory. This is time to
do cleanup operations.• Others: Prerender, Disposed, CommitTransaction,
AbortTransaction, Error, DataBinding See page 44
Listing 1.16 ShowPageEvents.aspx
Order of event handler processing:1)Load2)Button click (only if submit)3)PreRender
Listing 1.16 ShowPageEvents.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE BUTTON CLICK
Listing 1.16 ShowPageEvents.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER BUTTON CLICK
Postback
• Postback means the Page is being requested via an HTTP Post (typically by clicking a submit button)
• When the page loads, you may want to do something ONLY if it is not a Postback (i.e. first time you come to the page)
• isPostback property can be used
Listing 1.17 ShowIsPostBack.aspx
This code will not happen if the submit button was clicked.
Using a dropdown list. No initialization of items in the markup.
Listing 1.17 ShowIsPostBack.aspx
Data binding a web control. In this case, a DropDownList is databound to an ArrayList
Listing 1.17 ShowIsPostBack.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
BEFORE SELECTION
Listing 1.17 ShowIsPostBack.aspx
Resulting HTML sent to browser.
Browser’s rendering of HTML code.
AFTER SELECTING ORANGES (the obvious choice)
Listing 1.18 ShowError.aspx
.aspx code
Listing 1.18 ShowError.aspx
Resulting HTML sent to browser.
Listing 1.18 ShowError.aspx
Browser’s rendering of HTML code.
Not an error if you’re Chuck Norris
Listing 1.21 PageTrace.aspx
.aspx code
Listing 1.21 PageTrace.aspx
Resulting HTML sent to browser.
Listing 1.21 PageTrace.aspx
Browser’s rendering of HTML code.