Beginning Microsoft Visual C# 2008 PHẦN 6 doc

Regardless of what the page configuration says, when the EnableViewState property is defined for the control, the control value is used.. You can define a name that is used to access the

Chapter 19: Basic Web Programming

639

The label labelResult again has a Text property where the result is set:

labelResult.Text = String.Format(“{0} {1} selected the event {2}”, firstName, lastName, selectedEvent);

Instead of displaying the results on the same page, ASP.NET makes it easy to display the results in a different page, as shown in the following Try It Out

Try It Out Displaying the Results in a Second Page

1 Create a new WebForm with the name ResultsPage.aspx

2 Add a label to the ResultsPage with the name labelResult

3 Add code to the Page_Load method to the class _ResultsPage as shown here:

public partial class _ResultsPage : System.Web.UI.Page{

protected void Page_Load(object sender, EventArgs e) {

try { DropDownList dropDownListEvents = (DropDownList)PreviousPage.FindControl(“dropDownListEvents”);

string selectedEvent = dropDownListEvents.SelectedValue;

string firstName = ((TextBox)PreviousPage.FindControl(“textFirstName”)).Text;

string lastName = ((TextBox)PreviousPage.FindControl(“textLastName”)).Text;

string email = ((TextBox)PreviousPage.FindControl(“textEmail”)).Text;

labelResult.Text = String.Format(“{0} {1} selected the event {2}”, firstName, lastName, selectedEvent);

} catch { labelResult.Text = “The originating page must contain “ + “textFirstName, textLastName, textEmail controls”;

} }}

4 Set the Default.aspx page ’ s Submit button ’ s PostbackUrl property to

ResultsPage.aspx

5 You can remove the Click event handler of the Submit button because it is not required

anymore

6 Start the Default.aspx page, fill in some data, and click the Submit button You are

redirected to the page ResultsPage.aspx , where the entered data is displayed

How It Works

With ASP.NET, the Button control implements the property PostbackUrl to define the page that

should be requested from the Web server This property creates client - side JavaScript code to request

the defined page with the client - side onclick handler of the Submit button:

< input type=”submit” name=”buttonSubmit” value=”Submit”

onclick=”javascript:webForm_DoPostBackWithOptions(

new WebForm_PostBackOptions( & quot;buttonSubmit & quot;,

& quot; & quot;, false, & quot; & quot;, & quot;ResultPage.aspx & quot;,

false, false))” id=”buttonSubmit” / >

The browser sends all the data from the form inside the first page to the new page However, inside the

newly requested page it is necessary to get the data from controls that have been defined with

the previous page To access the controls from a previous page, the Page class defines the property

PreviousPage PreviousPage returns a Page object, where the controls of this page can be accessed

using the FindControl() method FindControl() is defined to return a Control object, so you must

cast the return value to the control type that is searched:

DropDownList dropDownListEvents =

(DropDownList)PreviousPage.FindControl(“dropDownListEvents”);

Instead of using the FindControl() method to access the values of the previous page, access to the

previous page can be strongly typed, which is less error prone during development To make this

possible, the next Try It Out defines a custom struct that is returned with a property from the

default_aspx class

Try It Out Creating a Strongly Typed PreviousPage

1 Create the App_Code folder in the Web application by selecting the Web folder in the Solution

Explorer and selecting Website Add Folder App_Code Folder

2 In the Solution Explorer, select the App_Code folder and add a new C# file named

RegistrationInformation.cs by selecting Website Add New Item Class

3 Implement the struct RegistrationInformation in the file RegistrationInformation.cs

as shown:

public struct RegistrationInformation

{

public string FirstName { get; set; }

public string LastName { get; set; }

Chapter 19: Basic Web Programming

641

public string Email { get; set; } public string SelectedEvent { get; set; }}

4 Add the public property RegistrationInformation to the class _Default in the file

Default.aspx.cs :

public RegistrationInformation RegistrationInformation{

get { return new RegistrationInformation() {

FirstName = textFirstName.Text, LastName = textLastName.Text, Email = textEmail.Text, SelectedEvent = dropDownListEvents.SelectedValue };

}}

5 Add the PreviousPageType directive to the file ResultPage.aspx following the Page directive:

< %@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”ResultPage.aspx.cs”

Inherits=”ResultPage_aspx” % >

< %@ PreviousPageType VirtualPath=”~/Default.aspx” % >

6 Within the Page_Load() method of the class _ResultsPage , now the code can be simplified:

protected void Page_Load(object sender, EventArgs e) {

try { RegistrationInformation ri = PreviousPage.RegistrationInformation;

labelResult.Text = String.Format(“{0} {1} selected the event {2}”, ri.FirstName, ri.LastName, ri.SelectedEvent);

}

catch { labelResult.Text = “The originating page must contain “ + “textFirstName, textLastName, textEmail controls”;

} }

Input Validation

When users enter data, it should be checked to confirm that the data is valid The check can happen on

