ASP.NET 4 Unleashed Chapter 1. .aspx page: contains C# script and HTML code including tags. Listing...

Preview:

Citation preview

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.