the client and on the server Checking the data on the client can be done by using JavaScript However,

if the data is checked on the client using JavaScript, it should also be checked on the server, because you

can never fully trust the client It is possible to disable JavaScript in the browser, and hackers can use

different JavaScript functions that accept incorrect input It is absolutely necessary to check the data on

the server Checking the data on the client as well leads to better performance, as no round - trips occur

to the server until the data is validated on the client

With ASP.NET it is not necessary to write the validation functions yourself Many validation controls

exist that create both client - and server - side validation

The following example shows the RequiredFieldValidator validation control that is associated

with the text box textFirstname All validator controls have in common the properties ErrorMessage

and ControlToValidate If the input is not correct, then ErrorMessage defines the message that is

displayed By default, the error message is displayed where the validator control is positioned The

property ControlToValidate defines the control where the input is checked

< asp:TextBox ID=”textFirstname” runat=”server” > < /asp:TextBox >

< asp:RequiredFieldValidator ID=”RequiredFieldValidator1” runat=”server”

ErrorMessage=”Enter your first name” ControlToValidate=”textFirstName” >

< /asp:RequiredFieldValidator >

The following table lists and describes all the validation controls:

Control Description

RequiredFieldValidator Specifies that input is required with the control that is

validated If the control to validate has an initial value set, which the user has to change, you can set this initial value with the InitialValue property of the validator control

RangeValidator Defines a minimum and maximum value that the user is

allowed to enter The specific properties of the control are

MinimumValue and MaximumValue

RegularExpressionValidator With the ValidationExpression property a regular

expression using Perl 5 syntax can be set to check the user input

Chapter 19: Basic Web Programming

643

Control Description

CompareValidator Compares multiple values (such as passwords) Not only

does this validator support comparing two values for equality, additional options can be set with the Operator property The Operator property is of type

ValidationCompareOperator , which defines enumeration values such as Equal , NotEqual , GreaterThan , and

DataTypeCheck Using DataTypeCheck , the input value can be checked to determine whether it is of a specific data type, e.g., correct date input

CustomValidator If the other validator controls don ’ t fulfill the requirements

of the validation, the CustomValidator can be used With the CustomValidator , both a client - and server - side validation function can be defined

ValidationSummary Writes a summary for a page instead of writing error

messages directly to the input controls

With the sample application that you ’ ve created until now, the user can input first name, last name, and

e - mail address In the following Try It Out, you extend the application by using validation controls

Try It Out Checking for Required Input and E-mail Address

1 Open the previously created project EventRegistrationWeb using Visual Studio

2 Open the file default.aspx

3 Add a new column to the table by selecting the right column in the Design View of the editor and choosing Table Insert Column to the Right

4 First name, last name, and e - mail address are required inputs A check is done to determine

whether the e - mail address has the correct syntax Add three RequiredFieldValidator controls and one RegularExpressionValidator control, as shown in Figure 19 - 9

Figure 19-9

5 Configure the validation controls as defined in this table:

Validation Control Property Value

Display Dynamic RegularExpressionValidator1

ValidationExpression \w+([ - +.’]\w+)*@\w+([

-.]\w+)*\.\w+([ - ]\w+)*

Display Dynamic

6 It is not necessary to enter the regular expression manually Instead, you can click the ellipsis

button of the ValidationEpression property in the Properties window to start the Regular

Expression Editor, shown in Figure 19 - 10 This editor provides some predefined regular

expressions, including the regular expression to check for an Internet e - mail address

Figure 19-10

Chapter 19: Basic Web Programming

645

7 If a postback is done to a page that is different from the page that includes the validator

controls (using the PostBackUrl property that was set earlier), in the new page you must verify that the result of the previous page was valid, using the IsValid property Add this code to the Page_Load() method of the _ResultsPage class:

protected void Page_Load(object sender, EventArgs e) {

try {

if (!PreviousPage.IsValid) {

labelResult.Text = “Error in previous page”;

return;

} //

8 Now you can start the application When data is not entered or not entered correctly, the validator controls show error messages, as shown in Figure 19 - 11

Figure 19-11

How It Works

The validator controls create both client - side JavaScript code to verify input on the client, and server - side code to validate input on the server It is also possible to turn JavaScript off by setting the validator property EnableClientScript to false Instead of changing the property with every validator control, you can also turn off JavaScript by setting the property ClientTarget of the

Setting the property ClientTarget can be done inside the Page_Load() method of the Page class:

protected void Page_Load(object sender, EventArgs e)

{

ClientTarget = “downlevel”;

}

State Management

The HTTP protocol is stateless The connection that is initiated from the client to the server can be closed

after every request However, normally it is necessary to remember some client information from one

page to the other There are several ways to accomplish this

The main difference among the various ways to keep state is whether the state is stored on the client or

on the server The following table shows an overview of state management techniques and how long the

state can be valid:

State Type Client or Server Resource Time Valid

is closed; permanent cookies are stored on the disk

of the client system

The session is invalidated with a timeout (by default, 20 minutes)

state is valid until the server restarts

However, when the cache should be invalidated, there ’ s much better control

Now let ’ s take a more detailed look at these techniques

Client - Side State Management

In this section, you are going to step into client - side state management by looking at two techniques:

ViewState and cookies

Chapter 19: Basic Web Programming

647

ViewState

One technique to store state on the client was already discussed: ViewState ViewState is used automatically by the Web server controls to make events work The ViewState contains the same state as the control when sent to the client When the browser sends the form back to the server, the ViewState contains the original values, but the values of the controls that are sent contain the new values If there ’ s

a difference, the corresponding event handlers are invoked

The disadvantage to using ViewState is that data is always transferred from the server to the client, and vice versa, which increases network traffic To reduce network traffic, ViewState can be turned off To do

so for all controls within the page, set the EnableViewState property to false with the Page directive:

< %@ Page Language=”C#” AutoEventWireUp=”true” CodeFile=”Default.aspx.cs”

Inherits=”_Default” EnableViewState=”false” % >

The ViewState can also be configured on a control by setting the EnableViewState property of a control Regardless of what the page configuration says, when the EnableViewState property is defined for the control, the control value is used The value of the page configuration is used only for these controls when the ViewState is not configured

It is also possible to store custom data inside the ViewState This can be done by using an indexer with the ViewState property of the Page class You can define a name that is used to access the ViewState value with the index argument:

ViewState[“mydata”] = “my data”;

You can read the previously stored ViewState as shown here:

string mydata = (string)ViewState[“mydata”];

In the HTML code that is sent to the client, you can see the ViewState of the complete page within a hidden field:

< input type=”hidden” name=” VIEWSTATE”

value=”/wEPDwUKLTU4NzY5NTcwNw8WAh4HbXlzdGF0ZQUFbXl2YWwWAgIDD2QWAg IFDw8WAh4EVGV4dAUFbXl2YWxkZGTCdCywUOcAW97aKpcjt1tzJ7ByUA==” / >

Using hidden fields has the advantage that every browser can use this feature, and the user cannot turn it off

The ViewState is only remembered within a page If the state should be valid across different pages, then using cookies is an option for state on the client

The following sample code shows how a cookie can be sent to the client First, an HttpCookie object is

instantiated In the constructor of this class, the name of the cookie is set — here it is mycookie The

HttpCookie class has a Values property to add multiple cookie values If you just have one cookie

value to return, you can use the Value property instead However, if you plan to send multiple cookie

values, it is better to add the values to a single cookie instead of using multiple cookies

string myval = “myval”;

HttpCookie cookie = new HttpCookie(“mycookie”);

cookie.Values.Add(“mystate”, myval);

Response.Cookies.Add(cookie);

Cookies can be temporary and valid within a browser session, or they can be stored on the client disk

To make the cookie permanent, the Expires property must be set with the HttpCookie object With the

Expires property, a date defines when the cookie is not valid anymore; here, it is set to a date three

months from the current date

Although a specific date can be set, there is no guarantee that the cookie is stored until the date is

reached The user can delete the cookie, and the browser application also deletes the cookie if too many

cookies are stored locally The browser has a limit of 20 cookies for a single server, and 300 cookies for all

servers When the limit is reached, the cookies that haven ’ t been used for some time are deleted

HttpCookie cookie = new HttpCookie(“mycookie”);

cookie.Values.Add(“mystate”, “myval”);

cookie.Expires = DateTime.Now.AddMonths(3);

Response.Cookies.Add(cookie);

When the client requests a page from the server, and a cookie for this server is available on the client, the

cookie is sent to the server as part of the HTTP request Reading the cookie in the ASP.NET page can be

done by accessing the cookies collection in the HttpRequest object

Similarly to the HTTP response, the Page class has a Request property that returns an object of type

HttpRequest The property Cookies returns an HttpCookieCollection that can now be used to read

the cookies sent by the client A cookie can be accessed by its name with the indexer, and then the

Values property of the HttpCookie is used to get the value from the cookie:

HttpCookie cookie = Request.Cookies[“mycookie”];

string myval = cookie.Values[“mystate”];

ASP.NET makes it easy to use cookies, but you must be aware of the cookie ’ s restrictions Recall that

a browser accepts just 20 cookies from a single server and 300 cookies for all servers There ’ s also a

restriction regarding the size of a cookie, which cannot store more than 4K of data These restrictions

ensure that the client disk won ’ t be filled with cookies

Server - Side State Management

Instead of remembering state with the client, it is also possible to remember state with the server Using

client - side state has the disadvantage that the data sent across the network increases Using server - side

state has the disadvantage that the server must allocate resources for its clients

Let ’ s look into the server - side state management techniques

Chapter 19: Basic Web Programming

< %@ Application Language=”C#” % >

< script runat=”server” >

void Application_Start(Object sender, EventArgs e) { // Code that runs on application startup

} void Application_End(Object sender, EventArgs e) { // Code that runs on application shutdown }

void Application_Error(Object sender, EventArgs e) { // Code that runs when an unhandled error occurs }

void Session_Start(Object sender, EventArgs e) { // Code that runs when a new session is started }

void Session_End(Object sender, EventArgs e) { // Code that runs when a session ends

// Note: The Session_End event is raised only when the sessionstate mode // is set to InProc in the Web.config file If session mode is set to // StateServer or SQLServer, the event is not raised

}

}

Reading session state, again, can be done with the Session property using the session state name:

void Button1_Click(object sender, EventArgs e)

To associate the client with its session variables, by default ASP.NET uses a temporary cookie with a

session identifier ASP.NET also supports sessions without cookies, where URL identifiers are used to

map the HTTP requests to the same session

Application

If data should be shared between different clients, then application state can be used Application

state can be used in a manner that ’ s very similar to the way session state is used With application state,

the class HttpApplicationState is used, and it can be accessed with the Application property of the

Page class

In the example, the application variable with the name userCount is initialized when the Web

application is started Application_Start() is the event handler method in the file global.asax that

is invoked when the first ASP.NET page of the Web site is started This variable is used to count every

user accessing the Web site:

void Application_Start(Object sender, EventArgs e) {

// Code that runs on application startup

Application[“userCount”] = 0;

}

In the Session_Start() event handler, the value of the application variable userCount is incremented

Before changing an application variable, the application object must be locked with the Lock() method;

otherwise, threading problems can occur because multiple clients can access an application variable

concurrently After the value of the application variable is changed, the Unlock() method must be called

Be aware that the time between locking and unlocking is very short — you shouldn ’ t read files or data

from the database during that time Otherwise, other clients must wait until the data access is completed

void Session_Start(Object sender, EventArgs e) {

// Code that runs when a new session is started

Don ’ t store too much data in the application state because the application state requires server resources

until the server is stopped or restarted

Chapter 19: Basic Web Programming

651

Cache

Cache is server - side state that is similar to application state insofar as it is shared with all clients Cache

is different from application state in that cache is much more flexible: There are many options to define when the state should be invalidated Instead of reading a file with every request, or reading the database, the data can be stored inside the cache

For the cache, the namespace System.Web.Caching and the class Cache are needed Adding an object

to the cache is shown in the following example:

Cache.Add(“mycache”, myobj, null, DateTime.MaxValue, TimeSpan.FromMinutes(10), CacheItemPriority.Normal, null);

The Page class has a Cache property that returns a Cache object Using the Add() method of the Cache class, any object can be assigned to the cache The first parameter of the Add() method defines the name

of the cache item The second parameter is the object that should be cached With the third parameter, dependencies can be defined, e.g., the cache item can be dependent on a file When the file changes, the cache object is invalidated In the example there ’ s no dependency because null is set with this

parameter

With parameters four and five, a time can be set specifying how long the cache item is valid Parameter four defines an absolute time when the cache item should be invalidated, whereas parameter five requires a sliding time that invalidates the cache item after it hasn ’ t been accessed for the time defined with the sliding expiration Here, a sliding time span is used, invalidating the cache after the cache item hasn ’ t been used for 10 minutes

Parameter six defines a cache priority CacheItemPriority is an enumeration for setting the cache priority If the ASP.NET worker process has high memory usage, the ASP.NET runtime removes cache items according to their priority Items with a lower priority are removed first With the last parameter, it

is possible to define a method that should be invoked when the cache item is removed An example of where this can be used is when the cache is dependent on a file When the file changes, the cache item is removed and the event handler is invoked With the event handler, the cache can be reloaded by reading the file once more

Cache items can be read by using the indexer, as you ’ ve already seen with the session and application state Before using the object returned from the Cache property, always check whether the result is null , which happens when the cache is invalidated When the returned value from the Cache indexer is not

null , the returned object can be cast to the type that was used to store the cache item:

object o = Cache[“mycache”];

if (o == null){

// Reload the cache

}else{ // Use the cache

MyClass myObj = (MyClass)o;

//

}

Authentication and Authorization

To secure the Web site, authentication is used to verify that the user has a valid logon, while authorization

checks whether the user who was authenticated is allowed to use the resource

ASP.NET offers Windows and Forms authentication The most frequently used authentication technique

for Web applications is Forms authentication, which is covered here ASP.NET also has some great new

features for Forms authentication Windows authentication makes use of Windows accounts and IIS to

authenticate users

ASP.NET has many classes for user authentication Figure 19 - 12 shows the structure of the new

architecture With ASP.NET, many new security controls such as Login or PasswordRecovery are

available These controls make use of the Membership API With the Membership API, it is possible to

create and delete users, validate logon information, or get information about currently logged - in users

The Membership API itself makes use of a membership provider With ASP.NET 2.0, different providers

exist to access users in an Access database, the SQL Server database, or the Active Directory It is also

possible to create a custom provider that accesses an XML file or any custom store

Membership ProviderMembership APISecurity Controls

Figure 19-12

Authentication Configuration

This chapter demonstrates Forms authentication with a Membership provider In the following Try It

Out, you configure security for the Web application and assign different access lists to different folders

Try It Out Confi guring Security

1 Open the previously created Web application EventRegistrationWeb using Visual Studio

2 Create a new folder named Intro by selecting the Web directory in the Solution Explorer and

then selecting Website Add Folder Regular Folder This folder will be configured to be

accessed by all users, while the main folder will be accessible only by authenticated users

3 Start the ASP.NET Web Application Administration by selecting Website ASP.NET

Configuration in Visual Studio 2008

4 Select the Security tab, as shown in Figure 19 - 13

Chapter 19: Basic Web Programming

653

Figure 19-13

Figure 19-14

5 Click the link to the Security Setup Wizard In the Welcome Screen, click the Next button From

step 2 of the wizard, select the access method From the Internet, as shown in Figure 19 - 14

6 Click Next Here, step 3, you can see the configured provider (see Figure 19 - 15 ) The default

provider is ASP.NET Access, meaning the user accounts are stored in an Access database This

configuration cannot be changed in the Wizard mode, but you can change it afterward

Figure 19-15

7 Click the Next button twice, which takes you to step 5, where you add new users Create a

new account, as shown in Figure 19 - 16

8 After one user is successfully created, click the Next button for step 6 of the wizard (see Figure

19 - 17 ) Here, you can configure which users are allowed or denied access to the Web site or

specific directories Add a rule to deny anonymous users Next, select the Intro directory and

add a rule to allow anonymous users Then click the Next button and finally the Finish

button

Chapter 19: Basic Web Programming

655

Figure 19-17Figure 19-16

Figure 19 - 18 shows the result of the Security tab after the Security Setup Wizard is finished

Figure 19-18

How It Works

After you complete the security configuration, a new Access database is created Having refreshed the

files in the Solution Explorer, you can see a new SQL Server Express database ASPNETDB.mdf in the

directory App_Data This database contains tables that are used by the SQL Membership provider

Now, along with the Web application, you will also see the configuration file web.config This file

contains the configuration for Forms authentication because authentication across the Internet was

selected, and the < authorization > section denies access to anonymous users If the Membership

provider were changed, the new provider would be listed in the configuration file Because the

SQL provider is the default provider already defined with the machine configuration file, there is no

need for it to be listed here

Chapter 19: Basic Web Programming

657

Within the Intro subfolder, you can see another configuration file, web.config The authentication section is missing from this configuration file because the authentication configuration is taken from the parent directory However, the authorization section is different Here, anonymous users are allowed with < allow users= ” ” / > :

Using Security Controls

ASP.NET includes many security controls Instead of writing a custom form to ask the user for a username and password, a ready - to - use Login control is available The security controls and their functionality are described in the following table:

Security Control Description

Login A composite control that includes controls to ask for username and

password

LoginStatus Includes hyperlinks to log in or log out, depending on whether the user is

logged in or not

LoginName Displays the name of the user

LoginView Different content can be displayed depending on whether the user is

logged in or not

PasswordRecovery A composite control to reset forgotten passwords Depending on the

security configurations, the user is asked for the answer to a previously set secret question or the password is sent by e - mail

Try It Out Creating a Login Page

If you tried to start the Web site after it was configured to deny anonymous users, you should have

received an error because a login.aspx page is missing If a specific login page is not configured with

Forms authentication, login.aspx is used by default You now create a login.aspx page:

1 Add a new Web Form and name it login.aspx

2 Add the Login control to the form In Design View, you see the control shown in Figure 19 - 19

Figure 19-19

Figure 19-20

3 That ’ s all that ’ s necessary to create a login page Now when you start the site default.aspx ,

you are redirected to login.aspx , where you can enter the user credentials for the user you

created earlier

How It Works

After adding the Login control, you can see this code in the Source View:

< asp:Login ID=”Login1” runat=”server” >

< /asp:Login >

The properties for this control enable you to configure the text for the header, username, and

password labels, and for the login button, too You can make the check box Remember Me Next Time

visible by setting the DisplayRememberMe property

If you want more control over the look and feel of the Login control, you can convert the control to

a template You can do this in the Design View by clicking the smart tag and selecting Convert to

Template Next, when you click Edit Templates, you get a view like that shown in Figure 19 - 20 , where

you can add and modify any controls

For verifying the user credentials, when the Login In button is clicked, the method Membership

.ValidateUser() is invoked by the control, and you don ’ t have to do this yourself

Chapter 19: Basic Web Programming

659

When users don ’ t have an account to log in with the EventRegistration Website, they should create their own login This can be done easily with the CreateUserWizard control, as shown in the next Try It Out

Try It Out Using the CreateUser Wizard

1 Add a new Web page named RegisterUser.aspx in the Intro folder previously created This folder is configured to be accessed from anonymous users

2 Add a CreateUserWizard control to this Web page

3 Set the property ContinueDestinationPageUrl to ~/Default.aspx

4 Add a LinkButton control to the Login.aspx page Set the content of this control to

Register User , and the PostBackUrl property of this control to the Web page

Intro/RegisterUser.aspx

5 Now you can start the application Clicking the link Register User on the Login.aspx page redirects to the page RegisterUser.aspx where a new account will be created with the entered data

to add special requirements, such as having users accept a contract before signing up for an account

Figure 19-21

Reading and Writing to an SQL

Ser ver Database

Most Web applications need access to a database to read data from it and write data to it In this section,

you create a new database to store event information, and learn how to use this database from ASP.NET

First you create a new SQL Server database in the next Try It Out This can be done directly from within

Visual Studio 2008

Try It Out Creating a New Database

1 Open the previously created Web application EventRegistrationWeb

2 Open the Server Explorer If you cannot already see it in Visual Studio, you can open the

window by selecting View Other Windows Server Explorer

3 In the Server Explorer, select Data Connections, right - click to open the context menu, and

select Create New SQL Server Database The dialog shown in Figure 19 - 23 opens

4 Enter (local) for the server name, and BegVCSharpEvents for the database name

Figure 19-22

Figure 19-23

Chapter 19: Basic Web Programming

661

5 After the database is created, select the new database in Server Explorer

6 Select the entry Tables below the database, and from Visual Studio select Data Add

New Table

7 Enter the following column names and data types (see Figure 19 - 24 )

Column Name Data Type

8 Configure the ID column as a primary key column with an identity increment of 1 and an

identity seed of 1 Configure all columns to not allow null s

9 Save the table with the name Events

10 Add a few events to the table with some sample titles, dates, and locations

To display and edit data, there ’ s a separate Data section in the Toolbox, representing data controls The data controls can be categorized into two groups: data view and data source A data source control is associated with a data source such as an XML file, a SQL database, or a NET class; data views are connected with a data source to represent data

The following table describes all the data controls:

Data Control Description

DetailsView Can be used together with a GridView if you have a master/detail relationship

with your data

FormView Displays a single row of the data source

Repeater Template - based You can define what HTML elements should be generated

around the data from the data source

ListView New in NET 3.5 This is template - based, similar to the Repeater control

The data source controls and their functionality are listed in the following table:

Data Source Control Description

SqlDataSource Accesses the SQL Server or any other ADO.NET provider (e.g., Oracle,

ODBC, and OLEDB) Internally, it uses a DataSet or a DataReader class

XmlDataSource Enables you to access XML files Using this data source, hierarchical

structures can be displayed

SiteMapDataSource Uses XML files to define a site structure for creating links and references

with a Web site This feature is discussed in Chapter 20

In the next Try It Out, you use a GridView control to display and edit data from the previously

created database

Chapter 19: Basic Web Programming

663

Try It Out Using a GridView Control to Display Data

1 In the Solution Explorer, create a new regular folder Admin

2 Create a new Web page EventsManagement.aspx in the Admin folder

3 Add a GridView control to the Web page

4 In the Choose Data Source combo box of the control ’ s smart tag, select < New data source >

The dialog shown in Figure 19 - 25 opens

5 Select Database and enter the name EventsDataSource for this new data source

Figure 19-25

6 Click OK to configure the data source The Configure Data Source dialog opens Click the New Connection button to create a new connection

7 In the Add Connection dialog shown in Figure 19 - 26 , enter (local) as the server name, and

select the previously created database BegVCSharpEvents Click the Test Connection button to verify that the connection is correctly configured When you ’ re satisfied that it is, click OK

The next dialog (shown in Figure 19 - 27 ) opens, for storing the connection string

Figure 19-27

8 Click the check box to save the connection and enter the connection string name

EventsConnectionString Click Next

Figure 19-26

Chapter 19: Basic Web Programming

665

9 In the next dialog, select the Events table to read the data from this table, as shown in

Figure 19 - 28 Select the ID, Title, Date, and Location columns to define the SQL command shown in the figure Click the Next button

Figure 19-28

Figure 19-29

10 With the last window of the Configure Data Source dialog, you can test the query Finally, click the Finish button

11 In the designer, you can now see the GridView control with dummy data, and the

SqlDataSource with the name EventsDatasource , as shown in Figure 19 - 29

13 Start the page with Visual Studio, where you will see the events in a nice table like the one

shown in Figure 19 - 31

Figure 19-31

Figure 19-30

12 For a more beautiful layout of the GridView control, select AutoFormat from the smart tag

and select the scheme Lilacs in Mist, as shown in Figure 19 - 30

How It Works

After you add the GridView control, you can see its configuration in the source code The

DataSourceID attribute defines the association with the data source control that can be found after

the grid control Within the < Columns > element, all bound columns for displaying data are shown

HeaderText defines the text of the header and DataField defines the field name within the

data source

Chapter 19: Basic Web Programming

667

The data source is defined with the < asp:SqlDataSource > element, where the SelectCommand defines how the data is read from the database, and the ConnectionString defines how to connect with the database Because you chose to save the connection string in the configuration file, < is used to make an association with a dynamically generated class from the configuration file:

< asp:GridView AutoGenerateColumns=”False” BackColor=”White”

BorderColor=”White” BorderStyle=”Ridge”

BorderWidth=”2px” CellPadding=”3” CellSpacing=”1” DataKeyNames=”Id”

DataSourceID=”EventsDataSource”

GridLines=”None” ID=”GridView1” runat=”server” >

< footerstyle BackColor=”#C6C3C6” forecolor=”Black” / >

< rowStyle BackColor=”#DEDFDE” forecolor=”Black” / >

“SELECT [Id], [Title], [Date], [Location] FROM [Events]” >

Try It Out Confi guring the GridView Control

1 Select the smart tag of the GridView control and select the Edit Columns menu The Fields

dialog, shown in Figure 19 - 32 , appears Select the ID field, and change the Visible property

to False You can arrange the columns with this dialog, and you can change the colors and

define the header text

Figure 19-32

Figure 19-33

2 For editing the GridView , an update command must be defined with the data source Select

the SqlDataSource control with the name EventsDataSource, and select Configure Data

Source from the smart tag In the Configure Data Source dialog, click the Next button until

you can see the previously configured SELECT command Click the Advanced button, and

select the check box Generate INSERT , UPDATE , and DELETE statements, as shown in

Figure 19 - 33 Click OK Then click the Next and Finish buttons

Chapter 19: Basic Web Programming

669

3 Select the smart tag of the GridView again Now there ’ s an Enable Editing item in the smart tag menu (see Figure 19 - 34 ) After you ’ ve selected the check box to enable editing, a new column is added to the GridView control You can also edit the columns with the smart tag menu to arrange the new Edit button

Summar y

This chapter described the architecture of ASP.NET, how to work with server - side controls, and some base features of ASP.NET ASP.NET offers several controls for which not much code is necessary, as shown with the login and data controls

After learning about the base functionality of ASP.NET with server controls and the event handling mechanism, you learned about input validation, several methods for state management, authentication, and authorization, and displaying data from the database

Specifically, in this chapter you learned to do the following:

Create a Web page with ASP.NET

Use event handlers with Web server controls

Verify user input with validation controls

Deal with state management using different methods

Configure authentication and authorization for Web applications

Use ASP.NET login controls

Access and display values from a database with the SqlDataSource and GridView controls

The exercises that follow help you extend the Web application developed in this chapter

Exercises

1 Add the username to the top of the ASP.NET pages you created in this chapter You can use the

LoginName control for this task

2 Add a page for password recovery You can add a link to the Web page login.aspx , so that

users can recover the password if the login fails

3 Change the data source of the Default.aspx page so that it uses the Events database for

displaying the events

20

Advanced Web Programming

In Chapter 19 , you learned about base features of ASP.NET, how server - side controls can be used

to render HTML code to the client, input validation, and state management You ’ ve also learned how security can be added, and how to read/write data from/to the database This chapter looks

at user interface elements and customization of Web pages with profiles and Web parts Master pages are used to define a frame for multiple pages You can use site navigation to define the structure of your Web site, making menus to access all the pages To reuse controls within multiple pages on the same Web site, you can create user controls The last section of the chapter describes Web parts, which you can use to create a portal Web site

In this chapter, you learn about the following:

Creating and using master pages Creating and using user controls Setting up navigation within Web sites Using profiles

Using Web parts Coding with JavaScript

Master Pages

Most Web sites reuse part of their content on every page — things such as company logos and menus are often available on all pages It ’ s not necessary to repeat the common user interface

elements with every page; instead, the common elements can be added to a master page Master

pages look like normal ASP.NET pages but define placeholders that are replaced by content pages

A master page has the file extension master and uses the Master directive in the first line of the file, as shown here:

< %@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”MasterPage.master.cs”

Only the master pages in the Web site make use of < html > , < head > , < body > , and < form > HTML

elements The Web pages themselves contain only content that is embedded within the < form > element

The Web pages can embed their own content within the ContentPlaceHolder control The master page

can define default content for the ContentPlaceHolder if the Web page doesn ’ t:

< html xmlns=”http://www.w3.org/1999/xhtml >

< head runat=”server” >

< title > Untitled Page < /title >

< asp:contentplaceholder id=”head” runat=”server” >

To use the master page, you must apply the MasterPageFile attribute to the Page directive To replace

the content of a master page, use the Content control The Content control associates the

ContentPlaceHolder with the ContentPlaceHolderID :

< %Page Language=”C#” MasterPageFile=”~/MasterPage.master”

AutoEventWireUp=”true” CodeFile=”Default.aspx.cs” Inherits=”default”

Instead of defining the master page with the Page directive, you can assign a default master page to all

Web pages with the < pages > element in the Web configuration file, web.config :

With the master page file configured within web.config , the ASP.NET pages need a Content element

configuration in the file as shown earlier; otherwise, the masterPageFile attribute would have no use

If you use both the Page directive ’ s MasterPageFile attribute and the entry in web.config , the setting

of the Page directive overrides the setting from web.config This way, it ’ s possible to define a default

master page file (with web.config ), but override the default setting for specific Web pages

It is also possible to programmatically change the master page By doing so, different master pages can

be used for different devices or different browser types The last place the master page can be changed is

Chapter 20: Advanced Web Programming

673

in the Page_PreInit handler method In the following sample code, the MasterPageFile property of the Page class is set to IE.master if the browser sends the MSIE string with the browser name (which is done by Microsoft Internet Explorer) or to Default.master for all other browsers:

public partial class ChangeMaster : System.Web.UI.Page{

void Page_Load(object sender, EventArgs e) {

} void Page_PreInit(object sender, EventArgs e) {

if (Request.UserAgent.Contains(“MSIE”)) {

this.MasterPageFile = “~/IE.master”;

} else { this.MasterPageFile = “~/Default.master”;

} }}

Now try creating your own master page in the following Try It Out The sample master page here will have a heading and a body, and the main part of the master page will be replaced by individual pages

Try It Out Creating a Master Page

1 Open the Web site named EventRegistrationWeb that you created in the previous chapter

2 Add a new Master Page item, as shown in Figure 20 - 1 , and name it EventRegistration.master

Figure 20-1

3 Remove the ContentPlaceHolder that was created automatically from the master page

4 Insert a table in the page by selecting Table Insert Table In the Insert Table dialog, select

three rows and two columns as shown in Figure 20 - 2 The menu item Table is only available if

you have the editor opened in Design View

Figure 20-2

5 Select the two columns in the first row and merge them by selecting Table Modify Merge

Cells Do the same to the columns in the last row

6 Add the text Registration Demo Web to the top of the master page, and a copyright notice to

the bottom You can place the text Registration Demo Web inside < H1 > tags to make it

larger In addition, justify the text in the center

7 In the second row, add a ContentPlaceHolder to every column Name the

ContentPlaceHolder on the left side ContentPlaceHolderMenu and the one on the right

side ContentPlaceHolderMain

8 Add the text Default content of the Registration Demo Web Master to the

ContentPlaceHolder on the right side

9 Arrange the sizes of the table in the page as shown in Figure 20 - 3

Chapter 20: Advanced Web Programming

675

How It Works

As previously discussed, the master page contains the HTML, including the < FORM > tags that contain the content placeholders where the content will be replaced by the pages that use the master page The HTML table defines the layout of the page:

< %@ Master Language=”C#” AutoEventWireup=”true”

CodeFile=”EventRegistration.master.cs” Inherits=”EventRegistration” % >

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd” >

< html xmlns=”http://www.w3.org/1999/xhtml” >

< head runat=”server” >

< title > Untitled Page < /title >

< asp:ContentPlaceHolder id=”head” runat=”server” >

< /asp:ContentPlaceHolder >

< style type=”text/css” >

.style1 { width: 100%;

height: 353px;

} .style2 { text-align: center;

} .style3 { font-size: smaller;

}

Figure 20-3

< asp:ContentPlaceHolder ID=”ContentPlaceHolderMain” runat=”server” >

< > Default content of the Registration Demo Web < /p >

< /asp:ContentPlaceHolder >

< /td >

< /tr >

< tr >

< td class=”style3” colspan=”2” style=”text-align: center” >

Copyright (C) 2008 Wrox Press < /td >

Chapter 20: Advanced Web Programming

677

Try It Out Using a Master Page

1 Add a new item of type Web Form to the Web application and name it EventList.aspx Click the Select Master Page check box (see Figure 20 - 4 )

Figure 20-4

Figure 20-5

2 Click the Add button to open the dialog Select a Master Page Select the previously created

master page EventRegistration.master (see Figure 20 - 5 ) and click OK

3 The Source View of the file EventList.aspx shows just three Content controls after the

Page directive that references the ContentPlaceHolder controls from the master page

Change the ID properties of the Content controls to ContentHead , ContentMenu , and

ContentMain :

< %@ Page Language=”C#” MasterPageFile=”~EventRegistration.master”

AutoEventWireup=”true” CodeFile=”EventList.aspx.cs”

Inherits=”EventList” Title=”Untitled Page” % >

< asp:Content ID=”ContentHead” ContentPlaceHolderID=”head”

4 Change to the Design View in Visual Studio This view shows you the content of the master

page that cannot be changed from the page that includes the header and copyright

information (see Figure 20 - 6 )

Figure 20-6

5 Insert a table with two rows and two columns into the ContentMain control Add a

Calendar control to the left column of the first row and a ListBox control to the right

column of the first row The content of the menu will be added later When you open the

Source View, you can see the table within the Content control

6 View the page with the browser The page includes the content from the Web page and the

surroundings from the master page