0% found this document useful (0 votes)

864 views

Asp MVC

This document provides an overview of ASP.NET, including the different development models, tools, languages, and file types used. It demonstrates creating a basic website with WebMatrix and adding standard folders and styling.

Uploaded by

Ramesh

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

864 views

Asp MVC

Uploaded by

Ramesh

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 254

ASP.

NET Tutorial

ASP.NET is a development framework for building web pages and web sites with HTML, CSS, JavaScript and server scripting. ASP.NET supports three different development models: Web Pages, MVC (Model View Controller), and Web Forms:

Web Pages
Single Pages Model
Simplest ASP.NET model. Similar to PHP and classic ASP. Built-in templates and helpers for database, video, graphics, social media and more.

MVC
Model View Controller
MVC separates web applications into 3 different components: Models for data Views for display Controllers for input

Web Forms
Event Driven Model
The traditional ASP.NET event driven development model: Web pages with added server controls, server events, and server code.

WebMatrix
Web Editor for Web Pages

Visual Web Developer

Development tool tailor made for MVC and Web Forms

ASP.NET Framework
.NET is a framework for developing virtually any type of computer application. The ASP.NET framework is the part of .NET designed for creating web applications.

Web Pages Tutorial

If you are new to ASP.NET, Web Pages is the perfect place to start. Web Pages is the easiest development model for developing ASP.NET web sites. In our Web Pages tutorial you will learn how to combine HTML, CSS, JavaScript and server code, using the latest Razor server markup syntax with Visual Basic or C#. You will also learn how to extend your web pages with programmable Web Helpers, including database, video, graphics, social networking and much more.

MVC Tutorial
MVC is a model for building web applications using a MVC (Model View Controller) design. If you want a lighter alternative to traditional ASP.NET, MVC is the place to start. In our MVC tutorial you will learn how to build web applications using a lightweight development model, integrated with all existing ASP.NET features, such as Master Pages, Security, and Authentication.

Web Forms Tutorial

Web Forms is the traditional ASP.NET model, based on event driven Web Forms and post backs. Over the years, developers have used ASP.NET Web Forms to create many of the largest websites in the world. If you want to study the design model used by many web developers over the last 10 years, this is the place to start.

Who Are These Tutorials For?

The tutorials above are for anyone who wants to learn to build websites on the Microsoft ASP.NET platform, from hobby-related sites, to new, modern, and fully commercial webs. Even if you are new to web programming, you should be able to follow the tutorials, but it will helps if you have a basic understanding of HTML and CSS. It will also help if you have a basic understanding of scripting languages like JavaScript or VB (Visual Basic). Do you have a preference for VB over C#? Do you want to learn both languages? The good news are: In the W3Schools tutorials most code examples are in both languages.

If you are a professional web developer with prior ASP.NET experience, you can still learn a lot, since these tutorials covers a lot new concepts of ASP.NET, like HTML5, CSS3, JQuery, and more.

ASP.NET
Classic ASP - Active Server Pages
Active Server Pages (ASP), also known as Classic ASP, was introduced in 1998 as Microsoft's first server side scripting engine. ASP is a technology that enables scripts in web pages to be executed by an Internet server. ASP pages have the file extension .asp, and are normally written in VBScript. If you want to learn Classic ASP,

ASP.NET
ASP.NET is a new ASP generation. It is not compatible with Classic ASP, but ASP.NET may include Classic ASP. ASP.NET pages are compiled, which makes them faster than Classic ASP. ASP.NET has better language support, a large set of user controls, XML-based components, and integrated user authentication. ASP.NET pages have the extension .aspx, and are normally written in VB (Visual Basic) or C# (C sharp). User controls in ASP.NET can be written in different languages, including C++ and Java. When a browser requests an ASP.NET file, the ASP.NET engine reads the file, compiles and executes the scripts in the file, and returns the result to the browser as plain HTML.

ASP.NET Razor
Razor is a new and simple markup syntax for embedding server code into ASP.NET web pages, much like Classic ASP. Razor has the power of traditional ASP.NET, but is easier to use and easier to learn.

ASP.NET Programming Languages

This tutorial covers the following programming languages:

Visual Basic (VB.NET) C# (Pronounced C sharp)

ASP.NET Server Technologies

This tutorial covers the following server technologies:

Web Pages (with Razor syntax) MVC (Model View Controller) Web Forms (traditional ASP.NET)

ASP.NET Development Tools

ASP.NET supports the following development tools:

WebMatrix Visual Web Developer Visual Studio

This tutorial uses WebMatrix for Web Pages, and Visual Web Developer for MVC and Web Forms.

ASP.NET File Extensions

Classic ASP files have the file extension .asp ASP.NET files have the file extension .aspx ASP.NET files with Razor C# syntax have the file extension .cshtml ASP.NET files with Razor VB syntax have the file extension .vbhtml

ASP.NET Web Pages - Demonstration

This is a Web Pages Demonstration
Web Pages is one of the 3 programming models for creating ASP.NET web sites and web applications. The other two programming models are Web Forms and MVC (Model, View, Controller). This demonstration will teach you ASP.NET Web Pages by building a web site:

Create a web site Add files and folders Add a consistent look Add navigation Add a database Add login and security

Like to Read a Tutorial First?

Many developers like to start learning a new technology by looking at a demonstration, but if you want to read the Web Pages tutorial first, go to the ASP.NET Web Pages Tutorial.

Easy Learning with "Run Example"

Our "Run Example" tool makes it easy to learn Web Pages. It runs examples and displays the ASP.NET code and the HTML output simultaneously. Click on the "Run Example" button to see how it works:

Web Pages Example

<html> <body> <h1>Hello Web Pages</h1> <p>The time is @DateTime.Now</p> </body> </html>
Run Example

We Will Use WebMatrix

WebMatrix is a simple but powerful free ASP.NET development tool from Microsoft. WebMatrix is tailor made for Web Pages. WebMatrix contains:

Web Pages examples and templates A web server language (Razor using VB or C#) A web server (IIS Express) A database server (SQL Server Compact) A web server markup language (Razor) A full web development framework (ASP.NET)

If you install WebMatrix, you will get the full benefits from this tutorial. With WebMatrix you can start from scratch with an empty web site and a blank page, or build on open source applications from a "Web Application Gallery". Both PHP and ASP.NET applications are available, such as Umbraco, DotNetNuke, Drupal, Joomla, WordPress and many more. WebMatrix also has built-in tools for security, search engine optimization, and web publishing. The skills and code you develop with WebMatrix can seamlessly be transformed to fully professional ASP.NET applications.

How to Install WebMatrix

Follow the link below to install WebMatrix: http://www.microsoft.com/web/gallery/install.aspx?appid=WebMatrix Microsoft's Web Platform Installer will install the free components of the Microsoft Web Platform, including WebMatrix, Internet Information Services (IIS), SQL Server Express, and the ASP.NET Framework:

The Web Platform Installer also makes it easy to install popular free web applications for blogging, content management and more with a built-in Windows Web Application Gallery.

ASP.NET Web Pages - WebMatrix

Learn ASP.NET Web Pages by building a web site from scratch. Part I: Creating a Web Site with WebMatrix.

Create a Web Site with WebMatrix

Start WebMatrix, and click Site From Template:

Select Empty Site, name the new site Demo, and click OK:

WebMatrix creates a new site and displays a workspace window with a menu at the top (to publish, run, start, or stop your web site):

In the left pane there is a list of your web folders and workspace selector to select working with the site, files, databases, or reports. Select the Files workspace. This workspace lets you work with files and folders.

Create a Web Page with WebMatrix

In the ribbon bar, click New:

Choose file type CSHTML, (You will learn more about CSHTML files later) and in the Name box, typedefault.cshtml:

When you click OK, WebMatrix creates a web page and opens it in the editor:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
Use the editor to add a title and a heading:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Web Pages Demo</title> </head> <body> <h1>Hello Web Pages</h1> </body> </html>

In the Quick Access Toolbar, click Save:

In the ribbon bar, click Run:

WebMatrix starts a web server (IIS Express) and runs the page on your computer. The page is displayed in your default browser:

Hello Web Pages

ASP.NET Web Pages - Files and Folders

Learn ASP.NET Web Pages by building a web site from scratch. Part II: Creating standard folders and a consistent style.

What We Will Do
In this chapter we will:

Create Create Create Create Create

a new empty web site the necessary folders a standard style sheet for the site a standard layout for the site a home page for the site

1. Start With an Empty Web Site

If you have followed this tutorial, you already have a web site called Demo. If not you can create an empty web site with WebMatrix:

Start WebMatrix Click on "Create Site From Template" Choose "Empty Site" Name the site "Demo"

2. Create Folders
In the folder named "Demo" (your website), create 5 folders:

Account - for storing login and membership files App_Data - for storing databases and data files Images - for storing images Scripts - for storing browser scripts Shared - for storing shared style and layout files

3. Create a Style Sheet

In the "Shared" folder, create a new style sheet (CSS file) named "Site.css". Put the following code inside the CSS file:

The HTML heading element <h1> The HTML body element <body> The HTML element with id="main"

4. Create a Layout Page

In the "Shared" folder, create a new file named "Layout.cshtml". Put the following code inside the layout file:

Layout.cshtml
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/Shared/Site.css" /> </head> <body> <div id="main"> @RenderBody() <p>© 2012 W3Schools. All rights reserved.</p> </div> </body> </html>
The layout file above defines the layout of your web pages. It has a link to your style sheet file (Shared/Site.css), and a call to the @RenderBody() function, where page content should be displayed.

5. Create a Home Page

In your empty "Demo" folder, create a new file, named "Default.cshtml". If you created a file with this name earlier, you can edit the existing file, or create a new file with a new name (like Default2.cshtml). Put the following code inside the file:

Default.cshtml
@{Layout="/Shared/Layout.cshtml";} <h1>Welcome to W3Schools</h1> <h2>Web Site Main Ingredients</h2> <p>A Home Page (Default.cshtml)</p> <p>A Layout File (Layout.cshtml)</p> <p>A Style Sheet (Site.css)</p>
Run example

The file starts with a reference to the layout file, otherwise it contains normal HTML markup.

Congratulations
You have created your first web site, with a main page (the Default page), a common template for all your pages (the Layout page), and a common style sheet (the CSS file). In the next chapters of this tutorial, we will add navigation to the web site. Then we will add a database, and finally we will add login and security.

ASP.NET Web Pages - Adding Navigation

Learn ASP.NET Web Pages by building a web site from scratch. Part III: Adding Navigation.

What We Will Do
In this chapter we will:

Add a PageStart page Add an about page Add a navigation menu

Add the File: _PageStart.cshtml

In the root folder (the "Demo" folder), create a new file named "_PageStart.cshtml". Put the following code inside the file:

_PageStart.cshtml
@{ // Set the layout page for the whole site Layout = "~/Shared/Layout.cshtml"; }
The _PageStart file above contains code to be run in every page of the web site. After adding this, you no longer need to add the layout information to every web page.

Add an About Page

In the "Demo" folder, create a new file named "About.cshtml". Put the following code inside the about file:

About.cshtml
<h1>About Us</h1> <p> Lorem Ipsum Porem Lorem Ipsum Porem </p>
The about file above contains a heading and a paragraph. Please feel free to edit the content.

Add a Navigation Menu

In the "Shared" folder, edit the layout file. Put the following code inside the layout file:

Layout.cshtml
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/Shared/Site.css" /> </head> <body> <ul id="menu"> <li><a href="/Default">Home</a></li> <li><a href="/About">About</a></li> </ul> <div id="main"> @RenderBody() <p>© 2012 W3Schools. All rights reserved.</p> </div> </body> </html>
The layout file above, is a copy of the layout file from the previous chapter, with an added unordered list (marked red).

Edit The Style Sheet

In the "Shared" folder, edit your your style sheet (Site.css): Put the following code inside the file:

Site.css
h1 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } #main { padding: 30px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; color: #034af3; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; }
The style sheet above, is a copy of the style sheet from the previous chapter, with added styles for an unordered list (marked red).

Edit the Home Page

In your "Demo" folder, edit the file named "Default.cshtml". Put the following code inside the file:

Default.cshtml
<h1>Welcome to Us</h1> <p> Lorem Ipsum Porem Lorem Ipsum Porem </p>

Run example

Feel free to edit the content.

Congratulations
You have added navigation to your website. In the next chapter we will add a database.

ASP.NET Web Pages - Databases

Learn ASP.NET Web Pages by building a web site from scratch. Part IV: Adding a Database.

What We Will Do
In this chapter we will:

Create a database Add data to the database Create a page to list the database

Displaying Data from Database

With Web Pages, you can easily display data from a database:

Database Example
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td aligh="right">@row.Price</td> </tr> } </table> </body> </html>

Run example

Creating a Database
WebMatrix includes an SQL Database design tool. Follow the instructions below to create an SQL database called "SmallBakery". Open the Databases workspace and click New Database or Add a database. WebMatrix will create a database with the same name as your site: "Demo.sdf":

Rename the database to "SmallBakery.sdf". Click New Table. Click New Column and create 4 columns named "Id", "Name", "Description", and "Price". For all columns, set Allows Null to "False". For the "Id" column, Set Data Type to "bigint", Is Identity to "True", and Is Primary Key to "True". For the "Name" and "Description" columns, set Data Type to "nvarchar". For the "Price" column, set Data Type to "money". Save the table and name it "Product". When you are finished, your table design will look like this:

Notes: Allow Nulls = "False" specifies that the column cannot be blank (empty). Is Primary Key tells the database that this will be the table's primary key. Is Identity tells the database to assign a new ID number for every record (starting at 1). Data Type = "nvarchar" specifies that this column is a string of variable length. (The n prefix indicates that the column can hold international Unicode characters)

Adding Data to the Database

Follow the instructions below to add some data to your database: In the left pane, expand the SmallBakery.sdf node and then click Tables. Right-click the Product table and then click Data. In the edit pane, enter the following records: Name Bread Description Baked fresh every day Price 2.99

Strawberry Cake Apple Pie Pecan Pie Lemon Pie Cupcakes

Made with organic strawberries Second only to your mom's pie If you like pecans, this is for you Made with the best lemons in the world Your kids will love these

9.99 12.99 10.99 11.99 7.99

Creating a Test Page

Follow the instructions below to create a test page for your database: In the root folder (the Demo folder), create a new web page named ListProducts.cshtml. Replace the code in the file with the code from the example above:

ListProducts.cshtml
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td align="right">@row.Price</td> </tr> } </table> </body> </html>

Add the Test Page to Your Application

Add a new line to your layout file:

Layout.cshtml
<ul id="menu"> <li><a href="/Default">Home</a></li> <li><a href="/ListProducts">Data</a></li> <li><a href="/About">About</a></li> </ul>
Run example

Database Connection
The Database.Open(name) method will connect to a database in two steps: First, it searches the application's App_Data folder for a database that matches the name parameter without the file-name extension. If no file is found, it looks for a connection string in the application's Web.config file. This two-step search makes it possible to test the application with a local database, and run the application on a web host using a connection string. A connection string contains information about how to connect to a database. It can include a file path, or the name of an SQL database, with full user name and password.

Error in Database Connection

This tutorial was written using Web Matrix 1. If you are using using Web Matrix 2 beta, you might get this Error Message: Compiler Error Message: CS0103: The name 'DataBase' does not exist in the current context. This is because the assembly (DLL) WebMatrix.Data, is not included in the Empty Site template in WebMatrix 2. To make this work, you have to add the WebData package to your site. Follow these instructions: 1. 2. 3. 4. 5. 6. 7. In the left pane, click the Files workspace. In the ribbon, click the Gallery button. The NuGet Gallery is displayed. In the search box, enter "Microsoft.AspNet.WebPages.WebData". Select the Microsoft ASP.NET Web Pages 2 Web Data package and then click Install. The Gallery page displays details about the package. Click Install and WebMatrix installs the Web Data package.

ASP.NET Web Pages - Adding Registration and Login

Learn ASP.NET Web Pages by building a web site from scratch. Part V: Adding Membership registration, and Login.

What We Will Do
In this chapter we will:

Create a WebSecurity database to hold user profiles and membership information Initialize WebSecurity in AppStart Add a membership registration page Add a member login page

The WebSecurity Object

The WebSecurity Object provides security and authentication for ASP.NET Web Pages applications. With the WebSecurity object you can create user accounts, login and logout users, reset or change passwords, and more.

Create a WebSecurity Database

We will create a new WebSecurity database to store user profiles, logins, passwords, and membership information. You don't have to create a new database. You can use your existing database (SmallBakery.sdf).

Select the Databases workspace in WebMatrix, and click "Add a database to your site" to create a new SQL Server Compact database. Name the database "Users.sdf" The database will be created in the App_Data folder of your web.

Create an AppStart Page

In the root of your web (the demo folder), create a new page named _AppStart.cshtml. Put the following code inside the file:
_AppStart.cshtml
@{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); }

The code above will be run each time your web site (application) starts. It initializes the WebSecurity database (Users.sdf), with user profile tables, if it is not already initialized. "Users" is the name of the database. "UserProfile" is the name of the database table that contains the user profile information. "UserId" is the name of the (integer) column that contains the user IDs. "Email" is the name of the (string) column that contains user names. true is a boolean value indicating that the user profile and membership tables should be created automatically if they don't exist. Otherwise set to false.
Although true indicates that the membership tables can be created automatically, thedatabase itself must always exist.

Edit The Style Sheet

In the "Shared" folder, edit your your style sheet (Site.css): Add the following CSS code to the file:

Site.css
/* Forms --------------------*/ fieldset label { display:block; padding:4px; } input[type="text"],input[type="password"] { width:300px; } input[type="submit"] { padding:4px; }

Add a Registration Page

In the "Account" folder, create a new file named "Register.cshtml". Put the following code inside the file:
Register.cshtml
@{// Initialize page var email = ""; var password = ""; var confirmPassword = ""; var ErrorMessage = ""; // If this is a POST request, validate and process data if (IsPost) { email = Request.Form["email"]; password = Request.Form["password"]; confirmPassword = Request.Form["confirmPassword"]; if (email.IsEmpty() || password.IsEmpty()) { ErrorMessage = "You must specify both email and password.";} if (password != confirmPassword) { ErrorMessage = "Password and confirmation do not match.";} // If all information is valid, create a new account if (ErrorMessage=="") { var db = Database.Open("Users"); var user = db.QuerySingle("SELECT Email FROM UserProfile WHERE LOWER(Email) = LOWER(@0)", email); if (user == null)

{ db.Execute("INSERT INTO UserProfile (Email) VALUES (@0)", email); WebSecurity.CreateAccount(email, password, false); // Navigate back to the homepage and exit Response.Redirect("~/"); } else {ErrorMessage = "Email address is already in use.";} } } } @if (ErrorMessage!="") { <p>@ErrorMessage</p> <p>Please correct the errors and try again.</p> } <form method="post" action=""> <fieldset> <legend>Sign-up Form</legend> <ol> <li> <label>Email:</label> <input type="text" id="email" name="email" /> </li> <li> <label>Password:</label> <input type="password" id="password" name="password" /> </li> <li> <label>Confirm Password:</label> <input type="password" id="confirmPassword" name="confirmPassword" /> </li> <li> <p><input type="submit" value="Register" /></p> </li> </ol> </fieldset> </form>

Add a Login Page

In the "Account" folder, create a new file named "Login.cshtml". Put the following code inside the file:

Login.cshtml
@{// Initialize page var username = ""; var password = ""; var ErrorMessage = ""; // If this is a POST request, validate and process data if (IsPost) { username = Request.Form["username"]; password = Request.Form["password"]; if (username.IsEmpty() || password.IsEmpty()) { ErrorMessage = "You must specify a username and password."; } else { // Login, Navigate back to the homepage and exit if (WebSecurity.Login(username, password, false)) {Response.Redirect("~/");} else {ErrorMessage = "Login failed";} } } } @if (ErrorMessage!="") { <p>@ErrorMessage</p> <p>Please correct the errors and try again.</p> } <form method="post" action=""> <fieldset> <legend>Log In to Your Account</legend> <ol> <li> <label>Username:</label> <input type="text" id="username" name="username" /> </li> <li> <label>Password:</label> <input type="password" id="password" name="password" /> </li> <li> <p><input type="submit" value="login" /></p> </li> </ol> </fieldset> </form>

Edit the Navigation Menu

In the "Shared" folder, edit the layout file. Put the following code inside the layout file:
Layout.cshtml
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/Shared/Site.css" /> </head> <body> <ul id="menu"> <li><a href="/Default.cshtml">Home</a></li> <li><a href="/ListProducts">Data</a></li> <li><a href="/About">About</a></li> <li><a href="/Account/Register">Register</a></li> <li><a href="/Account/Login">Login</a></li> </ul> <div id="main"> @RenderBody() <p>© 2012 W3Schools. All rights reserved.</p> </div> </body> </html>

The layout file above, is a copy of the layout file from the previous chapter, with the Register an Login pages added to the navigation menu (marked red).

Congratulations
You have added membership registration and login information to your website.

ASP.NET Web Pages - Security

Learn ASP.NET Web Pages by building a web site from scratch. Part VI: Security.

What We Will Do
In this chapter we will:

Add access restriction security to a web page

Membership, Login, and Security

In the previous chapter we added a registration page and a login page to the web site. When a membership is registered, the user can login, with his email address and password. However, user membership and login functions do not automatically restrict (or open) any access to the web site. Security (access restrictions) has to be added to each of the web pages.

Adding Security to Pages

Access restrictions (security) can easily be added to any web page. Just put the following code inside the page:

Security Code:
if (!WebSecurity.IsAuthenticated) { Response.Redirect("~/Account/Login"); }
The code above executes an if test, asking if the user is logged in. If not, the user is redirected to the login page.

Preventing Access to the Database

In our example, the page ListProducts.cshtml, lists bakery products from the "SmallBakery" database.

Add the security code at the beginning of the page:

ListProducts.cshtml
@{ if (!WebSecurity.IsAuthenticated) { Response.Redirect("~/Account/Login"); } var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td aligh="right">@row.Price</td> </tr> } </table> </body> </html>
The ListProducts page above, is a copy of the page from the previous chapter about databases. The security code is (added at the beginning) is marked red.

Congratulations
You have added security to your web site, using the WebSecurity object. For a full reference to the WebSecurity object, please visit our WebSecurity Object Reference.

WP Tutorial

ASP.NET Web Pages - Tutorial

ASP.NET is a development framework for building web pages and web sites with HTML, CSS, JavaScript and server scripting. ASP.NET supports three different development methods: Web Pages, MVC (Model View Controller), and Web Forms. THIS TUTORIAL COVERS WEB PAGES.

Web Pages

MVC ASP.NET Framework

Web Forms

Easy Learning with "Run Example"

Our "Run Example" tool makes it easy to learn Web Pages. It runs examples and displays the ASP.NET code and the HTML output simultaneously. Click on the "Run Example" button to see how it works:

Web Pages Example

<html> <body> <h1>Hello Web Pages</h1> <p>The time is @DateTime.Now</p> </body> </html>
Run Example

What is Web Pages?

Web Pages is one of the 3 programming models for creating ASP.NET web sites and web applications. The other two programming models are Web Forms and MVC (Model, View, Controller). Web Pages is the simplest programming model for developing ASP.NET web pages. It provides an easy way to combine HTML, CSS, JavaScript and server code:

Easy to learn, understand, and use Built around single web pages Similar to PHP and Classic ASP Server scripting with Visual Basic or C# Full HTML, CSS, and JavaScript control

Web Pages are easy extendable with programmable Web Helpers, including database, video, graphics, social networking and much more.

Where to Start?
Many developers like to start learning a new technology by looking at working examples. If you want to take a look at a working Web Pages examples, follow the ASP.NET Web Pages Demo.

Web Pages Tutorial

If you are new to ASP.NET, Web Pages is the perfect place to start. In our Web Pages tutorial you will learn how to combine HTML, CSS, JavaScript and server code, using the latest Razor server markup syntax with Visual Basic or C# . You will also learn how to extend your web pages with programmable Web Helpers.

We Will Use WebMatrix

WebMatrix is a simple and powerful free development tool from Microsoft. WebMatrix is tailor made for Web Pages. Install WebMatrix now!

Web Pages Examples

Learn by examples! Because ASP.NET code is executed on the server, you cannot view the code in your browser. You will only see the output as plain HTML. At W3Schools every example displays the hidden ASP.NET code. This makes it easier for you to understand how it works. Web Pages Examples

Web Pages References

At the end of this tutorial you will find a complete set of ASP.NET references with objects, components, properties and methods. Web Pages References

ASP.NET Web Pages - Adding Razor Code

In this tutorial we will use Razor markup with C# and Visual Basic code

What is Razor?

Razor Razor Razor Razor is a markup syntax for adding server-based code to web pages has the power of traditional ASP.NET markup, but is easier to learn, and easier to use is a server side markup syntax much like ASP and PHP supports C# and Visual Basic programming languages

Adding Razor Code

Remember the web page from previous chapter:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Web Pages Demo</title> </head> <body> <h1>Hello Web Pages</h1> </body> </html>
Now add some Razor code to the example:

Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Web Pages Demo</title> </head> <body> <h1>Hello Web Pages</h1> <p>The time is @DateTime.Now</p> </body> </html>
Run example

The page contains ordinary HTML markup, with one addition: the @ marked Razor code. The Razor code does all the work of determining the current time on the server and display it. (You can specify formatting options, or just display the default)

Main Razor Syntax Rules for C#

Razor code blocks are enclosed in @{ ... } Inline expressions (variables and functions) start with @ Code statements end with semicolon Variables are declared with the var keyword Strings are enclosed with quotation marks C# code is case sensitive C# files have the extension .cshtml

C# Example
 @{ var myMessage = "Hello World"; }  <p>The value of myMessage is: @myMessage</p>  @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Today is: " + weekDay; } <p>The greeting is: @greetingMessage</p>
Run example

Main Razor Syntax Rules for VB

Razor code blocks are enclosed in @Code ... End Code Inline expressions (variables and functions) start with @ Variables are declared with the Dim keyword Strings are enclosed with quotation marks VB code is not case sensitive VB files have the extension .vbhtml

Example
 @Code dim myMessage = "Hello World" End Code  <p>The value of myMessage is: @myMessage</p>  @Code dim greeting = "Welcome to our site!" dim weekDay = DateTime.Now.DayOfWeek dim greetingMessage = greeting & " Today is: " & weekDay End Code <p>The greeting is: @greetingMessage</p>
Run example

More About C# and Visual Basic

If you want to learn more about Razor, and the C# and Visual Basic programming languages, go to the Razor section of this tutorial.

ASP.NET Web Pages - Page Layout

With Web Pages it is easy to create a web site with a consistent layout.

A Consistent Look
On the Internet you will discover many web sites with a consistent look and feel:

Every page have the same header Every page have the same footer Every page have the same style and layout

With Web Pages this can be done very efficiently. You can have reusable blocks of content (content blocks), like headers and footers, in separate files. You can also define a consistent layout for all your pages, using a layout template (layout file).

Content Blocks
Many websites have content that is displayed on every page (like headers and footers). With Web Pages you can use the @RenderPage() method to import content from separate files. Content block (from another file) can be imported anywhere in a web page, and can contain text, markup, and code, just like any regular web page. Using common headers and footers as an example, this saves you a lot of work. You don't have to write the same content in every page, and when you change the header or footer files, the content is updated in all your pages. This is how it looks in code:

Example
<html> <body> @RenderPage("header.cshtml") <h1>Hello Web Pages</h1> <p>This is a paragraph</p> @RenderPage("footer.cshtml") </body> </html>
Run example

Using a Layout Page

In the previous section, you saw that including the same content in many web pages is easy. Another approach to creating a consistent look is to use a layout page. A layout page contains the structure, but not the content, of a web page. When a web page (content page) is linked to a layout page, it will be displayed according to the layout page (template). The layout page is just like a normal web page, except from a call to the @RenderBody() method where the content page will be included. Each content page must start with a Layout directive. This is how it looks in code:

Layout Page:
<html> <body> <p>This is header text</p> @RenderBody() <p>© 2012 W3Schools. All rights reserved.</p> </body> </html>

Any Web Page:

@{Layout="Layout.cshtml";} <h1>Welcome to W3Schools</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. </p>
Run example

D.R.Y. - Don't Repeat Yourself

With two ASP.NET tools, Content Blocks and Layout Pages, you can give your web applications a consistent look. These tools also save you a lot of work, since you don't have to repeat the same information on all pages. Centralizing markup, style, and code makes web applications much more manageable and easier to maintain.

Preventing Files from Being Browsed

With ASP.NET, files with a name that starts with an underscore cannot be browsed from the web. If you want to prevent your content blocks or layout files from being viewed by your users, rename the files to: _header.cshtm _footer.cshtml _Layout.cshtml

Hiding Sensitive Information

With ASP.NET, the common way to hide sensitive information (database passwords, email passwords, etc.) is to keep the information in a separate file named "_AppStart".

_AppStart.cshtml
@{ WebMail.SmtpServer = "mailserver.example.com"; WebMail.EnableSsl = true; WebMail.UserName = "[email protected]"; WebMail.Password = "your-password"; WebMail.From = "[email protected]"; }

ASP.NET Web Pages - Folders

This chapter is about folders and folder paths.

In this chapter you will learn:

About Logical and Physical folder structures About Virtual and Physical names About web URLs and Paths

Logical Folder Structure

Below is a typical folder structure for an ASP.NET web pages web:

The The The The The

"Account" folder contains logon and security files "App_Data" folder contains databases and data files "Images" folder contains images "Scripts" folder contains browser scripts "Shared" folder contains common files (like layout and style files)

Physical Folder Structure

The physical structure for the "Images" folder at the website above might look like this on a computer: C:\Johnny\Documents\MyWebSites\Demo\Images

Virtual and Physical Names

From the example above: The virtual name of a web picture might be "Images/pic31.jpg". But the physical name is "C:\Johnny\Documents\MyWebSites\Demo\Images\pic31.jpg"

URLs and Paths

URLs are used to access files from the web: http://www.w3schools.com/html/html5_intro.asp The URL corresponds to a physical file on a server: C:\MyWebSites\htm\html5_intro.asp A virtual path is shorthand to represent physical paths. If you use virtual paths, you can move your pages to a different domain (or server) without having to update the paths. URL Server name Virtual path Physical path http://www.w3schools.com/html/html5_intro.asp w3schools /html/html5_intro.asp C:\MyWebSites\w3schools\/html/html5_intro.asp

The root on a disk drive is written like C:\, but the root on a web site is / (forward slash). The virtual path of a web folder is (almost) never the same as the physical folder. In your code you will, reference both the physical path and the virtual path, depending on what you are coding. ASP.NET has 3 tools for working with folder paths: the ~ operator, the Server.MapPath method, and the Href method.

The ~ Operator
To specify the virtual root in programming code, use the ~ operator. If you use the ~ operator, instead of a path, you can move your website to a different folder or location without changing any code:

var myImagesFolder = "~/images"; var myStyleSheet = "~/styles/StyleSheet.css";

The Server.MapPath Method

The Server.MapPath method converts a virtual path (/default.cshtml) to a physical path that the server can understand (C:\Johnny\MyWebSited\Demo\default.cshtml). You will use this method when you need to open data files located on the server (data files can only be accessed with a full physical path):

var pathName = "~/dataFile.txt"; var fileName = Server.MapPath(pathName);

You will learn more about reading from (and writing to) data files on the server in the next chapter of this tutorial.

The Href Method

The Href method converts a path used in the code to a path that the browser can understand (the browser cannot understand the ~ operator). You use the Href method to create paths to resources like image files, and CSS files. You will often use this method in HTML <a>, <img>, and <link> elements:

@{var myStyleSheet = "~/Shared/Site.css";}  <link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" />  <link rel="stylesheet" type="text/css" href="/Shared/Site.css" />
The Href method is a method of the WebPage Object.

ASP.NET Web Pages - Global Pages

This chapter is about the global pages AppStart and PageStart.

Before Web Startup: _AppStart

Most server side code are written inside individual web pages. For example, if a web page contains an input form, the web page typically contains server code for reading the data. However, by creating a page named _AppStart in the root of your site, you can have startup code executed before the site starts. If this page exists, ASP.NET runs it the first time any page in the site is requested. Typical use for _AppStart is startup code and initialization of global values like counters and global names. Note 1: _AppStart should have the same file extension as your web pages, like: _AppStart.cshtml. Note 2: _AppStart has an underscore prefix. Because of this, the files cannot be browsed directly.

Before Every Page: _PageStart

Just like _AppStart runs before your site starts, you can write code that runs before any page in each folder. For each folder in your web, you can add a file named _PageStart. Typical use for _PageStart is setting the layout page for all pages in a folder, or checking that a user is logged in before running a page.

How Does it Work?

The following diagram shows how it works:

When a request comes in, ASP.NET checks whether _AppStart exists. If so, and this is the first request to the site, _AppStart runs. Then ASP.NET checks whether _PageStart exists. If so, _PageStart runs, before the requested page. If you include a call to RunPage() inside _PageStart you specify where you want the requested page to run. If not, the _PageStart runs before the requested page.

ASP.NET Web Pages - HTML Forms

A form is a section of an HTML document where you put input controls (text boxes, check boxes, radio buttons, and pull-down lists)

Creating an HTML Input Page

Razor Example
<html> <body> @{ if (IsPost) { string companyname = Request["companyname"]; string contactname = Request["contactname"]; <p>You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname </p> } else { <form method="post" action=""> Company Name:<br /> <input type="text" name="CompanyName" value="" /><br /> Contact Name:<br /> <input type="text" name="ContactName" value="" /><br /><br /> <input type="submit" value="Submit" class="submit" /> </form> } } </body> </html>

Run example

Razor Example - Displaying Images

Suppose you have 3 images in your image folder, and you want to display images dynamically by the users choice. This is easily done by a little Razor code. If you have an image called "Photo1.jpg" in your images folder on your web site, you can display the image using an HTML <img> element like this:

<img src="images/Photo1.jpg" alt="Sample" />

The example below shows how to display a selected picture which the user selects from a drop-down list:

Razor Example
@{ var imagePath=""; if (Request["Choice"] != null) {imagePath="images/" + Request["Choice"];} } <!DOCTYPE html> <html> <body> <h1>Display Images</h1> <form method="post" action="">

I want to see: <select name="Choice"> <option value="Photo1.jpg">Photo 1</option> <option value="Photo2.jpg">Photo 2</option> <option value="Photo3.jpg">Photo 3</option> </select> <input type="submit" value="Submit" /> @if (imagePath != "") { <p> <img src="@imagePath" alt="Sample" /> </p> } </form> </body> </html>

Run example

Example explained
The server creates a variable called imagePath. The HTML page has a drop-down list (a <select> element) named Choice. It lets the user select a friendly name (like Photo 1), and passes a file name (like Photo1.jpg) when the page is submitted to the web server.

The Razor code reads the value of Choice by Request["Choice"]. If it has a value the code constructs a path to the image (images/Photo1.jpg, and stores it in the variable imagePath. In the HTML page there is an <img> element to display the image. The src attribute is set to the value of the imagePath variable when the page displays. The <img> element is in an if block to prevent trying to display an image with no name (like the first time the page is displayed.

ASP.NET Web Pages - Objects

Web Pages is much often about Objects.

The Page Object

You have already seen some Page Object methods in use:

@RenderPage("header.cshtml") @RenderBody()
In the previous chapter you saw two Page Object properties being used (isPost, and Request):

If (isPost) { if (Request["Choice"] != null {

Some Page Object Methods

Method href RenderBody() Description Builds a URL using the specified parameters Renders the portion of a content page that is not within a named section (In layout pages) Renders the content of one page within another page

RenderPage(page)

RenderSection(section) Renders the content of a named section (In layout pages) Write(object) WriteLitteral Writes the object as an HTML-encoded string Writes an object without HTML-encoding it first.

Some Page Object Properties

Property isPost Description Returns true if the HTTP data transfer method used by the client is a POST request Gets or sets the path of a layout page Provides property-like access to data shared between pages and layout pages Gets the HttpRequest object for the current HTTP request Gets the HttpServerUtility object that provides web-page processing methods

Layout Page Request Server

The Page Property (of the Page Object)

The Page property of the Page Object, provides property-like access to data shared between pages and layout pages. You can use (add) your own properties to the Page property:

Page.Title Page.Version Page.anythingyoulike

The pages property is very helpful. For instance, it makes it possible to set the page title in content files, and use it in the layout file:

Home.cshtml
@{ Layout="~/Shared/Layout.cshtml"; Page.Title="Home Page" } <h1>Welcome to W3Schools</h1> <h2>Web Site Main Ingredients</h2> <p>A Home Page (Default.cshtml)</p> <p>A Layout File (Layout.cshtml)</p> <p>A Style Sheet (Site.css)</p>

Layout.cshtml
<!DOCTYPE html> <html> <head> <title>@Page.Title</title> </head> <body> @RenderBody() </body> </html

ASP.NET Web Pages - Files

This chapter is about working with text files.

Working with Text Files

In a previous chapter, we looked at web data stored in a database. Your web site may also have data stored in text files. Text files used to store data is often called flat files. Common text file formats are .txt, .xml, and .csv (comma-delimited values). In this chapter you will learn:

How to read and display data from a text file

Add a Text File Manually

In the example to follow, you will need a text file to work with. On your web site, if you don't have an App_Data folder, create one. In the App_Data folder, create a new file named Persons.txt. Add the following content to the file:

Persons.txt
George,Lucas Steven,Spielberg Alfred,Hitchcock

Displaying Data from a Text File

The example below shows how to display data from a text file:

Example
@{ var dataFile = Server.MapPath("~/App_Data/Persons.txt"); Array userData = File.ReadAllLines(dataFile); } <!DOCTYPE html> <html> <body> <h1>Reading Data from a File</h1> @foreach (string dataLine in userData) { foreach (string dataItem in dataLine.Split(',')) {@dataItem <text> </text>} <br /> } </body> </html>

Run example

Example explained
Server.MapPath finds the exact text file path. File.ReadAllLines opens the text file and reads all lines from the file into an array. For each dataItem in each dataline of the array the data is displayed.

Displaying Data from an Excel File

With Microsoft Excel, you can save a spreadsheet as a comma-delimited text file (.csv file). When you do so, each row in the spreadsheet is saved as a text line, and each data column is separated by a comma. You can use the example above to read an Excel .csv file (just change the file name to the name of the Excel file).

ASP.NET Web Pages - Helpers

Web Helpers greatly simplifies web development and common programming tasks.

ASP.NET Helpers
ASP.NET helpers are components that can be accessed by single lines of Razor code. You can build your own helpers using Razor syntax stored as .cshtml files, or use built-in ASP.NET helpers. You will learn how to use Razor helpers in the next chapters of this tutorial. Below is a short description of some useful Razor helpers:

The WebGrid Helper

The WebGrid helper simplifies the way to display data:

Automatically sets up an HTML table to display data Supports different options for formatting Supports paging (First, next, previous, last) through data Supports sorting by clicking on column headings

The Chart Helper

The "Chart Helper" can display chart images of different types with many formatting options and labels.

The Chart helper can display data from arrays , from databases, or from files.

The WebMail Helper

The WebMail helper provides functions for sending email messages using SMTP (Simple Mail Transfer Protocol).

The WebImage Helper

The WebImage helper provides functionality to manage images in a web page. Keywords: flip, rotate, resize, watermark.

Third Party Helpers

With Razor you can take advantage of built-in or third party helpers to simplify the use of email, databases, multimedia, and social networks as well as many other issues like navigation and web security.

Installing Helpers
Some helpers are already included with WebMatrix, but you can install others as well. In the W3Schools Helper Reference you can find a quick reference for included helpers and other helpers that you can install as part of a package called the ASP.NET Web Helpers Library. If you have a web site created in WebMatrix, use the following procedure to install helpers: 1. 2. 3. 4. 5. In WebMatrix, open the Site workspace. Click on Web Pages Administration. Login to Web Pages Administration using a password *. Search for helpers using the search field. Click install to install your desired helpers.

(* the first time you use Web Pages Administration, it will prompt you to create a password)

ASP.NET Web Pages - The WebGrid Helper

WebGrid - One of many useful ASP.NET Web Helpers.

Doing the HTML Yourself

In the previous chapter, you displayed database data by using razor code, and doing all the HTML markup yourself:

Database Example
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td align="right">@row.Price</td> </tr> } </table> </body> </html>

Run example

Using The WebGrid Helper

Using the WebGrid helper is an easier way to display data. The WebGrid helper:

Automatically sets up an HTML table to display data Supports different options for formatting Supports paging through data Supports Sorting by clicking on column headings

WebGrid Example
@{ var db = Database.Open("SmallBakery") ; var selectQueryString = "SELECT * FROM Product ORDER BY Id"; var data = db.Query(selectQueryString); var grid = new WebGrid(data); } <html> <head> <title>Displaying Data Using the WebGrid Helper</title> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid.GetHtml()

</div> </body> </html>

Run example

ASP.NET Web Pages - The Chart Helper

The Chart Helper - One of many useful ASP.NET Web Helpers.

The Chart Helper

In the previous chapters, you learned how to use an ASP.NET "Helper". You learned how to display data in a grid using the "WebGrid Helper". This chapter explains how to display data in graphical form, using the "Chart Helper". The "Chart Helper" can create chart images of different types with many formatting options and labels. It can create standard charts like area charts, bar charts, column charts, line charts, and pie charts, along with more specialized charts like stock charts.

The data you display in a chart can be from an array, from a database, or from data in a file.

Chart From an Array

The example below shows the code needed to display a chart from an array of values:

Example
@{ var myChart = new Chart(width: 600, height: 400) .AddTitle("Employees") .AddSeries(chartType: "column", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); }

Run example

- new Chart creates a new chart object and sets its width and height - the AddTitle method specifies the chart title - the AddSeries method adds data to the chart - the chartType parameter defines the type of chart - the xValue parameter defines x-axis names - the yValues parameter defines the y-axis values - the Write() method displays the chart

Chart From Database Data

You can run a database query and then use data from the results to create a chart:

Example
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Name, Price FROM Product");

var myChart = new Chart(width: 600, height: 400) .AddTitle("Product Sales") .DataBindTable(dataSource: dbdata, xField: "Name") .Write(); }

Run example

- var db = Database.Open opens the database (and assigns the database object to the variable db) - var dbdata = db.Query runs a database query and stores the result in dbdata - new Chart creates a chart new object and sets its width and height - the AddTitle method specifies the chart title - the DataBindTable method binds the data source to the chart - the Write() method displays the chart An alternative to using the DataBindTable method is to use AddSeries (See previous example). DataBindTable is easier to use, but AddSeries is more flexible because you can specify the chart and data more explicitly:

Example
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Name, Price FROM Product"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Product Sales") .AddSeries(chartType:"Pie", xValue: dbdata, xField: "Name", yValues: dbdata, yFields: "Price") .Write(); }

Run example

Chart From XML Data

The third option for charting is to use an XML file as the data for the chart:
Example
@using System.Data; @{ var dataSet = new DataSet(); dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));

dataSet.ReadXml(Server.MapPath("data.xml")); var dataView = new DataView(dataSet.Tables[0]); var myChart = new Chart(width: 600, height: 400) .AddTitle("Sales Per Employee") .AddSeries("Default", chartType: "Pie", xValue: dataView, xField: "Name", yValues: dataView, yFields: "Sales") .Write();} }

Run example

ASP.NET Web Pages - The WebMail Helper

The WebMail Helper - One of many useful ASP.NET Web Helpers.

The WebMail Helper

The WebMail Helper makes it easy to send an email from a web application using SMTP (Simple Mail transfer Protocol).

Scenario: Email Support

To demonstrate the use of email, we will create an input page for support, let the user submit the page to another page, and send an email about the support problem.

First: Edit Your AppStart Page

If you have built the Demo application in this tutorial, you already have a page called _AppStart.cshtml with the following content:

_AppStart.cshtml
@{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); }

To initiate the WebMail helper, add the the following WebMail properties to your AppStart page:

_AppStart.cshtml
@{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 25; WebMail.EnableSsl = false; WebMail.UserName = "[email protected]"; WebMail.Password = "password-goes-here";

WebMail.From = "[email protected]"; }

Properties explained: SmtpServer: The name the SMTP server that will be used to send the emails. SmtpPort: The port the server will use to send SMTP transactions (emails). EnableSsl: True, if the server should use SSL (Secure Socket Layer) encryption. UserName: The name of the SMTP email account used to send the email. Password: The password of the SMTP email account. From: The email to appear in the from address (often the same as UserName).

Second: Create an Email Input Page

Then create an input page, and name it Email_Input:

Email_Input.cshtml
<!DOCTYPE html> <html> <body> <h1>Request for Assistance</h1> <form method="post" action="EmailSend.cshtml"> <label>Username:</label> <input type="text name="customerEmail" /> <label>Details about the problem:</label> <textarea name="customerRequest" cols="45" rows="4"></textarea> <p><input type="submit" value="Submit" /></p> </form> </body> </html> }

The purpose of the input page is to collect information, then submit the data to a new page that can send the information as an email.

Third: Create An Email Send Page

Then create the page that will be used to send the email, and name it Email_Send:

Email_Send.cshtml
@{ // Read input var customerEmail = Request["customerEmail"]; var customerRequest = Request["customerRequest"]; try { // Send email WebMail.Send(to:"[email protected]", subject: "Help request from - " + customerEmail, body: customerRequest ); } catch (Exception ex ) { <text>@ex</text> } }
For more information about sending emails from a ASP.NET Web Pages application, please see the:WebMail Object Reference.

ASP.NET Web Pages - PHP

Attention PHP Developers. Web Pages can be written in PHP.

WebMatrix Supports PHP

At first look, WebMatrix only supports Microsoft technologies. This is not true. In WebMatrix you can write full PHP applications with MySQL and all.

Create a PHP Site

In the chapter ASP.NET Web Pages - Create a Web Site you created a new empty web site named "Demo", with a new empty page of the type "CSHTML". Repeat the process, create an empty site named "Demo_PHP", enable PHP (see picture below), create a new empty page of the type PHP, name it "index.php", and you have created your first PHP site.

Create a PHP Page

Put the following code inside the "index.php" file:

index.php
<!DOCTYPE html> <html> <body> <?php phpinfo(); ?> </body> </html>
Run the file and see PHP at work.

ASP.NET Web Pages - Publishing the Website

Learn how to publish a Web Pages application without using WebMatrix.

Publish Your Application Without Using WebMatrix

An ASP.NET Web Pages application can be published to a remote server by using the Publish commands in WebMatrix (,Visual Web Developer,or Visual Studio). This function copies all your application files, cshtml pages, images, and all the required DLL files for Web Pages, for Razor, for Helpers, and for SQL Server Compact (if a database is used). Sometimes you don't want to use this option. Maybe your hosting provider only supports FTP? Maybe you already have a web site based on classic ASP? Maybe you want to copy the files yourself? Maybe you want to use Front Page, Expression Web, or some other publishing software? Will you get a problem? Yes, you will. But you can solve it. To perform a web copy, you have to know how to include the right files, what DDL files to copy, and where store them. Follow these steps:

1. Use the Latest Version of ASP.NET

Before you continue, make sure your hosting computer runs the latest version of ASP.NET (4.0).

2. Copy the Web Folders

Copy your website (all folders and content) from your development computer to an application folder on your remote hosting computer (server). If your App_Data folder contains test data, don't copy the App_Data folder (see SQL Data below).

3. Copy the DLL Files

On the remote server create a bin folder in the root of your application. (If you have installed Helpers, you already have a bin folder)

Copy everything from your folder: C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies to your application's bin folder on the remote server.

4. Copy the SQL Server Compact DLL Files

If your application has a SQL Server Compact database (an .sdf file in App_Data folder), you must copy the SQL Server Compact DLL files: Copy everything from your folder: C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v4.0\Private to your application's bin folder on the remote server. Create (or edit) the Web.config file for your application:

Example C#
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.data> <DbProviderFactories> <remove invariant="System.Data.SqlServerCe.4.0" /> <add invariant="System.Data.SqlServerCe.4.0" name="Microsoft SQL Server Compact 4.0" description=".NET Framework Data Provider for Microsoft SQL Server Compact" type="System.Data.SqlServerCe.SqlCeProviderFactory, System.Data.SqlServerCe, Version=4.0.0.1,Culture=neutral, PublicKeyToken=89845dcd8080cc91" /> </DbProviderFactories> </system.data> </configuration>

5. Copy SQL Server Compact Data

Do you have .sdf files in your App_Data folder that contains test data? Do you want to publish the test data to the remote server? Most likely not. If you have to copy the SQL data files (.sdf files), you should delete everything in the database, and then copy the empty .sdf file from your development computer to the server.

ASP.NET Web Pages - Examples in C# and VB

Learn ASP.NET Web Pages by C# and Visual Basic examples.

Examples in C#
Basic Web Pages Display Date and Time Reusable Header and Footer Basic HTML Form Examples Explained Basic C# For Loop For Each Loop While Loop Array If Condition If Else Condition Else If Condition Switch Condition Examples Explained Working with Databases Display Database Data Display Data with WebGrid Examples Explained Using the Chart Helper Display Display Display Display a a a a Bar Chart from an Array Bar Chart from a Database Pie Chart from a Database Pie Chart from an XML File

Examples in VB
Basic Web Pages Display Date and Time Reusable Header and Footer Basic HTML Form Examples Explained Basic VB For Loop For Each Loop While Loop Array If Condition If Else Condition Else If Condition Select Condition Examples Explained Working with Databases Display Database Data Display Data with WebGrid Examples Explained Using the Chart Helper Display Display Display Display a a a a Bar Chart from an Array Bar Chart from a Database Pie Chart from a Database Pie Chart from an XML File

Examples Explained

WP References

ASP.NET Web Pages - Classes

ASP.NET Classes Reference

Method AsBool(), AsBool(true|false) Description Converts a string value to a Boolean value (true/false). Returns false or the specified value if the string does not represent true/false. Converts a string value to date/time. Returns DateTime. MinValue or the specified value if the string does not represent a date/time. Converts a string value to a decimal value. Returns 0.0 or the specified value if the string does not represent a decimal value. Converts a string value to a float. Returns 0.0 or the specified value if the string does not represent a decimal value. Converts a string value to an integer. Returns 0 or the specified value if the string does not represent an integer. Creates a browser-compatible URL from a local file path, with optional additional path parts. Renders value as HTML markup instead of rendering it as HTMLencoded output.

AsDateTime(), AsDateTime(value)

AsDecimal(), AsDecimal(value)

AsFloat(), AsFloat(value)

AsInt(), AsInt(value)

Href(path [, param1 [, param2]])

Html.Raw(value)

IsBool(), IsDateTime(), IsDecimal(), IsFloat(), IsInt()

Returns true if the value can be converted from a string to the specified type. Returns true if the object or variable has no value. Returns true if the request is a POST. (Initial requests are usually a GET.) Specifies the path of a layout page to apply to this page. Contains data shared between the page, layout pages, and partial pages in the current request. You can use the dynamic Page property to access the same data, as in the following example: (Layout pages) Renders the content of a content page that is not in any named sections. Renders a content page using the specified path and optional extra data. You can get the values of the extra parameters from PageData by position (example 1) or key (example 2). (Layout pages) Renders a content section that has a name. Setrequired to false to make a section optional. Gets or sets the value of an HTTP cookie. Gets the files that were uploaded in the current request. Gets data that was posted in a form (as strings). Request[key] checks both the Request.Form and the Request.QueryString collections.

IsEmpty()

IsPost

Layout

PageData[key], PageData[index], Page

RenderBody()

RenderPage(path, values) RenderPage(path[, param1 [, param2]])

RenderSection(sectionName [, required = true|false])

Request.Cookies[key]

Request.Files[key]

Request.Form[key]

Request.QueryString[key]

Gets data that was specified in the URL query string. Request[key] checks both the Request.Form and the Request.QueryString collections.

Request.Unvalidated(key) Selectively disables request validation Request.Unvalidated().QueryString|Form|Cookies|Headers[key] for a form element, query-string value, cookie, or header value. Request validation is enabled by default and prevents users from posting markup or other potentially dangerous content. Response.AddHeader(name, value) Adds an HTTP server header to the response. Caches the page output for a specified time. Optionally setsliding to reset the timeout on each page access andvaryByParams to cache different versions of the page for each different query string in the page request. Redirects the browser request to a new location. Sets the HTTP status code sent to the browser. Writes the contents of data to the response with an optional MIME type. Writes the contents of a file to the response. (Layout pages) Defines a content section that has a name. Decodes a string that is HTML encoded. Encodes a string for rendering in HTML markup. Returns the server physical path for the specified virtual path.

Response.OutputCache(seconds [, sliding] [, varyByParams])

Response.Redirect(path)

Response.SetStatus(httpStatusCode)

Response.WriteBinary(data [, mimetype])

Response.WriteFile(file)

@section(sectionName) { content }

Server.HtmlDecode(htmlText)

Server.HtmlEncode(text)

Server.MapPath(virtualPath)

Server.UrlDecode(urlText) Server.UrlEncode(text) Session[key]

Decodes text from a URL. Encodes text to put in a URL. Gets or sets a value that exists until the user closes the browser. Displays a string representation of the object's value. Gets additional data from the URL (for example, /MyPage/ExtraData).

ToString()

UrlData[index]

ASP.NET Web Pages - WebSecurity Object

Description
The WebSecurity Object provides security and authentication for ASP.NET Web Pages applications. With the WebSecurity object you can create user accounts, login and logout users, reset or change passwords, and more.

WebSecurity Object Reference - Properties

Properties CurrentUserId CurrentUserName HasUserId IsAuthenticated Description Gets the ID for the current user Gets the name of the current user Returns true if the current has a user ID Returns true if the current user is logged in

WebSecurity Object Reference - Methods

Method ChangePassword() ConfirmAccount() CreateAccount() CreateUserAndAccount() GeneratePasswordResetToken() GetCreateDate() GetPasswordChangeDate() GetUserId() Description Changes the password for a user Confirms an account using a confirmation token Creates a new user account Creates a new user account Generates a token that can be sent to as user by email Gets the time the specified membership was created Gets the date and time when password was changed Gets a user ID from a user name

InitializeDatabaseConnection() IsConfirmed() IsCurrentUser() Login() Logout() RequireAuthenticatedUser() RequireRoles() RequireUser() ResetPassword() UserExists()

Initializes the WebSecurity system (database) Checks if a user is confirmed Checks if the current user matches a user name Logs the user in by setting a token in the cookie Logs the user out by removing the token cookie Exits the page if the user is not an authenticated user Exits the page if the user is not a part of the specified roles Exits the page if the user is not the specified user Changes a user's password using a token Checks if a given user exists

Technical Data
Name Class Namespace Assembly Value WebMatrix.WebData.WebSecurity WebMatrix.WebData WebMatrix.WebData.dll

Initializing the WebSecurity Database

You must create or initialize an WebSecurity database before you can use the WebSecurity object in your code. In the root of your web, create a page (or edit the page ) named _AppStart.cshtml. Put the following code inside the file:

_AppStart.cshtml
@{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); }
The code above will run each time the web site (application) starts. It initializes the WebSecurity database. "Users" is the name of the WebSecurity database (Users.sdf). "UserProfile" is the name of the database table that contains the user profile information. "UserId" is the name of the column that contains the user IDs (primary key). "Email" is the name of the column that contains user names. The last parameter true is a boolean value indicating that the user profile and membership tables should be created automatically if they don't exist, otherwise false. Although true indicates automatic creation of the database tables, the database itself will not be created automatically. It must exist.

The WebSecurity Database

The UserProfile table contains one record for each user, with a user ID (primary key) and the user's name (email): UserId 1 2 3 Email [email protected] [email protected] [email protected]

The Membership table will contain membership information about when the user was created and if (and when) the membership was confirmed.

Much like this (some columns are not shown):

User Create Id Date

Confirmation Is Last Password Token Confirmed Password Failure NULL True NULL

Password Change

12.04.2012 16:12:17

AFNQhWfy.... 12.04.2012 16:12:17

Note: If you want to see all columns and all content, open the database with WebMatrix and look inside each table.

Simple Membership Configuration

You might get errors using the WebSecurity object, if your site is not configured to use the ASP.NET Web Pages membership system SimpleMembership. This can occur if a hosting provider's server is configured differently than your local server. To fix this, add the following element to the site's Web.config file:

<appSettings> <add key="enableSimpleMembership" value="true" /> </appSettings>

ASP.NET Web Pages - Database Object

ASP.NET Database Object Reference

Method Database.Execute(SQLstatement [, parameters]

Description Executes SQLstatement (with optional parameters) such as INSERT, DELETE, or UPDATE and returns a count of affected records. Returns the identity column from the most recently inserted row. Opens either the specified database file or the database specified using a named connection string from the Web.config file.

Database.GetLastInsertId()

Database.Open(filename) Database.Open(connectionStringName)

Database.OpenConnectionString(connectionString) Opens a database using the connection string. (This contrasts with Database.Open, which uses a connection string name.) Database.Query(SQLstatement[, parameters]) Queries the database using SQLstatement(optionally passing parameters) and returns the results as a collection. Executes SQLstatement (with optional parameters) and returns a single record. Executes SQLstatement (with optional parameters) and returns a single value.

Database.QuerySingle(SQLstatement [, parameters]) Database.QueryValue(SQLstatement [, parameters])

ASP.NET Web Pages - WebMail Object

With the WebMail object you can easily send emails from a web page.

Description
The WebMail Object provides email for ASP.NET Web Pages using SMTP (Simple Mail Transfer Protocol).

Example
See an example in the chapter: Web Pages Email.

WebMail Object Reference - Properties

Properties SmtpServer SmtpPort EnableSsl UserName Password From Description The name the SMTP server that will send the emails The port the server will use to send SMTP emails True, if the server should use SSL encryption The name of the SMTP account used to send the email The password of the SMTP account The email to appear in the from address

WebMail Object Reference - Methods

Method Send() Description Sends an email message to an SMTP server for delivery

The Send() method has the following parameters: Parameter to subject body Type String String String Description The Email recipients (separated by semicolon) The subject line The body of the message

And the following optional parameters: Parameter from cc filesToAttach isBodyHtml additionalHeaders Type String String Collection Boolean Collection Description The email of the sender The cc emails (separated by semicolon) Filenames True if the email body is in HTML Additional headers

Technical Data
Name Class Namespace Assembly Value System.Web.Helpers.WebMail System.Web.Helpers System.Web.Helpers.dll

Initializing the WebMail Helper

To use the WebMail helper, you need access to an SMTP server. SMTP is the "output" part of email. If you use a web host, you probably already know the name of the SMTP server. If you work in a

corporate network, your IT department can give you the name. If you are working at home, you might be able to use your ordinary email provider. In order to send an email you will need:

The name of the SMTP server The port number (most often 25) An email user name An email password

In the root of your web, create a page (or edit the page ) named _AppStart.cshtml. Put the following code inside the file:

_AppStart.cshtml
@} WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 25; WebMail.EnableSsl = false; WebMail.UserName = "[email protected]"; WebMail.Password = "password"; WebMail.From = "[email protected]" }
The code above will run each time the web site (application) starts. It feeds your WebMail Objectwith initial values. Please substitute: smtp.example.com with the name the SMTP server that will be used to send the emails. 25 with the port number the server will use to send SMTP transactions (emails). false with true, if the server should use SSL (Secure Socket Layer) encryption. [email protected] with the name of the SMTP email account used to send emails. password with the password of the SMTP email account. john@example with the email to appear in the from address. You don't have to initiate the WebMail object in your AppStart file, but you must set these properties before you call the WebMail.Send() method.

ASP.NET Web Pages - More Helpers

ASP.NET Helpers - Objects References Analytics Object Reference (Google)
Helper Analytics.GetGoogleHtml(webPropertyId) Description Renders the Google Analytics JavaScript code for the specified ID. Renders the StatCounter Analytics JavaScript code for the specified project. Renders the Yahoo Analytics JavaScript code for the specified account.

Analytics.GetStatCounterHtml(project, security)

Analytics.GetYahooHtml(account)

Bing Object Reference

Helper Bing.SearchBox([boxWidth]) Description Passes a search to Bing. To specify the site to search and a title for the search box, you can set the Bing.SiteUrl and Bing.SiteTitle properties. Normally you set these properties in the_AppStart page. Displays Bing search results in the page with optional formatting. To specify the site to search and a title for the search box, you can set the Bing.SiteUrl and Bing.SiteTitle properties. Normally you set these properties in the_AppStart page.

Bing.AdvancedSearchBox([, boxWidth] [, resultWidth] [, resultHeight] [, themeColor] [, locale])

Chart Object Reference

Helper Chart(width, height [, template] [, templatePath]) Chart.AddLegend([title] [, name]) Description Initializes a chart. Adds a legend to a chart.

Chart.AddSeries([name] [, chartType] [, Adds a series of values to the chart. chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options])

Crypto Object Reference

Helper Crypto.Hash(string [, algorithm]) Crypto.Hash(bytes [, algorithm]) Description Returns a hash for the specified data. The default algorithm is sha256.

Facebook Object Reference

Helper Facebook.LikeButton(href [, buttonLayout] [, showFaces] [, width] [, height] [, action] [, font] [, colorScheme] [, refLabel]) Description Lets Facebook users make a connection to pages.

FileUpload Object Reference

Helper FileUpload.GetHtml([initialNumberOfFiles] [,allowMoreFilesToBeAdded] [, includeFormTag] [, addText] [, uploadText]) Description Renders UI for uploading files.

GamerCard Object Reference

Helper GamerCard.GetHtml(gamerTag) Description Renders the specified Xbox gamer tag.

Gravatar Object Reference

Helper Gravatar.GetHtml(email [, imageSize] [, defaultImage] [, rating] [, imageExtension] [, attributes]) Description Renders the Gravatar image for the specified email address.

Json Object Reference

Helper Json.Encode(object) Description Converts a data object to a string in the JavaScript Object Notation (JSON) format. Converts a JSON-encoded input string to a data object that you can iterate over or insert into a database.

Json.Decode(string)

LinkShare Object Reference

Helper LinkShare.GetHtml(pageTitle [, pageLinkBack] [, twitterUserName] [, additionalTweetText] [, linkSites]) Description Renders social networking links using the specified title and optional URL.

ModelState Object Reference

Helper Description

ModelStateDictionary.AddError(key, errorMessage) Associates an error message with a form field. Use the ModelState helper to access this member. ModelStateDictionary.AddFormError(errorMessage) Associates an error message with a form. Use the ModelState helper to access this member. ModelStateDictionary.IsValid Returns true if there are no validation errors. Use the ModelState helper to access this member.

ObjectInfo Object Reference

Helper ObjectInfo.Print(value [, depth] [, enumerationLength]) Description Renders the properties and values of an object and any child objects.

Recaptcha Object Reference

Helper Recaptcha.GetHtml([, publicKey] [, theme] [, language] [, tabIndex]) ReCaptcha.PublicKey ReCaptcha.PrivateKey Description Renders the reCAPTCHA verification test.

Sets public and private keys for the reCAPTCHA service. Normally you set these properties in the_AppStart page. Returns the result of the reCAPTCHA test. Renders status information about ASP.NET Web Pages.

ReCaptcha.Validate([, privateKey]) ServerInfo.GetHtml()

Twitter Object Reference

Helper Twitter.Profile(twitterUserName) Twitter.Search(searchQuery) Description Renders a Twitter stream for the specified user. Renders a Twitter stream for the specified search text.

Video Object Reference

Helper Video.Flash(filename [, width, height]) Description Renders a Flash video player for the specified file with optional width and height. Renders a Windows Media player for the specified file with optional width and height. Renders a Silverlight player for the specified .xapfile with required width and height.

Video.MediaPlayer(filename [, width, height])

Video.Silverlight(filename, width, height)

WebCache Object Reference

Helper WebCache.Get(key) Description Returns the object specified by key, or null if the object is not found. Removes the object specified by key from the cache. Puts value into the cache under the name specified by key.

WebCache.Remove(key)

WebCache.Set(key, value [, minutesToCache] [, slidingExpiration])

WebGrid Object Reference

Helper WebGrid(data) Description Creates a new WebGrid object using data from a query. Renders markup to display data in an HTML table. Renders a pager for the WebGrid object.

WebGrid.GetHtml() WebGrid.Pager()

WebImage Object Reference

Helper WebImage(path) WebImage.AddImagesWatermark(image) WebImage.AddTextWatermark(text) WebImage.FlipHorizontal() WebImage.FlipVertical() WebImage.GetImageFromRequest() Description Loads an image from the specified path. Adds the specified image as a watermark. Adds the specified text to the image. Flips the image horizontally or vertically.

Loads an image when an image is posted to a page during a file upload. Resizes the image. Rotates the image to the left or the right.

WebImage.Resize(width, height) WebImage.RotateLeft() WebImage.RotateRight() WebImage.Save(path [, imageFormat])

Saves the image to the specified path.

ASP.NET Razor

ASP.NET Razor - Markup

Razor is not a programming language. It's a server side markup language.

What is Razor?
Razor is a markup syntax that lets you embed server-based code (Visual Basic and C#) into web pages. Server-based code can create dynamic web content on the fly, while a web page is written to the browser. When a web page is called, the server executes the server-based code inside the page before it returns the page to the browser. By running on the server, the code can perform complex tasks, like accessing databases. Razor is based on ASP.NET, and designed for creating web applications. It has the power of traditional ASP.NET markup, but it is easier to use, and easier to learn.

Razor Syntax
Razor uses a syntax very similar to PHP and Classic ASP. Razor:

<ul> @for (int i = 0; i < 10; i++) { <li>@i</li> } </ul>

PHP:

Web Forms (and Classic ASP):

Razor Helpers
ASP.NET helpers are components that can be accessed by single lines of Razor code. You can build your own helpers using Razor syntax, or use built-in ASP.NET helpers. Below is a short description of some useful Razor helpers:

Web Grid Web Graphics Google Analytics Facebook Integration Twitter Integration Sending Email Validation

Razor Programming Languages

Razor supports both C# (C sharp) and VB (Visual Basic).

ASP.NET Razor - C# and VB Code Syntax

Razor supports both C# (C sharp) and VB (Visual Basic).

Main Razor Syntax Rules for C#

Run example

Main Razor Syntax Rules for VB

100

Run example

How Does it Work?

Razor is a simple programming syntax for embedding server code in web pages. Razor syntax is based on the ASP.NET framework, the part of the Microsoft.NET Framework that's specifically designed for creating web applications. The Razor syntax gives you all the power of ASP.NET, but is using a simplified syntax that's easier to learn if you're a beginner, and makes you more productive if you're an expert. Razor web pages can be described as HTML pages with two kinds of content: HTML content and Razor code. When the server reads the page, it runs the Razor code first, before it sends the HTML page to the browser. The code that is executed on the server can perform tasks that cannot be done in the browser, for example accessing a server database. Server code can create dynamic HTML content on the fly, before it is sent to the browser. Seen from the browser, the HTML generated by server code is no different than static HTML content. ASP.NET web pages with Razor syntax have the special file extension cshtml (Razor using C#) or vbhtml (Razor using VB).

101

Working With Objects

Server coding often involves objects. The "Date" object is a typical built-in ASP.NET object, but objects can also be self-defined, a web page, a text box, a file, a database record, etc. Objects may have methods they can perform. A database record might have a "Save" method, an image object might have a "Rotate" method, an email object might have a "Send" method, and so on. Objects also have properties that describe their characteristics. A database record might have a FirstName and a LastName property (amongst others). The ASP.NET Date object has a Now property (written as Date.Now), and the Now property has a Day property (written as Date.Now.Day). The example below shows how to access some properties of the Date object:

Example
<table border="1"> <tr> <th width="100px">Name</th> <td width="100px">Value</td> </tr> <tr> <td>Day</td><td>@DateTime.Now.Day</td> </tr> <tr> <td>Hour</td><td>@DateTime.Now.Hour</td> </tr> <tr> <td>Minute</td><td>@DateTime.Now.Minute</td> </tr> <tr> <td>Second</td><td>@DateTime.Now.Second</td> </tr> </td> </table>

Run example

102

If and Else Conditions

An important feature of dynamic web pages is that you can determine what to do based on conditions. The common way to do this is with the if ... else statements:

Example
@{ var txt = ""; if(DateTime.Now.Hour > 12) {txt = "Good Evening";} else {txt = "Good Morning";} } <html> <body> <p>The message is @txt</p> </body> </html>

Run example

103

Reading User Input

Another important feature of dynamic web pages is that you can read user input. Input is read by the Request[] function, and posting (input) is tested by the IsPost condition:

Example
@{ var totalMessage = ""; if(IsPost) { var num1 = Request["text1"]; var num2 = Request["text2"]; var total = num1.AsInt() + num2.AsInt(); totalMessage = "Total = " + total; } } <html> <body style="background-color: beige; font-family: Verdana, Arial;"> <form action="" method="post"> <p><label for="text1">First Number:</label><br> <input type="text" name="text1" /></p> <p><label for="text2">Second Number:</label><br> <input type="text" name="text2" /></p> <p><input type="submit" value=" Add " /></p>

104

</form> <p>@totalMessage</p> </body> </html>

Run example

105

ASP.NET Razor - C# Variables

Variables are named entities used to store data.

Variables
Variables are used to store data. The name of a variable must begin with an alphabetic character and cannot contain whitespace or reserved characters. A variable can be of a specific type, indicating the kind of data it stores. String variables store string values ("Welcome to W3Schools"), integer variables store number values (103), date variables store date values, etc. Variables are declared using the var keyword, or by using the type (if you want to declare the type), but ASP.NET can usually determine data types automatically.

Examples
// Using the var keyword: var greeting = "Welcome to W3Schools"; var counter = 103; var today = DateTime.Today; // Using data types: string greeting = "Welcome to W3Schools"; int counter = 103; DateTime today = DateTime.Today;

Data Types
Below is a list of common data types: Type int float Description Integer (whole numbers) Floating-point number Examples 103, 12, 5168 3.14, 3.4e38

106

decimal bool string

Decimal number (higher precision) Boolean String

1037.196543 true, false "Hello W3Schools", "John"

Operators
An operator tells ASP.NET what kind of command to perform in an expression. The C# language supports many operators. Below is a list of common operators: Operator = + * / += -= == != < > <= >= + . () () [] Description Assigns a value to a variable. Adds a value or variable. Subtracts a value or variable. Multiplies a value or variable. Divides a value or variable. Increments a variable. Decrements a variable. Equality. Returns true if values are equal. Inequality. Returns true if values are not equal. Less than. Greater than. Less than or equal. Greater than or equal. Adding strings (concatenation). Dot. Separate objects and methods. Parenthesis. Groups values. Parenthesis. Passes parameters. Brackets. Accesses values in arrays or collections. Example i=6 i=5+5 i=5-5 i=5*5 i=5/5 i += 1 i -= 1 if (i==10) if (i!=10) if if if if (i<10) (i>10) (i<=10) (i>=10)

"w3" + "schools" DateTime.Hour (i+5) x=Add(i,5) name[3]

107

! && ||

Not. Reverses true or false. Logical AND. Logical OR.

if (!ready) if (ready && clear) if (ready || clear)

Converting Data Types

Converting from one data type to another is sometimes useful. The most common example is to convert string input to another type, such as an integer or a date. As a rule, user input comes as strings, even if the user entered a number. Therefore, numeric input values must be converted to numbers before they can be used in calculations. Below is a list of common conversion methods: Method AsInt() IsInt() AsFloat() IsFloat() AsDecimal() IsDecimal() Description Converts a string to an integer. Example if (myString.IsInt()) {myInt=myString.AsInt();} if (myString.IsFloat()) {myFloat=myString.AsFloat();} if (myString.IsDecimal()) {myDec=myString.AsDecimal();} myString="10/10/2012"; myDate=myString.AsDateTime(); myString="True"; myBool=myString.AsBool(); myInt=1234; myString=myInt.ToString();

Converts a string to a floating-point number.

Converts a string to a decimal number.

AsDateTime() Converts a string to an ASP.NET DateTime type. IsDateTime() AsBool() IsBool() ToString() Converts a string to a Boolean.

Converts any data type to a string.

108

ASP.NET Razor - C# Loops and Arrays

Statements can be executed repeatedly in loops.

For Loops
If you need to run the same statements repeatedly, you can program a loop. If you know how many times you want to loop, you can use a for loop. This kind of loop is especially useful for counting up or counting down:

Example
<html> <body> @for(var i = 10; i < 21; i++) {<p>Line @i</p>} </body> </html>

Run example

For Each Loops

If you work with a collection or an array, you often use a for each loop. A collection is a group of similar objects, and the for each loop lets you carry out a task on each item. The for each loop walks through a collection until it is finished. The example below walks through the ASP.NET Request.ServerVariables collection.

Example
<html> <body> <ul> @foreach (var x in Request.ServerVariables) {<li>@x</li>} </ul> </body> </html>

109

Run example

While Loops
The while loop is a general purpose loop. A while loop begins with the while keyword, followed by parentheses, where you specify how long the loop continues, then a block to repeat. While loops typically add to, or subtract from, a variable used for counting. In the example below, the += operator adds 1 to the variable i, each time the loop runs.

Example
<html> <body> @{ var i = 0; while (i < 5) { i += 1; <p>Line #@i</p> } } </body> </html>

Run example

Arrays
An array is useful when you want to store similar variables but don't want to create a separate variable for each of them:

Example
@{ string[] members = {"Jani", "Hege", "Kai", "Jim"}; int i = Array.IndexOf(members, "Kai")+1;

110

int len = members.Length; string x = members[2-1]; } <html> <body> <h3>Members</h3> @foreach (var person in members) { <p>@person</p> } <p>The number of names in Members are @len</p> <p>The person at position 2 is @x</p> <p>Kai is now in position @i</p> </body> </html>

Run example

111

ASP.NET Razor - C# Logic Conditions

Programming Logic: Execute code based on conditions.

The If Condition
C# lets you execute code based on conditions. To test a condition you use an if statement. The if statement returns true or false, based on your test:

The if statement starts a code block The condition is written inside parenthesis The code inside the braces is executed if the test is true

Example
@{var price=50;} <html> <body> @if (price>30) { <p>The price is too high.</p> } </body> </html>

Run example

The Else Condition

An if statement can include an else condition. The else condition defines the code to be executed if the condition is false.

Example
@{var price=20;} <html> <body> @if (price>30)

112

{ <p>The price is too high.</p> } else { <p>The price is OK.</p> } </body> </html>

Run example

Note: In the example above, if the first condition is true, it will be executed. The else condition covers "everything else".

The Else If Condition

Multiple conditions can be tested with an else if condition:

Example
@{var price=25;} <html> <body> @if (price>=30) { <p>The price is } else if (price>20 { <p>The price is } else { <p>The price is } </body> </html>

high.</p> && price<30) OK.</p>

low.</p>

Run example

In the example above, if the first condition is true, it will be executed. If not, then if the next condition is true, this condition will be executed. You can have any number of else if conditions.

113

If none of the if and else if conditions are true, the last else block (without a condition) covers "everything else".

Switch Conditions
A switch block can be used to test a number of individual conditions:

Example
@{ var weekday=DateTime.Now.DayOfWeek; var day=weekday.ToString(); var message=""; } <html> <body> @switch(day) { case "Monday": message="This is the first weekday."; break; case "Thursday": message="Only one day before weekend."; break; case "Friday": message="Tomorrow is weekend!"; break; default: message="Today is " + day; break; } <p>@message</p> </body> </html>

Run example

The test value (day) is in parentheses. Each individual test condition has a case value that ends with a colon, and any number of code lines ending with a break statement. If the test value matches the case value, the code lines are executed. A switch block can have a default case (default:) for "everything else" that runs if none of the cases are true.

114

ASP.NET Razor - VB Variables

Variables are named entities used to store data.

Variables
Variables are used to store data. The name of a variable must begin with an alphabetic character and cannot contain whitespace or reserved characters. A variable can be of a specific type, indicating the kind of data it stores. String variables store string values ("Welcome to W3Schools"), integer variables store number values (103), date variables store date values, etc. Variables are declared using the Dim keyword, or by using the type (if you want to declare the type), but ASP.NET can usually determine data types automatically.

Examples
// Using the Dim keyword: Dim greeting = "Welcome to W3Schools"; Dim counter = 103; Dim today = DateTime.Today; // Using data types: Dim greeting As String = "Welcome to W3Schools"; Dim counter As Integer = 103; Dim today As DateTime = DateTime.Today;

Data Types
Below is a list of common data types: Type integer double Description Integer (whole numbers) 64 bit floating-point number Examples 103, 12, 5168 3.14, 3.4e38

115

decimal boolean string

Decimal number (higher precision) Boolean String

1037.196543 true, false "Hello W3Schools", "John"

Operators
An operator tells ASP.NET what kind of command to perform in an expression. The VB language supports many operators. Below is a list of common operators: Operator = + * / += -= = <> < > <= >= & . () () () Description Assigns a value to a variable. Adds a value or variable. Subtracts a value or variable. Multiplies a value or variable. Divides a value or variable. Increments a variable. Decrements a variable. Equality. Returns true if values are equal. Inequality. Returns true if values are not equal. Less than. Greater than. Less than or equal. Greater than or equal. Adding strings (concatenation). Dot. Separate objects and methods. Parenthesis. Groups values. Parenthesis. Passes parameters. Parenthesis. Accesses values in arrays or collections. Example i=6 i=5+5 i=5-5 i=5*5 i=5/5 i += 1 i -= 1 if i=10 if <>10 if if if if i<10 i>10 i<=10 i>=10

"w3" & "schools" DateTime.Hour (i+5) x=Add(i,5) name(3)

116

Not And OR AndAlso orElse

Not. Reverses true or false. Logical AND. Logical OR. Extended Logical AND. Extended Logical OR.

if Not ready if ready And clear if ready Or clear if ready AndAlso clear if ready OrElse clear

Converting Data Types

Converting from one data type to another is sometimes useful. The most common example is to convert string input to another type, such as an integer or a date. As a rule, user input comes as strings, even if the user entered a number. Therefore, numeric input values must be converted to numbers before they can be used in calculations. Below is a list of common conversion methods: Method AsInt() IsInt() Decryptions Converts a string to an integer. Example if myString.IsInt() then myInt=myString.AsInt() end if if myString.IsFloat() then myFloat=myString.AsFloat() end if if myString.IsDecimal() then myDec=myString.AsDecimal() end if myString="10/10/2012" myDate=myString.AsDateTime() myString="True" myBool=myString.AsBool() myInt=1234 myString=myInt.ToString()

AsFloat() IsFloat()

Converts a string to a floating-point number.

AsDecimal() IsDecimal()

Converts a string to a decimal number.

AsDateTime() Converts a string to an ASP.NET DateTime type. IsDateTime() AsBool() IsBool() ToString() Converts a string to a Boolean.

Converts any data type to a string.

117

ASP.NET Razor - VB Loops and Arrays

Statements can be executed repeatedly in loops.

Example
<html> <body> @For i=10 To 21 @<p>Line #@i</p> Next i </body> </html>

Run example

For Each Loops

Example
<html> <body> <ul> @For Each x In Request.ServerVariables @<li>@x</li> Next x </ul>

118

</body> </html>

Run example

Example
<html> <body> @Code Dim i=0 Do While i<5 i += 1 @<p>Line #@i</p> Loop End Code </body> </html>

Run example

Arrays
An array is useful when you want to store similar variables but don't want to create a separate variable for each of them:

Example

119

@Code Dim members As String()={"Jani","Hege","Kai","Jim"} i=Array.IndexOf(members,"Kai")+1 len=members.Length x=members(2-1) end Code <html> <body> <h3>Members</h3> @For Each person In members @<p>@person</p> Next person <p>The number of names in Members are @len</p> <p>The person at position 2 is @x</p> <p>Kai is now in position @i</p> </body> </html>

Run example

120

ASP.NET Razor - VB Logic Conditions

Programming Logic: Execute code based on conditions.

The If Condition
VB lets you execute code based on conditions. To test a condition you use the if statement. The if statement returns true or false, based on your test:

The if statement starts a code block The condition is written between if and then The code between if ... then and end if is executed if the test is true

Example
@Code Dim price=50 End Code <html> <body> @If price>30 Then @<p>The price is too high.</p> End If </body> </html>

Run example

The Else Condition

An if statement can include an else condition. The else condition defines the code to be executed if the condition is false.

Example
@Code Dim price=20 End Code

121

<html> <body> @if price>30 then @<p>The price is too high.</p> Else @<p>The price is OK.</p> End If </body> </htmlV>

Run example

Note: In the example above, if the first condition is true, it will be executed. The else condition covers "everything else".

The ElseIf Condition

Multiple conditions can be tested with an else if condition:

Example
@Code Dim price=25 End Code <html> <body> @If price>=30 Then @<p>The price is high.</p> ElseIf price>20 And price<30 @<p>The price is OK.</p> Else @<p>The price is low.</p> End If </body> </html>

Run example

In the example above, if the first condition is true, it will be executed. If not, then if the next condition is true, this condition will be executed. You can have any number of else if conditions. If none of the if or else if conditions are true, the last else block (without a condition) covers "everything else".

122

Select Conditions
A select block can be used to test a number of individual conditions:

Example
@Code Dim weekday=DateTime.Now.DayOfWeek Dim day=weekday.ToString() Dim message="" End Code <html> <body> @Select Case day Case "Monday" message="This is the first weekday." Case "Thursday" message="Only one day before weekend." Case "Friday" message="Tomorrow is weekend!" Case Else message="Today is " & day End Select <p>@message</p> </body> </html>

Run example

"Select Case" is followed by the test value (day). Each individual test condition has a case value, and any number of code lines. If the test value matches the case value, the code lines are executed. A select block can have a default case (Case Else) for "everything else" that runs if none of the other cases are true.

123

ASP.NET MVC Tutorial

Web Pages

MVC

Web Forms

ASP.NET Framework

The MVC Programming Model

MVC is one of three ASP.NET programming models. MVC is a framework for building web applications using a MVC (Model View Controller) design:

The Model represents the application core (for instance a list of database records). The View displays the data (the database records). The Controller handles the input (to the database records).

The MVC model also provides full control over HTML, CSS, and JavaScript.

124

The MVC model defines web applications with 3 logic layers:

The business layer (Model logic) The display layer (View logic) The input control (Controller logic)

The Model is the part of the application that handles the logic for the application data. Often model objects retrieve data (and store data) from a database. The View is the parts of the application that handles the display of the data. Most often the views are created from the model data. The Controller is the part of the application that handles user interaction. Typically controllers read data from a view, control user input, and send input data to the model. The MVC separation helps you manage complex applications, because you can focus on one aspect a time. For example, you can focus on the view without depending on the business logic. It also makes it easier to test an application. The MVC separation also simplifies group development. Different developers can work on the view, the controller logic, and the business logic in parallel.

Web Forms vs MVC

The MVC programming model is a lighter alternative to traditional ASP.NET (Web Forms). It is a lightweight, highly testable framework, integrated with all existing ASP.NET features, such as Master Pages, Security, and Authentication.

Visual Web Developer

Visual Web Developer is the free version of Microsoft Visual Studio.

125

Visual Web Developer is a development tool tailor made for MVC (and Web Forms). Visual Web Developer contains:

MVC and Web Forms Drag-and-drop web controls and web components A web server language (Razor using VB or C#) A web server (IIS Express) A database server (SQL Server Compact) A full web development framework (ASP.NET)

If you install Visual Web Developer, you will get more benefits from this tutorial. If you want to install Visual Web Developer, click on this link: http://www.microsoft.com/web/gallery/install.aspx?appid=VWDorVS2010SP1Pack After you have installed Visual Web Developer the first time, it pays to run the installation one more time, to install fixes and service packs. Just click on the link once more.

ASP.NET MVC References

At the end of this tutorial you will find a complete ASP.NET MVC reference.

126

ASP.NET MVC - Internet Application

To learn ASP.NET MVC, we will Build an Internet Application Part I: Creating the Application

What We Will Build

We will build an Internet application that supports adding, editing, deleting, and listing of information stored in a database.

What We Will Do
Visual Web Developer offers different templates for building web applications. We will use Visual Web Developer to create an empty MVC Internet application with HTML5 markup. When the empty Internet application is created, we will gradually add code to the application until it is fully finished. We will use C# as the programming language, and the newest Razor server code markup. Along the way we will explain the content, the code, and all the components of the application.

Creating the Web Application

If you have Visual Web Developer installed, start Visual Web Developer and select New Project. Otherwise just read and learn.

127

In the New Project dialog box:

Open the Visual C# templates Select the template ASP.NET MVC 3 Web Application Set the project name to MvcDemo Set the disk location to something like c:\w3schools_demo Click OK

When the New Project Dialog Box opens:

Select the Internet Application template Select the Razor Engine Select HTML5 Markup Click OK

Visual Studio Express will create a project much like this:

128

We will explore the content of the files and folders in the next chapter of this tutorial.

129

ASP.NET MVC - Application Folders

To learn ASP.NET MVC, we are Building an Internet application Part II: Exploring the Application Folders

MVC Folders
A typical ASP.NET MVC web application has the following folder content: Application information Properties References Application folders App_Data Folder Content Folder Controllers Folder Models Folder Scripts Folder Views Folder Configuration files Global.asax packages.config Web.config The folder names are equal in all MVC applications. The MVC framework is based on default naming. Controllers are in the Controllers folder, Views are in the Views folder, and Models are in the Models folder. You don't have to use the folder names in your application code. Standard naming reduces the amount of code, and makes it easier for developers to understand MVC projects. Below is a brief summary of the content of each folder:

130

The App_Data Folder

The App_Data folder is for storing application data. We will add an SQL database to the App_Data folder, later in this tutorial.

The Content Folder

The Content folder is used for static files like style sheets (css files), icons and images. Visual Web Developer automatically adds a themes folder to the Content folder. The themes folder is filled with jQuery styles and pictures. In this project you can delete the themes folder. Visual Web Developer also adds a standard style sheet file to the project: the file Site.css in the content folder. The style sheet file is the file to edit when you want to change the style of the application.

We will edit the style sheet file (Site.css) file in the next chapter of this tutorial.

The Controllers Folder

The Controllers folder contains the controller classes responsible for handling user input and responses. MVC requires the name of all controller files to end with "Controller".

131

Visual Web Developer has created a Home controller (for the Home and the About page) and an Account controller (for Login pages):

We will create more controllers later in this tutorial.

The Models Folder

The Models folder contains the classes that represent the application models. Models hold and manipulate application data. We will create models (classes) in a later chapter of this tutorial.

The Views Folder

The Views folder stores the HTML files related to the display of the application (the user interfaces). The Views folder contains one folder for each controller. Visual Web Developer has created an Account folder, a Home folder, and a Shared folder (inside the Views folder). The Account folder contains pages for registering and logging in to user accounts. The Home folder is used for storing application pages like the home page and the about page. The Shared folder is used to store views shared between controllers (master pages and layout pages).

132

We will edit the layout files in the next chapter of this tutorial.

The Scripts Folder

The Scripts folder stores the JavaScript files of the application. By default Visual Web Developer fills this folder with standard MVC, Ajax, and jQuery files:

133

Note: The files named "modernizr" are JavaScript files used for supporting HTML5 and CSS3 features in the application.

134

ASP.NET MVC - Styles and Layout

To learn ASP.NET MVC, we are Building an Internet Application. Part III: Adding Styles and a Consistent Look (Layout).

Adding a Layout
The file _Layout.cshtml represent the layout of each page in the application. It is located in the Shared folder inside the Views folder. Open the file and swap the content with this:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Movies", "Index", "Movies")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> <section id="main"> @RenderBody() <p>Copyright W3schools 2012. All Rights Reserved.</p> </section> </body> </html>

135

HTML Helpers
In the code above, HTML helpers are used to modify HTML output: @Url.Content() - URL content will be inserted here. @Html.ActionLink() - HTML link will be inserted here. You will learn more about HTML helpers in a later chapter of this tutorial.

Razor Syntax
In the code above, the code marked red are C# using Razor markup. @ViewBag.Title - The page title will be inserted here. @RenderBody() - The page content will be rendered here. You can learn about Razor markup for both C# and VB (Visual Basic) in our Razor tutorial.

Adding Styles
The style sheet for the application is called Site.css. It is located in the Content folder. Open the file Site.css and swap the content with this:

body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } a

136

{ color: #034af3; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ table.data { background-color:#ffffff;

137

border:1px solid #c3c3c3; border-collapse:collapse; width:100%; } table.data th { background-color:#e8eef4; border:1px solid #c3c3c3; padding:3px; } table.data td { border:1px solid #c3c3c3; padding:3px; }

The _ViewStart File

The _ViewStart file in the Shared folder (inside the Views folder) contains the following content:

@{Layout = "~/Views/Shared/_Layout.cshtml";}
This code is automatically added to all views displayed by the application. If you remove this file, you must add this line to all views. You will learn more about views in a later chapter of this tutorial.

138

ASP.NET MVC - Controllers

To learn ASP.NET MVC, we are Building an Internet Application. Part IV: Adding a Controller.

The Controllers Folder

The Controllers Folder contains the controller classes responsible for handling user input and responses. MVC requires the name of all controllers to end with "Controller". In our example, Visual Web Developer has created the following files: HomeController.cs (for the Home and About pages) and AccountController.cs (For the Log On pages):

Web servers will normally map incoming URL requests directly to disk files on the server. For example: an URL request like "http://www.w3schools.com/default.asp" will map directly to the file "default.asp" at the root directory of the server. The MVC framework maps differently. MVC maps URLs to methods. These methods are in classes called "Controllers". Controllers are responsible for processing incoming requests, handling input, saving data, and sending a response to send back to the client.

139

The Home controller

The controller file in our application HomeController.cs, defines the two controls Index and About. Swap the content of the HomeController.cs file with this:

using using using using using

System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc;

namespace MvcDemo.Controllers { public class HomeController : Controller { public ActionResult Index() {return View();} public ActionResult About() {return View();} } }

The Controller Views

The files Index.cshtml and About.cshtml in the Views folder defines the ActionResult views Index() and About() in the controller.

140

ASP.NET MVC - Views

To learn ASP.NET MVC, we are Building an Internet Application. Part V: Adding Views for Displaying the Application.

The Views Folder

The Views folder stores the files (HTML files) related to the display of the application (the user interfaces). These files may have the extensions html, asp, aspx, cshtml, and vbhtml, depending on the language content. The Views folder contains one folder for each controller. Visual Web Developer has created an Account folder, a Home folder, and a Shared folder (inside the Views folder). The Account folder contains pages for registering and logging in to user accounts. The Home folder is used for storing application pages like the home page and the about page. The Shared folder is used to store views shared between controllers (master pages and layout pages).

141

ASP.NET File Types

The following HTML file types can be found in the Views Folder: File Type Plain HTML Classic ASP Classic ASP.NET ASP.NET Razor C# ASP.NET Razor VB Extention .htm or .html .asp .aspx .cshtml .vbhtml

142

The Index File

The file Index.cshtml represents the Home page of the application. It is the application's default file (index file). Put the following content in the file:

@{ViewBag.Title = "Home Page";} <h1>Welcome to W3Schools</h1> <p>Put Home Page content here</p>

The About File

The file About.cshtml represent the About page of the application. Put the following content in the file:

@{ViewBag.Title = "About Us";} <h1>About Us</h1> <p>Put About Us content here</p>

Run the Application

Select Debug, Start Debugging (or F5) from the Visual Web Developer menu. Your application will look like this:

143

Click on the "Home" tab and the "About" tab to see how it works.

Congratulations
Congratulations. You have created your first MVC Application. Note: You cannot click on the "Movies" tab yet. We will add code for the "Movies" tab in the next chapters of this tutorial.

144

ASP.NET MVC - SQL Database

To learn ASP.NET MVC, we are Building an Internet Application. Part VI: Adding a Database.

Creating the Database

Visual Web Developer comes with a free SQL database called SQL Server Compact. The database needed for this tutorial can be created with these simple steps:

Right-click the App_Data folder in the Solution Explorer window Select Add, New Item Select SQL Server Compact Local Database * Name the database Movies.sdf. Click the Add button

* If SQL Server Compact Local Database is not an option, you have not installed SQL Server Compact on your computer. Install it from this link: SQL Server Compact Visual Web Developer automatically creates the database in the App_Data folder. Note: In this tutorial it is expected that you have some knowledge about SQL databases. If you want to study this topic first, please visit our SQL Tutorial.

Adding a Database Table

Double-clicking the Movies.sdf file in the App_Data folder will open a Database Explorer window. To create a new table in the database, right-click the Tables folder, and select Create Table. Create the following columns: Column ID Title Director Type int (primary key) nvarchar(100) nvarchar(100) Allow Nulls No No No

145

Date

datetime

Columns explained: ID is an integer (whole number) used to identify each record in the table. Title is a 100 character text column to store the name of the movie. Director is a 100 character text column to store the director's name. Date is a datetime column to store the release date of the movie. After creating the columns described above, you must make the ID column the table's primary key (record identifier). To do this, click on the column name (ID) and select Primary Key. Also, in theColumn Properties window, set the Identity property to True:

When you have finished creating the table columns, save the table and name it MovieDBs.

146

Note: We have deliberately named the table "MovieDBs" (ending with s). In the next chapter, you will see the name "MovieDB" used for the data model. It looks strange, but this is the naming convention you have to use to make the controller connect to the database table.

Adding Database Records

You can use Visual Web Developer to add some test records to the movie database. Double-click the Movies.sdf file in the App_Data folder. Right-click the MovieDBs table in the Database Explorer window and select Show Table Data. Add some records: ID 1 2 Title Psycho La Dolce Vita Director Alfred Hitchcock Federico Fellini Date 01.01.1960 01.01.1960

Note: The ID column is updated automatically. You should not edit it.

Adding a Connection String

Add the following element to the <connectionStrings> element in your Web.config file:

<add name="MovieDBContext" connectionString="Data Source=|DataDirectory|\Movies.sdf" providerName="System.Data.SqlServerCe.4.0"/>

147

ASP.NET MVC - Models

To learn ASP.NET MVC, we are Building an Internet Application. Part VII: Adding a Data Model.

MVC Models
The MVC Model contains all application logic (business logic, validation logic, and data access logic), except pure view and controller logic. With MVC, models both hold and manipulate application data.

The Models Folder

The Models Folder contains the classes that represent the application model. Visual Web Developer automatically creates an AccountModels.cs file that contains the models for application security. AccountModels contains a LogOnModel, a ChangePasswordModel, and a RegisterModel.

Adding a Database Model

The database model needed for this tutorial can be created with these simple steps:

using using using using using

In the Solution Explorer, right-click the Models folder, and select Add and Class. Name the class MovieDB.cs, and click Add. Edit the class:

System; System.Collections.Generic; System.Linq; System.Web; System.Data.Entity;

namespace MvcDemo.Models { public class MovieDB {

148

public public public public

int ID { get; set; } string Title { get; set; } string Director { get; set; } DateTime Date { get; set; }

} public class MovieDBContext : DbContext { public DbSet<MovieDB> Movies { get; set; } } }

Note: We have deliberately named the model class "MovieDB". In the previous chapter, you saw the name "MovieDBs" (endig with s) used for the database table. It looks strange, but this is the naming convention you have to use to make the model connect to the database table.

Adding a Database Controller

The database controller needed for this tutorial can be created with these simple steps:

In the Solution Explorer, right-click the Controllers folder, and select Add and Controller Set controller name to MoviesController Select template: Controller with read/write actions and views, using Entity Framework Select model class: MovieDB (McvDemo.Models) Select data context class: MovieDBContext (McvDemo.Models) Select views Razor (CSHTML) Click Add

Visual Web Developer will create the following files:

A MoviesController.cs file in the Controllers folder A Movies folder in the Views folder

Adding Database Views

The following files are automatically created in the Movies folder:

Create.cshtml Delete.cshtml Details.cshtml Edit.cshtml Index.cshtml

149

ASP.NET MVC - Security

To learn ASP.NET MVC, we are Building an Internet Application. Part VIII: Adding Security.

MVC Application Security

The Models Folder contains the classes that represent the application model. Visual Web Developer automatically creates an AccountModels.cs file that contains the models for application authentication. AccountModels contains a LogOnModel, a ChangePasswordModel, and a RegisterModel:

The Change Password Model

public class ChangePasswordModel { [Required] [DataType(DataType.Password)] [Display(Name = "Current password")]

150

public string OldPassword { get; set; } [Required] [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "New password")] public string NewPassword { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm new password")] [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")] public string ConfirmPassword { get; set; } }

The Logon Model

public class LogOnModel { [Required] [Display(Name = "User name")] public string UserName { get; set; } [Required] [DataType(DataType.Password)] [Display(Name = "Password")] public string Password { get; set; } [Display(Name = "Remember me?")] public bool RememberMe { get; set; } }

The Register Model

public class RegisterModel { [Required]

151

[Display(Name = "User name")] public string UserName { get; set; } [Required] [DataType(DataType.EmailAddress)] [Display(Name = "Email address")] public string Email { get; set; } [Required] [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "Password")] public string Password { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm password")] [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")] public string ConfirmPassword { get; set; } }

152

ASP.NET MVC - HTML Helpers

HTML Helpers are used to modify HTML output

HTML Helpers
With MVC, HTML helpers are much like traditional ASP.NET Web Form controls. Just like web form controls in ASP.NET, HTML helpers are used to modify HTML. But HTML helpers are more lightweight. Unlike Web Form controls, an HTML helper does not have an event model and a view state. In most cases, an HTML helper is just a method that returns a string. With MVC, you can create your own helpers, or use the built in HTML helpers.

Standard HTML Helpers

MVC includes standard helpers for the most common types of HTML elements, like HTML links and HTML form elements.

HTML Links
The easiest way to render an HTML link in is to use the HTML.ActionLink() helper. With MVC, the Html.ActionLink() does not link to a view. It creates a link to a controller action. Razor Syntax:

@Html.ActionLink("About this Website", "About")

ASP Syntax:

<%=Html.ActionLink("About this Website", "About")%>

The first parameter is the link text, and the second parameter is the name of the controller action. The Html.ActionLink() helper above, outputs the following HTML:

<a href="/Home/About">About this Website</a>

153

The Html.ActionLink() helper as several properties: Property .linkText .actionName .routeValues .controllerName .htmlAttributes .protocol .hostname .fragment Description The link text (label) The target action The values passed to the action The target controller The set of attributes to the link The link protocol The host name for the link The anchor target for the link

Note: You can pass values to a controller action. For example, you can pass the id of a database record to a database edit action: Razor Syntax C#:

@Html.ActionLink("Edit Record", "Edit", new {Id=3})

Razor Syntax VB:

@Html.ActionLink("Edit Record", "Edit", New With{.Id=3})

The Html.ActionLink() helper above, outputs the following HTML:

<a href="/Home/Edit/3">Edit Record</a>

HTML Form Elements

There following HTML helpers can be used to render (modify and output) HTML form elements:

BeginForm() EndForm() TextArea() TextBox() CheckBox() RadioButton() ListBox()

154

DropDownList() Hidden() Password()

ASP.NET Syntax C#:

<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %> <% using (Html.BeginForm()){%> <p> <label for="FirstName">First Name:</label> <%= Html.TextBox("FirstName") %> <%= Html.ValidationMessage("FirstName", "*") %> </p> <p> <label for="LastName">Last Name:</label> <%= Html.TextBox("LastName") %> <%= Html.ValidationMessage("LastName", "*") %> </p> <p> <label for="Password">Password:</label> <%= Html.Password("Password") %> <%= Html.ValidationMessage("Password", "*") %> </p> <p> <label for="Password">Confirm Password:</label> <%= Html.Password("ConfirmPassword") %> <%= Html.ValidationMessage("ConfirmPassword", "*") %> </p> <p> <label for="Profile">Profile:</label> <%= Html.TextArea("Profile", new {cols=60, rows=10})%> </p> <p> <%= Html.CheckBox("ReceiveNewsletter") %> <label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label> </p> <p> <input type="submit" value="Register" /> </p> <%}%>

155

ASP.NET MVC - Publishing the Website

Learn how to publish an MVC application without using Visual Web Developer.

Publish Your Application Without Using Visual Web Developer

An ASP.NET MVC application can be published to a remote server by using the Publish commands in WebMatrix ,Visual Web Developer, or Visual Studio. This function copies all your application files, controllers, models, images, and all the required DLL files for MVC, Web Pages, Razor, Helpers, and SQL Server Compact (if a database is used). Sometimes you don't want to use this option. Maybe your hosting provider only supports FTP? Maybe you already have a web site based on classic ASP? Maybe you want to copy the files yourself? Maybe you want to use Front Page, Expression Web, or some other publishing software? Will you get a problem? Yes, you will. But you can solve it. To perform a web copy, you have to know how to include the right files, what DDL files to copy, and where store them. Follow these steps:

1. Use the Latest Version of ASP.NET

Before you continue, make sure your hosting computer runs the latest version of ASP.NET (4.0).

2. Copy the Web Folders

3. Copy the DLL Files

On the remote server create a bin folder in the root of your application. (If you have installed Helpers, you already have a bin folder)

156

Copy everything from your folders: C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 3\Assemblies to your application's bin folder on the remote server.

4. Copy the SQL Server Compact DLL Files

5. Copy SQL Server Compact Data

Do you have .sdf files in your App_Data folder that contains test data? Do you want to publish the test data to the remote server? Most likely not.

157

ASP.NET MVC - Reference

Classes
Class AcceptVerbsAttribute Description Represents an attribute that specifies which HTTP verbs an action method will respond to. Provides information about an action method, such as its name, controller, parameters, attributes, and filters. Provides the context for the ActionExecuted method of the ActionFilterAttribute class. Provides the context for the ActionExecuting method of the ActionFilterAttribute class. Represents the base class for filter attributes. Represents an attribute that is used to influence the selection of an action method. Represents an attribute that is used for the name of an action. Represents an attribute that affects the selection of an action method. Encapsulates the result of an action method and is used to perform a framework-level operation on behalf of the action method. Provides a class that implements the IMetadataAware interface in order to support additional metadata. Represents support for rendering HTML in AJAX scenarios within a view. Represents support for rendering HTML in AJAX scenarios within a strongly typed view. Represents a class that extends the HttpRequestBase class by adding the ability to determine whether an HTTP request is

ActionDescriptor

ActionExecutedContext

ActionExecutingContext

ActionFilterAttribute ActionMethodSelectorAttribute

ActionNameAttribute

ActionNameSelectorAttribute

ActionResult

AdditionalMetadataAttribute

AjaxHelper

AjaxHelper(Of TModel)

AjaxRequestExtensions

158

an AJAX request. AllowHtmlAttribute Allows a request to include HTML markup during model binding by skipping request validation for the property. (It is strongly recommended that your application explicitly check all models where you disable request validation in order to prevent script exploits.) Provides a way to register one or more areas in an ASP.NET MVC application. Encapsulates the information that is required in order to register an area within an ASP.NET MVC application. Provides an abstract class to implement a metadata provider. Provides an abstract class for classes that implement a validation provider. Provides the base class for asynchronous controllers. Represents an attribute that is used to set the timeout value, in milliseconds, for an asynchronous method. Encapsulates the information that is required for using an AuthorizeAttribute attribute. Represents an attribute that is used to restrict access by callers to an action method. Represents an attribute that is used to provide details about how model binding to a parameter should occur. Represents the base class for views that are compiled by the BuildManager class before being rendered by a view engine. Provides a base class for view engines. Maps a browser request to a byte array. Represents an attribute that is used to indicate that an action method should be called only as a child action. Represents a value provider for values from child actions. Represents a factory for creating value provider objects for

AreaRegistration

AreaRegistrationContext

AssociatedMetadataProvider AssociatedValidatorProvider

AsyncController AsyncTimeoutAttribute

AuthorizationContext

AuthorizeAttribute

BindAttribute

BuildManagerCompiledView

BuildManagerViewEngine ByteArrayModelBinder ChildActionOnlyAttribute

ChildActionValueProvider ChildActionValueProviderFactory

159

child actions. ClientDataTypeModelValidatorProvider CompareAttribute Returns the client data-type model validators. Provides an attribute that compares two properties of a model. Represents a user-defined content type that is the result of an action method. Provides methods that respond to HTTP requests that are made to an ASP.NET MVC Web site. Represents a class that is responsible for invoking the action methods of a controller. Represents the base class for all MVC controllers. Represents a class that is responsible for dynamically building a controller. Encapsulates information about an HTTP request that matches specified RouteBase and ControllerBase instances. Encapsulates information that describes a controller, such as its name, type, and actions. Adds the controller to the FilterProviderCollection instance. Represents an attribute that invokes a custom model binder. Provides a container for common metadata, for the DataAnnotationsModelMetadataProvider class, and for the DataAnnotationsModelValidator class for a data model.

ContentResult

Controller

ControllerActionInvoker

ControllerBase ControllerBuilder

ControllerContext

ControllerDescriptor

ControllerInstanceFilterProvider CustomModelBinderAttribute DataAnnotationsModelMetadata

DataAnnotationsModelMetadataProvider Implements the default model metadata provider for ASP.NET MVC. DataAnnotationsModelValidator DataAnnotationsModelValidator(Of TAttribute) Provides a model validator. Provides a model validator for a specified validation type.

DataAnnotationsModelValidatorProvider Implements the default validation provider for ASP.NET MVC. DataErrorInfoModelValidatorProvider Provides a container for the error-information model

160

validator. DefaultControllerFactory DefaultModelBinder Represents the controller factory that is registered by default. Maps a browser request to a data object. This class provides a concrete implementation of a model binder. Represents a memory cache for view locations. Provides a registration point for dependency resolvers that implement IDependencyResolver or the Common Service Locator IServiceLocator interface. Provides a type-safe implementation of GetService and GetServices. Represents the base class for value providers whose values come from a collection that implements the IDictionary(Of TKey, TValue) interface. Provides an empty metadata provider for data models that do not require metadata. Provides an empty validation provider for models that do not require a validator. Represents a result that does nothing, such as a controller action method that returns nothing. Provides the context for using the HandleErrorAttribute class. Provides a helper class to get the model name from an expression. Provides a container for client-side field validation metadata. Sends the contents of a binary file to the response. Sends the contents of a file to the response. Represents a base class that is used to send binary file content to the response. Sends binary content to the response by using a Stream instance.

DefaultViewLocationCache DependencyResolver

DependencyResolverExtensions

DictionaryValueProvider(Of TValue)

EmptyModelMetadataProvider

EmptyModelValidatorProvider

EmptyResult

ExceptionContext ExpressionHelper

FieldValidationMetadata FileContentResult FilePathResult FileResult

FileStreamResult

161

Filter

Represents a metadata class that contains a reference to the implementation of one or more of the filter interfaces, the filter's order, and the filter's scope. Represents the base class for action and result filter attributes. Defines a filter provider for filter attributes. Encapsulates information about the available action filters. Represents the collection of filter providers for the application. Provides a registration point for filters. Contains the form value providers for the application. Encapsulates information that is required in order to validate and process the input data from an HTML form. Represents a value provider for form values that are contained in a NameValueCollection object. Represents a class that is responsible for creating a new instance of a form-value provider object. Represents a class that contains all the global filters. Represents the global filter collection. Represents an attribute that is used to handle an exception that is thrown by an action method. Encapsulates information for handling an error that was thrown by an action method. Represents an attribute that is used to indicate whether a property or field value should be rendered as a hidden input element. Represents support for rendering HTML controls in a view. Represents support for rendering HTML controls in a strongly typed view.

FilterAttribute

FilterAttributeFilterProvider FilterInfo FilterProviderCollection

FilterProviders FormCollection FormContext

FormValueProvider

FormValueProviderFactory

GlobalFilterCollection GlobalFilters HandleErrorAttribute

HandleErrorInfo

HiddenInputAttribute

HtmlHelper HtmlHelper(Of TModel)

162

HttpDeleteAttribute

Represents an attribute that is used to restrict an action method so that the method handles only HTTP DELETE requests. Represents a value provider to use with values that come from a collection of HTTP files. Represents a class that is responsible for creating a new instance of an HTTP file collection value provider object. Represents an attribute that is used to restrict an action method so that the method handles only HTTP GET requests. Defines an object that is used to indicate that the requested resource was not found. Represents an attribute that is used to restrict an action method so that the method handles only HTTP POST requests. Binds a model to a posted file. Represents an attribute that is used to restrict an action method so that the method handles only HTTP PUT requests. Extends the HttpRequestBase class that contains the HTTP values that were sent by a client during a Web request. Provides a way to return an action result with a specific HTTP response status code and description. Represents the result of an unauthorized HTTP request. Sends JavaScript content to the response. Represents a class that is used to send JSON-formatted content to the response. Enables action methods to send and receive JSON-formatted text and to model-bind the JSON text to parameters of action methods. Maps a browser request to a LINQ Binary object. Represents an attribute that is used to associate a model type to a model-builder type.

HttpFileCollectionValueProvider

HttpFileCollectionValueProviderFactory

HttpGetAttribute

HttpNotFoundResult

HttpPostAttribute

HttpPostedFileBaseModelBinder HttpPutAttribute

HttpRequestExtensions

HttpStatusCodeResult

HttpUnauthorizedResult JavaScriptResult JsonResult

JsonValueProviderFactory

LinqBinaryModelBinder ModelBinderAttribute

163

ModelBinderDictionary

Represents a class that contains all model binders for the application, listed by binder type. Provides a container for model binder providers. Provides a container for model binder providers. Provides global access to the model binders for the application. Provides the context in which a model binder functions. Provides a container for an equality validation rule that is sent to the browser. Provides a container for a range-validation rule that is sent to the browser. Provides a container for a regular-expression client validation rule that is sent to the browser. Provides a container for a remote validation rule that is sent to the browser. Provides a container for client validation for required field. Provides a base class container for a client validation rule that is sent to the browser. Provides a container for a string-length validation rule that is sent to the browser. Represents an error that occurs during model binding. A collection of ModelError instances. Provides a container for common metadata, for the ModelMetadataProvider class, and for the ModelValidator class for a data model. Provides an abstract base class for a custom metadata provider. Provides a container for the current ModelMetadataProvider instance.

ModelBinderProviderCollection ModelBinderProviders ModelBinders

ModelBindingContext ModelClientValidationEqualToRule

ModelClientValidationRangeRule

ModelClientValidationRegexRule

ModelClientValidationRemoteRule

ModelClientValidationRequiredRule ModelClientValidationRule

ModelClientValidationStringLengthRule

ModelError ModelErrorCollection ModelMetadata

ModelMetadataProvider

ModelMetadataProviders

164

ModelState

Encapsulates the state of model binding to a property of an action-method argument, or to the argument itself. Represents the state of an attempt to bind a posted form to an action method, which includes validation information. Provides a container for a validation result. Provides a base class for implementing validation logic. Provides a list of validators for a model. Provides a container for a list of validation providers. Provides a container for the current validation provider. Represents a list of items that users can select more than one item from. When implemented in a derived class, provides a metadata class that contains a reference to the implementation of one or more of the filter interfaces, the filter's order, and the filter's scope. Selects the controller that will handle an HTTP request. Represents an HTML-encoded string that should not be encoded again. Verifies and processes an HTTP request. Creates an object that implements the IHttpHandler interface and passes the request context to it. Creates instances of MvcWebPageRazorHost files. Extends a NameValueCollection object so that the collection can be copied to a specified dictionary. Represents the base class for value providers whose values come from a NameValueCollection object. Provides a convenience wrapper for the AsyncTimeoutAttribute attribute. Represents an attribute that is used to indicate that a

ModelStateDictionary

ModelValidationResult ModelValidator ModelValidatorProvider ModelValidatorProviderCollection ModelValidatorProviders MultiSelectList

MvcFilter

MvcHandler MvcHtmlString

MvcHttpHandler MvcRouteHandler

MvcWebRazorHostFactory NameValueCollectionExtensions

NameValueCollectionValueProvider

NoAsyncTimeoutAttribute

NonActionAttribute

165

controller method is not an action method. OutputCacheAttribute Represents an attribute that is used to mark an action method whose output will be cached. Encapsulates information for binding action-method parameters to a data model. Contains information that describes a parameter. Represents a base class that is used to send a partial view to the response. Provides a registration point for ASP.NET Razor preapplication start code. Represents a value provider for query strings that are contained in a NameValueCollection object. Represents a class that is responsible for creating a new instance of a query-string value-provider object. Provides an adapter for the RangeAttribute attribute. Represents the class used to create views that have Razor syntax. Represents a view engine that is used to render a Web page that uses the ASP.NET Razor syntax. Controls the processing of application actions by redirecting to a specified URI. Represents a result that performs a redirection by using the specified route values dictionary. Contains information that describes a reflected action method. Contains information that describes a reflected controller. Contains information that describes a reflected action-method parameter. Provides an adapter for the RegularExpressionAttribute attribute.

ParameterBindingInfo

ParameterDescriptor PartialViewResult

PreApplicationStartCode

QueryStringValueProvider

QueryStringValueProviderFactory

RangeAttributeAdapter RazorView

RazorViewEngine

RedirectResult

RedirectToRouteResult

ReflectedActionDescriptor

ReflectedControllerDescriptor ReflectedParameterDescriptor

RegularExpressionAttributeAdapter

166

RemoteAttribute

Provides an attribute that uses the jQuery validation plug-in remote validator. Provides an adapter for the RequiredAttributeAttribute attribute. Represents an attribute that forces an unsecured HTTP request to be re-sent over HTTPS. Provides the context for the OnResultExecuted method of the ActionFilterAttribute class. Provides the context for the OnResultExecuting method of the ActionFilterAttribute class. Extends a RouteCollection object for MVC routing. Represents a value provider for route data that is contained in an object that implements the IDictionary(Of TKey, TValue) interface. Represents a factory for creating route-data value provider objects. Represents a list that lets users select one item. Represents the selected item in an instance of the SelectList class. Specifies the session state of the controller. Provides session-state data to the current TempDataDictionary object. Provides an adapter for the StringLengthAttribute attribute. Represents a set of data that persists only from one request to the next. Encapsulates information about the current template context. Contains methods to build URLs for ASP.NET MVC within an application. Represents an optional parameter that is used by the MvcHandler class during routing.

RequiredAttributeAdapter

RequireHttpsAttribute

ResultExecutedContext

ResultExecutingContext

RouteCollectionExtensions RouteDataValueProvider

RouteDataValueProviderFactory

SelectList SelectListItem

SessionStateAttribute SessionStateTempDataProvider

StringLengthAttributeAdapter TempDataDictionary

TemplateInfo UrlHelper

UrlParameter

167

ValidatableObjectAdapter ValidateAntiForgeryTokenAttribute

Provides an object adapter that can be validated. Represents an attribute that is used to prevent forgery of a request. Represents an attribute that is used to mark action methods whose input must be validated. Represents the collection of value-provider objects for the application. Obsolete. Represents a dictionary of value providers for the application. Represents a container for value-provider factory objects. Represents a factory for creating value-provider objects. Represents the collection of value-provider factories for the application. Represents the result of binding a value (such as from a form post or query string) to an action-method argument property, or to the argument itself. Encapsulates information that is related to rendering a view. Represents a container that is used to pass data between a controller and a view. Represents a container that is used to pass strongly typed data between a controller and a view. Encapsulates information about the current template content that is used to develop templates and about HTML helpers that interact with templates. Represents a collection of view engines that are available to the application. Represents the result of locating a view engine. Represents a collection of view engines that are available to the application. Represents the information that is needed to build a master

ValidateInputAttribute

ValueProviderCollection

ValueProviderDictionary

ValueProviderFactories ValueProviderFactory ValueProviderFactoryCollection

ValueProviderResult

ViewContext ViewDataDictionary

ViewDataDictionary(Of TModel)

ViewDataInfo

ViewEngineCollection

ViewEngineResult ViewEngines

ViewMasterPage

168

view page. ViewMasterPage(Of TModel) Represents the information that is required in order to build a strongly typed master view page. Represents the properties and methods that are needed to render a view as a Web Forms page. Represents the information that is required in order to render a strongly typed view as a Web Forms page. Represents a class that is used to render a view by using an IView instance that is returned by an IViewEngine object. Represents a base class that is used to provide the model to the view and then render the view to the response. Provides an abstract class that can be used to implement a view start (master) page. Provides a container for TemplateInfo objects. Provides a container for TemplateInfo objects. Represents the type of a view. Represents the information that is needed to build a user control. Represents the information that is required in order to build a strongly typed user control. Represents an abstract base-class implementation of the IViewEngine interface. Represents the information that is needed to build a Web Forms page in ASP.NET MVC. Represents a view engine that is used to render a Web Forms page to the response. Represents the properties and methods that are needed in order to render a view that uses ASP.NET Razor syntax. Represents the properties and methods that are needed in order to render a view that uses ASP.NET Razor syntax.

ViewPage

ViewPage(Of TModel)

ViewResult

ViewResultBase

ViewStartPage

ViewTemplateUserControl ViewTemplateUserControl(Of TModel) ViewType ViewUserControl

ViewUserControl(Of TModel)

VirtualPathProviderViewEngine

WebFormView

WebFormViewEngine

WebViewPage

WebViewPage(Of TModel)

169

Interfaces
Interface IActionFilter IActionInvoker Description Defines the methods that are used in an action filter. Defines the contract for an action invoker, which is used to invoke an action in response to an HTTP request. Defines the methods that are required for an authorization filter. Provides a way for the ASP.NET MVC validation framework to discover at run time whether a validator has support for client validation. Defines the methods that are required for a controller. Provides fine-grained control over how controllers are instantiated using dependency injection. Defines the methods that are required for a controller factory. Defines the methods that simplify service location and dependency resolution. Defines the methods that are required for an exception filter. Provides an interface for finding filters. Provides an interface for exposing attributes to the AssociatedMetadataProvider class. Defines the methods that are required for a model binder. Defines methods that enable dynamic implementations of model binding for classes that implement the IModelBinder interface. Defines members that specify the order of filters and whether multiple filters are allowed. Defines the methods that are required for a result filter. Associates a route with an area in an ASP.NET MVC application. Defines the contract for temporary-data providers that store data that is

IAuthorizationFilter IClientValidatable

IController IControllerActivator

IControllerFactory IDependencyResolver

IExceptionFilter IFilterProvider IMetadataAware

IModelBinder IModelBinderProvider

IMvcFilter

IResultFilter IRouteWithArea ITempDataProvider

170

viewed on the next request. IUnvalidatedValueProvider Represents an IValueProvider interface that can skip request validation. IValueProvider IView IViewDataContainer IViewEngine IViewLocationCache Defines the methods that are required for a value provider in ASP.NET MVC. Defines the methods that are required for a view. Defines the methods that are required for a view data dictionary. Defines the methods that are required for a view engine. Defines the methods that are required in order to cache view locations in memory. Provides fine-grained control

IViewPageActivator

171

ASP.NET Web Forms - Demo

This is a Web Forms Demonstration
Web Forms is one of the 3 programming models for creating ASP.NET web sites and web applications. The other two programming models are Web Pages and MVC (Model, View, Controller). This demonstration will teach you ASP.NET Web Forms by building a web site:

Create a web site Add files and folders Add a consistent look Add navigation Add a database

Like to Read a Tutorial First?

Many developers like to start learning a new technology by looking at a demonstration, but if you want to read the Web Forms tutorial first, go to the ASP.NET Web Forms Tutorial.

Visual Web Developer (VWD)

Visual Web Developer is a free development tool, tailor made for Web Forms (and MVC). Visual Web Developer contains:

A web server markup language (Razor using VB or C#) A web server (IIS Express) A database server (SQL Server Compact) ASP.NET web controls and web components A full web development framework (ASP.NET)

You should install Visual Web Developer, to get the full benefits from this demo. If you want to install Visual Web Developer, click on this picture:

172

After you have installed Visual Web Developer the first time, it pays to run the installation one more time, to install fixes and service packs. Just click on the link once more.

This Demonstration will Create a Web Site

In this demo, we will use Visual Web Developer to develop a web site application. Visual Web Developer supports two different development types:

Web Projects Web Sites

173

Web Projects (We Will Not Do)

Web Projects is the preferred development type for large projects, and for developers working in teams. Web Projects are managed by a project file that keeps track of the content of a web site.

Web Sites
A Web Site is simply a folder with files and subfolders. (There are no project files to keep track of the web project). In this demo we will use Web Sites (not Web Projects). If you are new to ASP.NET, a Web Site is easier to work with, and easier to copy, move, and share.

Create a Web Site

You create a new Web Site in VWD by choosing "New Web Site..." from the main menu. In the "New Web Site" dialog box, chose the Visual Basic (or Visual C#) template called "ASP.NET Empty Web Site":

Name the Web Site DemoWF and set the disk (File System) location to something likec:\w3schools_demo\DemoWF before clicking OK.

174

ASP.NET Web Forms - Demo

Learn ASP.NET Web Forms by building a web site from scratch. Part I: Creating standard folders and a consistent style.

What We Will Do
In this chapter we will:

Create Create Create Create Create

a new empty web site the necessary folders a standard style sheet for the site a standard layout for the site a home page for the site

1. Start With an Empty Web Site

If you have followed this tutorial, you have already created a web site called DemoWF. If not, you can create an empty web site with Visual Web Developer:

Start Visual Web Developer Click on "New Web Site..." Choose "Visual Basic (or Visual C#) Select the template "ASP.NET Empty Web Site" Set the file location to something like c:\w3schools_demo\DemoWF

2. Create Folders
In the folder named "DemoWF" (your website), create 5 folders:

Account - for storing login and membership files App_Data - for storing databases and data files Images - for storing images Scripts - for storing browser scripts Styles - for storing css styles

175

To create a new folder, right-click the root folder and select "New Folder..."

3. Create a Style Sheet

In the "Styles" folder, create a new style sheet (CSS file) named "Site.css". Put the following code inside the CSS file:

Site.css
body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { color: #ffffff; } h2 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0px 4px 4px 4px; }

176

The CSS file above defines the styles to be used used for

The HTML heading element <h1> The HTML body element <body> The HTML element with id="main"

4. Create a Master Page

In the root folder (DemoDW), create a master file named "Site.master". To create a master file, right-click the root folder and select "Add New Item...". Then select "Master Page Visual Basic".

Put the following code inside the master page:

Site.master
<%@ Master Language="VB" %> <!DOCTYPE html> <html> <head id="head" runat="server"> <title></title> <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <h1>Demonstrating Web Forms</h1> <div id="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> <p>© <%=DateTime.Now.Year%> W3Schools. All rights reserved.</p> </div> </form> </body> </html>
The master page defines the standard layout of your web pages. It has a link to your style sheet file (Styles/Site.css), and a place holder for page content (asp:ContentPlaceHolder).

177

5. Create a Home Page

In your empty "DemoWF" folder, create a new Web Form, named "Default.aspx". If you created a file with this name earlier, you can edit the existing file, or create a new file with a new name (like Default2.aspx). To create a Web Form, right-click the root folder and select "Add New Item...". Then select "Web Form Visual Basic".

Put the following code inside the Web Form page:

Default.aspx
<%@ Page Title="Welcome" Language="VB" MasterPageFile="Site.master" %> <asp:Content ID="Content" ContentPlaceHolderID="MainContent" Runat="Server"> <h2>Web Forms Main Ingredients</h2> <p>A Home Page (Default.aspx)</p> <p>A Layout File (Site.master)</p> <p>A Style Sheet (Site.css)</p> </asp:Content>

Run example

The file starts with a reference to the master file. Inside an <asp:Content> element it contains normal HTML markup.

Congratulations
You have created your first (ASP.NET Web Forms) web site, with a main page (the Default page), a common template for all your pages (the Master page), and a common style sheet (the CSS file). In the next chapters of this tutorial, we will add navigation to the web site. Then we will add a database, and finally we will add login and security.

178

Web Forms File Types

Below is a list of ASP.NET Web Forms most common file types. Extention .htm / .html Description HTML Pages Web pages to be viewed directly by the browser Style Sheets Defines styles and formatting for the web site JavaScripts Contains JavaScripts to be executed in the browser Web Forms The core of ASP.NET. Web pages with ASP.NET code. Web User Controls Contains code fragments to be used by multiple pages Global Class Global code (like startup code) Web Service Contains callable web services Class Files Contains code in C# Class Files Contains code in Vb (Visual Badsic) Web Configuration Contains configuration information for the web site Master Pages Define the global structure (look) of the web site XML Sitemap Data stored in XML format SQL Server Compact Databases SQL Server Expess (Accsess) Databases

.css

.js

.aspx

.ascx

.asax

.asmx

.cs

.vb

.config

.master

.sitemap .xml .sdf .mdf

179

ASP.NET Web Forms - Adding a Menu

Learn ASP.NET Web Forms by building a web site from scratch. Part II: Adding Navigation.

What We Will Do
In this chapter we will:

Add an about page Add a navigation menu

Add an About Page

In the "DemoWF" folder, create a new Web Form named "About.aspx". Put the following code inside the file:

About.aspx
<%@ Page Title="About" Language="VB" MasterPageFile="Site.master" %> <asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="Server"> <h2>About Us</h2> <p>Lorem Ipsum Porem Lorem Ipsum Porem</p> </asp:Content>
The about file above contains a heading and a paragraph. Please feel free to edit the content.

Add a Navigation Menu

In the master file named "Site.master" and, edit the content. Put the following code inside the master file:

180

Site.master
<%@ Master Language="VB" %> <!DOCTYPE html> <head id="head" runat="server"> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <ul id="menu"> <li><a href="Default.aspx">Home</a></li> <li><a href="About.aspx">About</a></li> </ul> <div id="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> <p>© <%=DateTime.Now.year%> W3Schools. All rights reserved.</p> </div> </form> </body> </html>
The master file above, is a copy of the master file from the previous chapter, with an added unordered list (marked red).

Edit The Style Sheet

In the Styles folder, edit your your style sheet (Site.css): Put the following code inside the file:

Site.css
body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { color: #ffffff; } h2 {

181

border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 4px 4px 0 0; } ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; color: #034af3; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; }
The style sheet above, is a copy of the style sheet from the previous chapter, with added styles for an unordered list (marked red).

182

Edit the Home Page

In your "DemoWF" folder, edit the page (file) named "Default.aspx". Put the following code inside the file:

Default.aspx
<%@ Page Title="Home" Language="VB" MasterPageFile="Site.master" %> <asp:Content ID="Content" ContentPlaceHolderID="MainContent" Runat="Server"> <h1>Welcome</h1> <p>Lorem Ipsum Porem Lorem Ipsum Porem</p> </asp:Content>

Run example

Feel free to edit the content.

Congratulations
You have added navigation to your website. In the next chapter we will add a database.

183

ASP.NET Web Forms - Databases

Learn ASP.NET Web Forms by building a web site from scratch. Part III: Adding a Database.

What We Will Do
In this chapter we will:

Create a database Add data to the database Create a page to list the database

Creating the Database

Visual Web Developer comes with a free SQL database called SQL Server Compact. The database needed for this tutorial can be created with these simple steps:

Right-click the App_Data folder in the Solution Explorer window Select Add, New Item Select SQL Server Compact Local Database * Name the database Movies.sdf. Click the Add button

Adding a Database Table

184

Column ID Title Director Date

Type int (primary key) nvarchar(100) nvarchar(100) datetime

Allow Nulls No No No No

185

When you have finished creating the table columns, save the table and name it Movies.

Adding Database Records

You can use Visual Web Developer to add some test records to the movie database. Double-click the Movies.sdf file in the App_Data folder. Right-click the Movie table in the Database Explorer window and select Show Table Data. Add some records:

186

ID 1 2

Title Psycho La Dolce Vita

Director Alfred Hitchcock Federico Fellini

Date 01.01.1960 01.01.1960

Note: The ID column is updated automatically. You should not edit it.

Adding Products Page

In the "DemoWF" folder, create a new Web Form named "Movies.aspx". Put the following code inside the file:

Movies.aspx
<%@ Page Title="" Language="VB" MasterPageFile="Site.master" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server"> <h2>Products</h2> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="Movies"> <Columns> <asp:BoundField <asp:BoundField <asp:BoundField <asp:BoundField </Columns> </asp:GridView> <asp:SqlDataSource ID="Movies" runat="server" ConnectionString="Data Source=|DataDirectory|\Movies.sdf" ProviderName="System.Data.SqlServerCe.4.0" SelectCommand="SELECT [ID], [Title], [Director], [Date] FROM [Movies]"> </asp:SqlDataSource> </asp:Content>

DataField="ID" HeaderText="ID" /> DataField="Title" HeaderText="Title" /> DataField="Director" HeaderText="Director" /> DataField="Date" HeaderText="Date" />

187

Edit the Master Page

In the Master Page (Site.master), locate the navigation menu. Then add a new line to the menu:

Part of Site.master
<ul id="menu"> <li><a href="Default.aspx">Home</a></li> <li><a href="Movies.aspx">Movies</a></li> <li><a href="About.aspx">About</a></li> </ul>

Congratulations
You have added a database to your web project.

188

ASP.NET Web Forms - Tutorial

Web Pages

MVC

Web Forms

ASP.NET Framework

What is Web Forms?

Web Forms is one of the 3 programming models for creating ASP.NET web sites and web applications. The other two programming models are Web Pages and MVC (Model, View, Controller). Web Forms is the oldest ASP.NET programming model, with event driven web pages written as a combination of HTML, server controls, and server code. Web Forms are compiled and executed on the server, which generates the HTML that displays the web pages. Web Forms comes with hundreds of different web controls and web components to build user-driven web sites with data access.

189

Where to Start?
Many developers like to start learning a new technology by looking at working examples. If you want to take a look at a working Web Forms examples, follow the ASP.NET Web Forms Demo.

Visual Web Developer (VWD)

Visual Web Developer is a free development tool, tailor made for Web Forms (and MVC). Visual Web Developer contains:

You should install Visual Web Developer, to get the full benefits from this tutorial. If you want to install VWD, go to the chapter ASP.NET Web Forms Demo.

ASP.NET References
At the end of this tutorial you will find a complete ASP.NET reference with objects, components, properties and methods. ASP.NET Reference

190

ASP.NET Web Forms - HTML Pages

A simple ASP.NET page looks just like an ordinary HTML page.

Hello W3Schools
To start learning ASP.NET, we will construct a very simple HTML page that will display "Hello W3Schools" in an Internet browser like this:

Hello W3Schools!

Hello W3Schools in HTML

This code displays the example as an HTML page:

<html> <body bgcolor="yellow"> <center> <h2>Hello W3Schools!</h2> </center> </body> </html>

If you want to try it yourself, save the code in a file called "firstpage.htm", and create a link to the file like this: firstpage.htm

Hello W3Schools in ASP.NET

The simplest way to convert an HTML page into an ASP.NET page is to copy the HTML file to a new file with an .aspx extension. This code displays our example as an ASP.NET page:

191

<html> <body bgcolor="yellow"> <center> <h2>Hello W3Schools!</h2> </center> </body> </html>

If you want to try it yourself, save the code in a file called "firstpage.aspx", and create a link to the file like this: firstpage.aspx

How Does it Work?

Fundamentally an ASP.NET page is just the same as an HTML page. An HTML page has the extension .htm. If a browser requests an HTML page from the server, the server sends the page to the browser without any modifications. An ASP.NET page has the extension .aspx. If a browser requests an ASP.NET page, the server processes any executable code in the page, before the result is sent back to the browser. The ASP.NET page above does not contain any executable code, so nothing is executed. In the next examples we will add some executable code to the page to demonstrate the difference between static HTML pages and dynamic ASP pages.

Classic ASP
Active Server Pages (ASP) has been around for several years. With ASP, executable code can be placed inside HTML pages. Previous versions of ASP (before ASP .NET) are often called Classic ASP. ASP.NET is not fully compatible with Classic ASP, but most Classic ASP pages will work fine as ASP.NET pages, with only minor changes. If you want to learn more about Classic ASP, please visit our ASP Tutorial.

192

Dynamic Page in Classic ASP

To demonstrate how ASP can display pages with dynamic content, we have added some executable code (in red) to the previous example:

<html> <body bgcolor="yellow"> <center> <h2>Hello W3Schools!</h2> <p><%Response.Write(now())%></p> </center> </body> </html>
The code inside the <% --%> tags is executed on the server. Response.Write is ASP code for writing something to the HTML output stream. Now() is a function returning the servers current date and time. If you want to try it yourself, save the code in a file called "dynpage.asp", and create a link to the file like this: dynpage.asp

Dynamic Page in ASP .NET

This following code displays our example as an ASP.NET page:

<html> <body bgcolor="yellow"> <center> <h2>Hello W3Schools!</h2> <p><%Response.Write(now())%></p> </center> </body> </html>
If you want to try it yourself, save the code in a file called "dynpage.aspx", and create a link to the file like this: dynpage.aspx

193

ASP.NET vs Classic ASP

The previous examples didn't demonstrate any differences between ASP.NET and Classic ASP. As you can see from the two latest examples there are no differences between the two ASP and ASP.NET pages. In the next chapters you will see how server controls make ASP.NET more powerful than Classic ASP.

194

ASP.NET Web Forms - Server Controls

Server controls are tags that are understood by the server.

Limitations in Classic ASP

The listing below was copied from the previous chapter:

<html> <body bgcolor="yellow"> <center> <h2>Hello W3Schools!</h2> <p><%Response.Write(now())%></p> </center> </body> </html>
The code above illustrates a limitation in Classic ASP: The code block has to be placed where you want the output to appear. With Classic ASP it is impossible to separate executable code from the HTML itself. This makes the page difficult to read, and difficult to maintain.

ASP.NET - Server Controls

ASP.NET has solved the "spaghetti-code" problem described above with server controls. Server controls are tags that are understood by the server. There are three kinds of server controls:

HTML Server Controls - Traditional HTML tags Web Server Controls - New ASP.NET tags Validation Server Controls - For input validation

195

ASP.NET - HTML Server Controls

HTML server controls are HTML tags understood by the server. HTML elements in ASP.NET files are, by default, treated as text. To make these elements programmable, add a runat="server" attribute to the HTML element. This attribute indicates that the element should be treated as a server control. The id attribute is added to identify the server control. The id reference can be used to manipulate the server control at run time. Note: All HTML server controls must be within a <form> tag with the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. It also indicates that the enclosed controls can be accessed by server scripts. In the following example we declare an HtmlAnchor server control in an .aspx file. Then we manipulate the HRef attribute of the HtmlAnchor control in an event handler (an event handler is a subroutine that executes code for a given event). The Page_Load event is one of many events that ASP.NET understands:

ASP.NET - Web Server Controls

Web server controls are special ASP.NET tags understood by the server. Like HTML server controls, Web server controls are also created on the server and they require a runat="server" attribute to work. However, Web server controls do not necessarily map to any existing HTML elements and they may represent more complex elements. The syntax for creating a Web server control is:

<asp:control_name id="some_id" runat="server" />

196

In the following example we declare a Button server control in an .aspx file. Then we create an event handler for the Click event which changes the text on the button:

ASP.NET - Validation Server Controls

Validation server controls are used to validate user-input. If the user-input does not pass validation, it will display an error message to the user. Each validation control performs a specific type of validation (like validating against a specific value or a range of values). By default, page validation is performed when a Button, ImageButton, or LinkButton control is clicked. You can prevent validation when a button control is clicked by setting the CausesValidation property to false. The syntax for creating a Validation server control is:

<asp:control_name id="some_id" runat="server" />

In the following example we declare one TextBox control, one Button control, and one RangeValidator control in an .aspx file. If validation fails, the text "The value must be from 1 to 100!" will be displayed in the RangeValidator control:

197

Example
<html> <body> <form runat="server"> <p>Enter a number from 1 to 100: <asp:TextBox id="tbox1" runat="server" /> <br /><br /> <asp:Button Text="Submit" runat="server" /> </p> <p> <asp:RangeValidator ControlToValidate="tbox1" MinimumValue="1" MaximumValue="100" Type="Integer" Text="The value must be from 1 to 100!" runat="server" /> </p> </form> </body> </html>

Show example

198

ASP.NET Web Forms - Events

An Event Handler is a subroutine that executes code for a given event.

ASP.NET - Event Handlers

Look at the following code:

<% lbl1.Text="The date and time is " & now() %> <html> <body> <form runat="server"> <h3><asp:label id="lbl1" runat="server" /></h3> </form> </body> </html>
When will the code above be executed? The answer is: "You don't know..."

The Page_Load Event

The Page_Load event is one of many events that ASP.NET understands. The Page_Load event is triggered when a page loads, and ASP.NET will automatically call the subroutine Page_Load, and execute the code inside it:

Example
<script runat="server"> Sub Page_Load lbl1.Text="The date and time is " & now() End Sub </script> <html> <body> <form runat="server"> <h3><asp:label id="lbl1" runat="server" /></h3> </form> </body> </html>

199

Show example

Note: The Page_Load event contains no object references or event arguments!

The Page.IsPostBack Property

The Page_Load subroutine runs EVERY time the page is loaded. If you want to execute the code in the Page_Load subroutine only the FIRST time the page is loaded, you can use the Page.IsPostBack property. If the Page.IsPostBack property is false, the page is loaded for the first time, if it is true, the page is posted back to the server (i.e. from a button click on a form):

Example
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then lbl1.Text="The date and time is " & now() end if End Sub Sub submit(s As Object, e As EventArgs) lbl2.Text="Hello World!" End Sub </script> <html> <body> <form runat="server"> <h3><asp:label id="lbl1" runat="server" /></h3> <h3><asp:label id="lbl2" runat="server" /></h3> <asp:button text="Submit" onclick="submit" runat="server" /> </form> </body> </html>

Show example

The example above will write the "The date and time is...." message only the first time the page is loaded. When a user clicks on the Submit button, the submit subroutine will write "Hello World!" to the second label, but the date and time in the first label will not change.

200

ASP.NET Web Forms - HTML Forms

All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute.

ASP.NET Web Forms

All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute. The runat="server" attribute indicates that the form should be processed on the server. It also indicates that the enclosed controls can be accessed by server scripts:

<form runat="server"> ...HTML + server controls </form>

Note: The form is always submitted to the page itself. If you specify an action attribute, it is ignored. If you omit the method attribute, it will be set to method="post" by default. Also, if you do not specify the name and id attributes, they are automatically assigned by ASP.NET. Note: An .aspx page can only contain ONE <form runat="server"> control! If you select view source in an .aspx page containing a form with no name, method, action, or id attribute specified, you will see that ASP.NET has added these attributes to the form. It looks something like this:

<form name="_ctl0" method="post" action="page.aspx" id="_ctl0"> ...some code </form>

Submitting a Form
A form is most often submitted by clicking on a button. The Button server control in ASP.NET has the following format:

<asp:Button id="id" text="label" OnClick="sub" runat="server" />

The id attribute defines a unique name for the button and the text attribute assigns a label to the button. The onClick event handler specifies a named subroutine to execute. In the following example we declare a Button control in an .aspx file. A button click runs a subroutine which changes the text on the button:

201

ASP.NET Web Forms - Maintaining the ViewState

You may save a lot of coding by maintaining the ViewState of the objects in your Web Form.

Maintaining the ViewState

When a form is submitted in classic ASP, all form values are cleared. Suppose you have submitted a form with a lot of information and the server comes back with an error. You will have to go back to the form and correct the information. You click the back button, and what happens.......ALL form values are CLEARED, and you will have to start all over again! The site did not maintain your ViewState. When a form is submitted in ASP .NET, the form reappears in the browser window together with all form values. How come? This is because ASP .NET maintains your ViewState. The ViewState indicates the status of the page when submitted to the server. The status is defined through a hidden field placed on each page with a <form runat="server"> control. The source could look something like this:

<form name="_ctl0" method="post" action="page.aspx" id="_ctl0"> <input type="hidden" name="__VIEWSTATE" value="dDwtNTI0ODU5MDE1Ozs+ZBCF2ryjMpeVgUrY2eTj79HNl4Q=" /> .....some code </form>
Maintaining the ViewState is the default setting for ASP.NET Web Forms. If you want to NOT maintain the ViewState, include the directive <%@ Page EnableViewState="false" %> at the top of an .aspx page or add the attribute EnableViewState="false" to any control. Look at the following .aspx file. It demonstrates the "old" way to do it. When you click on the submit button, the form value will disappear:

Example
<html> <body> <form action="demo_classicasp.aspx" method="post"> Your name: <input type="text" name="fname" size="20"> <input type="submit" value="Submit"> </form> <% dim fname fname=Request.Form("fname") If fname<>"" Then Response.Write("Hello " & fname & "!")

202

End If %> </body> </html>

Show example

Here is the new ASP .NET way. When you click on the submit button, the form value will NOT disappear:

Example
Click view source in the right frame of the example to see that ASP .NET has added a hidden field in the form to maintain the ViewState

203

<asp:Button OnClick="submit" Text="Submit" runat="server" /> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>

Show example

204

ASP.NET Web Forms - The TextBox Control

The TextBox control is used to create a text box where the user can input text.

The TextBox Control

The TextBox control is used to create a text box where the user can input text. The TextBox control's attributes and properties are listed in our web controls reference page. The example below demonstrates some of the attributes you may use with the TextBox control:

Example
<html> <body> <form runat="server"> A basic TextBox: <asp:TextBox id="tb1" runat="server" /> <br /><br /> A password TextBox: <asp:TextBox id="tb2" TextMode="password" runat="server" /> <br /><br /> A TextBox with text: <asp:TextBox id="tb4" Text="Hello World!" runat="server" /> <br /><br /> A multiline TextBox: <asp:TextBox id="tb3" TextMode="multiline" runat="server" /> <br /><br /> A TextBox with height: <asp:TextBox id="tb6" rows="5" TextMode="multiline" runat="server" /> <br /><br /> A TextBox with width: <asp:TextBox id="tb5" columns="30" runat="server" /> </form>

205

</body> </html>

Show example

Add a Script
The contents and settings of a TextBox control may be changed by server scripts when a form is submitted. A form can be submitted by clicking on a button or when a user changes the value in the TextBox control. In the following example we declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a text to the Label control:

Example
<script runat="server"> Sub submit(sender As Object, e As EventArgs) lbl1.Text="Your name is " & txt1.Text End Sub </script> <html> <body> <form runat="server">

206

Enter your name: <asp:TextBox id="txt1" runat="server" /> <asp:Button OnClick="submit" Text="Submit" runat="server" /> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>

Show example

In the following example we declare one TextBox control and one Label control in an .aspx file. When you change the value in the TextBox and either click outside the TextBox or press the Tab key, the change subroutine is executed. The submit subroutine writes a text to the Label control:

Example
<script runat="server"> Sub change(sender As Object, e As EventArgs) lbl1.Text="You changed text to " & txt1.Text End Sub </script> <html> <body> <form runat="server"> Enter your name:

207

<asp:TextBox id="txt1" runat="server" text="Hello World!" ontextchanged="change" autopostback="true"/> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>

Show example

208

ASP.NET Web Forms - The Button Control

The Button control is used to display a push button.

The Button Control

The Button control is used to display a push button. The push button may be a submit button or a command button. By default, this control is a submit button. A submit button does not have a command name and it posts the page back to the server when it is clicked. It is possible to write an event handler to control the actions performed when the submit button is clicked. A command button has a command name and allows you to create multiple Button controls on a page. It is possible to write an event handler to control the actions performed when the command button is clicked. The Button control's attributes and properties are listed in our web controls reference page. The example below demonstrates a simple Button control:

Add a Script
A form is most often submitted by clicking on a button. In the following example we declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a text to the Label control:

209

Example
<script runat="server"> Sub submit(sender As Object, e As EventArgs) lbl1.Text="Your name is " & txt1.Text End Sub </script> <html> <body> <form runat="server"> Enter your name: <asp:TextBox id="txt1" runat="server" /> <asp:Button OnClick="submit" Text="Submit" runat="server" /> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>

Show example

210

ASP.NET Web Forms - Data Binding

We may use data binding to fill lists with selectable items from an imported data source, like a database, an XML file, or a script.

Data Binding
The following controls are list controls which support data binding:

asp:RadioButtonList asp:CheckBoxList asp:DropDownList asp:Listbox

The selectable items in each of the above controls are usually defined by one or more asp:ListItem controls, like this:

<html> <body> <form runat="server"> <asp:RadioButtonList id="countrylist" runat="server"> <asp:ListItem value="N" text="Norway" /> <asp:ListItem value="S" text="Sweden" /> <asp:ListItem value="F" text="France" /> <asp:ListItem value="I" text="Italy" /> </asp:RadioButtonList> </form> </body> </html>
However, with data binding we may use a separate source, like a database, an XML file, or a script to fill the list with selectable items. By using an imported source, the data is separated from the HTML, and any changes to the items are made in the separate data source. In the next three chapters, we will describe how to bind data from a scripted data source.

211

ASP.NET Web Forms - The ArrayList Object

The ArrayList object is a collection of items containing a single data value.

Try it Yourself - Examples

ArrayList DropDownList ArrayList RadioButtonList

Create an ArrayList
The ArrayList object is a collection of items containing a single data value. Items are added to the ArrayList with the Add() method. The following code creates a new ArrayList object named mycountries and four items are added:

212

mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() end if end sub </script>

An ArrayList can also be sorted alphabetically or numerically with the Sort() method:

Data Binding to an ArrayList

An ArrayList object may automatically generate the text and values to the following controls:

asp:RadioButtonList

213

asp:CheckBoxList asp:DropDownList asp:Listbox

To bind data to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:

<html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" /> </form> </body> </html>
Then add the script that builds the list and binds the values in the list to the RadioButtonList control:

Example
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then dim mycountries=New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() mycountries.Sort() rb.DataSource=mycountries rb.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" /> </form> </body> </html>

Show example

214

The DataSource property of the RadioButtonList control is set to the ArrayList and it defines the data source of the RadioButtonList control. The DataBind() method of the RadioButtonList control binds the data source with the RadioButtonList control. Note: The data values are used as both the Text and Value properties for the control. To add Values that are different from the Text, use either the Hashtable object or the SortedList object.

215

ASP.NET Web Forms - The Hashtable Object

The Hashtable object contains items in key/value pairs.

Try it Yourself - Examples

Hashtable RadiobuttonList 1 Hashtable RadiobuttonList 2 Hashtable DropDownList

Create a Hashtable
The Hashtable object contains items in key/value pairs. The keys are used as indexes, and very quick searches can be made for values by searching through their keys. Items are added to the Hashtable with the Add() method. The following code creates a Hashtable named mycountries and four elements are added:

216

Data Binding
A Hashtable object may automatically generate the text and values to the following controls:

asp:RadioButtonList asp:CheckBoxList asp:DropDownList asp:Listbox

To bind data to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:

<html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" /> </form> </body> </html>
Then add the script that builds the list:

217

Then we add a sub routine to be executed when the user clicks on an item in the RadioButtonList control. When a radio button is clicked, a text will appear in a label:

Example
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New Hashtable mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>

Show example

218

Note: You cannot choose the sort order of the items added to the Hashtable. To sort items alphabetically or numerically, use the SortedList object.

219

ASP.NET Web Forms - The SortedList Object

The SortedList object combines the features of both the ArrayList object and the Hashtable object.

Try it Yourself - Examples

SortedList RadiobuttonList 1 SortedList RadiobuttonList 2 SortedList DropDownList

The SortedList Object

The SortedList object contains items in key/value pairs. A SortedList object automatically sort the items in alphabetic or numeric order. Items are added to the SortedList with the Add() method. A SortedList can be sized to its final size with the TrimToSize() method. The following code creates a SortedList named mycountries and four elements are added:

220

Data Binding
A SortedList object may automatically generate the text and values to the following controls:

asp:RadioButtonList asp:CheckBoxList asp:DropDownList asp:Listbox

To bind data to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:

<html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" /> </form> </body> </html>
Then add the script that builds the list:

221

Then we add a sub routine to be executed when the user clicks on an item in the RadioButtonList control. When a radio button is clicked, a text will appear in a label:

Example
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New SortedList mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>

Show example

222

223

ASP.NET Web Forms - XML Files

We can bind an XML file to a list control.

An XML File
Here is an XML file named "countries.xml":

<?xml version="1.0" encoding="ISO-8859-1"?> <countries> <country> <text>Norway</text> <value>N</value> </country> <country> <text>Sweden</text> <value>S</value> </country> <country> <text>France</text> <value>F</value> </country> <country> <text>Italy</text> <value>I</value> </country> </countries>
Take a look at the XML file: countries.xml

224

Bind a DataSet to a List Control

First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<%@ Import Namespace="System.Data" %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

<html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" /> </form> </body> </html>
Then add the script that builds the XML DataSet:

<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New DataSet mycountries.ReadXml(MapPath("countries.xml")) rb.DataSource=mycountries rb.DataValueField="value" rb.DataTextField="text" rb.DataBind() end if end sub </script> <html> <body>

225

<form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> </form> </body> </html>
Then we add a sub routine to be executed when the user clicks on an item in the RadioButtonList control. When a radio button is clicked, a text will appear in a label:

Example
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New DataSet mycountries.ReadXml(MapPath("countries.xml")) rb.DataSource=mycountries rb.DataValueField="value" rb.DataTextField="text" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>

Show example

226

227

ASP.NET Web Forms - The Repeater Control

The Repeater control is used to display a repeated list of items that are bound to the control.

Bind a DataSet to a Repeater Control

The Repeater control is used to display a repeated list of items that are bound to the control. The Repeater control may be bound to a database table, an XML file, or another list of items. Here we will show how to bind an XML file to a Repeater control. We will use the following XML file in our examples ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> <cd> <title>Hide your heart</title> <artist>Bonnie Tyler</artist> <country>UK</country> <company>CBS Records</company> <price>9.90</price> <year>1988</year> </cd> <cd> <title>Greatest Hits</title> <artist>Dolly Parton</artist> <country>USA</country> <company>RCA</company> <price>9.90</price> <year>1982</year> </cd> <cd> <title>Still got the blues</title> <artist>Gary Moore</artist> <country>UK</country> <company>Virgin records</company>

228

<price>10.20</price> <year>1990</year> </cd> <cd> <title>Eros</title> <artist>Eros Ramazzotti</artist> <country>EU</country> <company>BMG</company> <price>9.90</price> <year>1997</year> </cd> </catalog>
Take a look at the XML file: cdcatalog.xml First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<%@ Import Namespace="System.Data" %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

229

<FooterTemplate> ... </FooterTemplate> </asp:Repeater> </form> </body> </html>

Then we add the script that creates the DataSet and binds the mycdcatalog DataSet to the Repeater control. We also fill the Repeater control with HTML tags and bind the data items to the cells in the<ItemTemplate> section with the <%#Container.DataItem("fieldname")%> method:

230

Show example

231

Using the <AlternatingItemTemplate>

You can add an <AlternatingItemTemplate> element after the <ItemTemplate> element to describe the appearance of alternating rows of output. In the following example each other row in the table will be displayed in a light grey color:

Example
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycdcatalog=New DataSet mycdcatalog.ReadXml(MapPath("cdcatalog.xml")) cdcatalog.DataSource=mycdcatalog cdcatalog.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:Repeater id="cdcatalog" runat="server"> <HeaderTemplate> <table border="1" width="100%"> <tr> <th>Title</th> <th>Artist</th> <th>Country</th> <th>Company</th> <th>Price</th> <th>Year</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Container.DataItem("title")%></td> <td><%#Container.DataItem("artist")%></td> <td><%#Container.DataItem("country")%></td> <td><%#Container.DataItem("company")%></td> <td><%#Container.DataItem("price")%></td> <td><%#Container.DataItem("year")%></td> </tr> </ItemTemplate>

232

Show example

233

Using the <SeparatorTemplate>

The <SeparatorTemplate> element can be used to describe a separator between each record. The following example inserts a horizontal line between each table row:

Example
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycdcatalog=New DataSet mycdcatalog.ReadXml(MapPath("cdcatalog.xml")) cdcatalog.DataSource=mycdcatalog cdcatalog.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:Repeater id="cdcatalog" runat="server"> <HeaderTemplate> <table border="0" width="100%"> <tr> <th>Title</th> <th>Artist</th> <th>Country</th> <th>Company</th> <th>Price</th> <th>Year</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Container.DataItem("title")%></td> <td><%#Container.DataItem("artist")%></td> <td><%#Container.DataItem("country")%></td> <td><%#Container.DataItem("company")%></td> <td><%#Container.DataItem("price")%></td> <td><%#Container.DataItem("year")%></td> </tr> </ItemTemplate> <SeparatorTemplate>

234

Show example

235

ASP.NET Web Forms - The DataList Control

Bind a DataSet to a DataList Control

The DataList control is, like the Repeater control, used to display a repeated list of items that are bound to the control. However, the DataList control adds a table around the data items by default. The DataList control may be bound to a database table, an XML file, or another list of items. Here we will show how to bind an XML file to a DataList control. We will use the following XML file in our examples ("cdcatalog.xml"):

236

<country>UK</country> <company>Virgin records</company> <price>10.20</price> <year>1990</year> </cd> <cd> <title>Eros</title> <artist>Eros Ramazzotti</artist> <country>EU</country> <company>BMG</company> <price>9.90</price> <year>1997</year> </cd> </catalog>
Take a look at the XML file: cdcatalog.xml First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<%@ Import Namespace="System.Data" %>

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:

<html> <body> <form runat="server"> <asp:DataList id="cdcatalog" runat="server"> <HeaderTemplate> ... </HeaderTemplate> <ItemTemplate> ...

237

</ItemTemplate> <FooterTemplate> ... </FooterTemplate> </asp:DataList> </form> </body> </html>

Then we add the script that creates the DataSet and binds the mycdcatalog DataSet to the DataList control. We also fill the DataList control with a <HeaderTemplate> that contains the header of the table, an <ItemTemplate> that contains the data items to display, and a <FooterTemplate> that contains a text. Note that the gridlines attribute of the DataList is set to "both" to display table borders:

238

<FooterTemplate> Copyright Hege Refsnes </FooterTemplate> </asp:DataList> </form> </body> </html>

Show example

Using Styles
You can also add styles to the DataList control to make the output more fancy:

239

cdcatalog.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:DataList id="cdcatalog" runat="server" cellpadding="2" cellspacing="2" borderstyle="inset" backcolor="#e8e8e8" width="100%" headerstyle-font-name="Verdana" headerstyle-font-size="12pt" headerstyle-horizontalalign="center" headerstyle-font-bold="true" itemstyle-backcolor="#778899" itemstyle-forecolor="#ffffff" footerstyle-font-size="9pt" footerstyle-font-italic="true"> <HeaderTemplate> My CD Catalog </HeaderTemplate> <ItemTemplate> "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> </ItemTemplate> <FooterTemplate> Copyright Hege Refsnes </FooterTemplate> </asp:DataList> </form> </body> </html>

Show example

240

Using the <AlternatingItemTemplate>

You can add an <AlternatingItemTemplate> element after the <ItemTemplate> element to describe the appearance of alternating rows of output. You may style the data in the <AlternatingItemTemplate> section within the DataList control:

241

cellspacing="2" borderstyle="inset" backcolor="#e8e8e8" width="100%" headerstyle-font-name="Verdana" headerstyle-font-size="12pt" headerstyle-horizontalalign="center" headerstyle-font-bold="True" itemstyle-backcolor="#778899" itemstyle-forecolor="#ffffff" alternatingitemstyle-backcolor="#e8e8e8" alternatingitemstyle-forecolor="#000000" footerstyle-font-size="9pt" footerstyle-font-italic="True"> <HeaderTemplate> My CD Catalog </HeaderTemplate> <ItemTemplate> "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> </ItemTemplate> <AlternatingItemTemplate> "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> </AlternatingItemTemplate> <FooterTemplate> © Hege Refsnes </FooterTemplate> </asp:DataList> </form> </body> </html>

Show example

242

243

ASP.NET Web Forms - Database Connection

ADO.NET is also a part of the .NET Framework. ADO.NET is used to handle data access. With ADO.NET you can work with databases.

Try it Yourself - Examples

Database connection - Bind to a DataList control Database connection - Bind to a Repeater control

What is ADO.NET?

ADO.NET ADO.NET ADO.NET ADO.NET is a part of the .NET Framework consists of a set of classes used to handle data access is entirely based on XML has, unlike ADO, no Recordset object

Create a Database Connection

We are going to use the Northwind database in our examples. First, import the "System.Data.OleDb" namespace. We need this namespace to work with Microsoft Access and other OLE DB database providers. We will create the connection to the database in the Page_Load subroutine. We create a dbconn variable as a new OleDbConnection class with a connection string which identifies the OLE DB provider and the location of the database. Then we open the database connection:

<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open()

244

end sub </script>

Note: The connection string must be a continuous string without a line break!

Create a Database Command

To specify the records to retrieve from the database, we will create a dbcomm variable as a new OleDbCommand class. The OleDbCommand class is for issuing SQL queries against database tables:

<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) end sub </script>

Create a DataReader
The OleDbDataReader class is used to read a stream of records from a data source. A DataReader is created by calling the ExecuteReader method of the OleDbCommand object:

<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm,dbread dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) dbread=dbcomm.ExecuteReader() end sub </script>

245

Bind to a Repeater Control

Then we bind the DataReader to a Repeater control:

Example
<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm,dbread dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) dbread=dbcomm.ExecuteReader() customers.DataSource=dbread customers.DataBind() dbread.Close() dbconn.Close() end sub </script> <html> <body> <form runat="server"> <asp:Repeater id="customers" runat="server"> <HeaderTemplate> <table border="1" width="100%"> <tr> <th>Companyname</th> <th>Contactname</th> <th>Address</th> <th>City</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Container.DataItem("companyname")%></td> <td><%#Container.DataItem("contactname")%></td> <td><%#Container.DataItem("address")%></td> <td><%#Container.DataItem("city")%></td> </tr> </ItemTemplate>

246

<FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </form> </body> </html>

Show example

Close the Database Connection

Always close both the DataReader and database connection after access to the database is no longer required:

dbread.Close() dbconn.Close()

247

ASP.NET Web Forms - Master Pages

Master pages provide templates for other pages on your web site.

Master Pages
Master pages allow you to create a consistent look and behavior for all the pages (or group of pages) in your web application. A master page provides a template for other pages, with shared layout and functionality. The master page defines placeholders for the content, which can be overridden by content pages. The output result is a combination of the master page and the content page. The content pages contain the content you want to display. When users request the content page, ASP.NET merges the pages to produce output that combines the layout of the master page with the content of the content page.

Master Page Example

<%@ Master %> <html> <body> <h1>Standard Header For All Pages</h1> <asp:ContentPlaceHolder id="CPH1" runat="server"> </asp:ContentPlaceHolder> </body> </html>
The master page above is a normal HTML page designed as a template for other pages. The @ Master directive defines it as a master page. The master page contains a placeholder tag <asp:ContentPlaceHolder> for individual content. The id="CPH1" attribute identifies the placeholder, allowing many placeholders in the same master page. This master page was saved with the name "master1.master". Note: The master page can also contain code, allowing dynamic content.

248

Content Page Example

<%@ Page MasterPageFile="master1.master" %> <asp:Content ContentPlaceHolderId="CPH1" runat="server"> <h2>Individual Content</h2> <p>Paragraph 1</p> <p>Paragraph 2</p> </asp:Content>
The content page above is one of the individual content pages of the web. The @ Page directive defines it as a standard content page. The content page contains a content tag <asp:Content> with a reference to the master page (ContentPlaceHolderId="CPH1"). This content page was saved with the name "mypage1.aspx". When the user requests this page, ASP.NET merges the content page with the master page. Click to display mypage1.aspx. Note: The content text must be inside the <asp:Content> tag. No content is allowed outside the tag.

Content Page With Controls

<%@ Page MasterPageFile="master1.master" %> <asp:Content ContentPlaceHolderId="CPH1" runat="server"> <h2>W3Schools</h2> <form runat="server"> <asp:TextBox id="textbox1" runat="server" /> <asp:Button id="button1" runat="server" text="Button" /> </form> </asp:Content>
The content page above demonstrates how .NET controls can be inserted into the content page just like an into an ordinary page. Click to display mypage2.aspx.

249

ASP.NET Web Forms - Navigation

ASP.NET has built-in navigation controls

Web Site Navigation

Maintaining the menu of a large web site is difficult and time consuming. In ASP.NET the menu can be stored in a file to make it easier to maintain. This file is normally calledweb.sitemap, and is stored in the root directory of the web. In addition, ASP.NET has three new navigation controls:

Dynamic menus TreeViews Site Map Path

The Sitemap File

The following sitemap file is used in this tutorial:

<?xml version="1.0" encoding="ISO-8859-1" ?> <siteMap> <siteMapNode title="Home" url="/aspnet/w3home.aspx"> <siteMapNode title="Services" url="/aspnet/w3services.aspx"> <siteMapNode title="Training" url="/aspnet/w3training.aspx"/> <siteMapNode title="Support" url="/aspnet/w3support.aspx"/> </siteMapNode> </siteMapNode> </siteMap>
Rules for creating a sitemap file:

The XML file must contain a <siteMap> tag surrounding the content The <siteMap> tag can only have one <siteMapNode> child node (the "home" page) Each <siteMapNode> can have several child nodes (web pages) Each <siteMapNode> has attributes defining page title and URL

Note: The sitemap file must be placed in the root directory of the web and the URL attributes must be relative to the root directory.

250

Dynamic Menu
The <asp:Menu> control displays a standard site navigation menu. Code Example:

<asp:SiteMapDataSource id="nav1" runat="server" /> <form runat="server"> <asp:Menu runat="server" DataSourceId="nav1" /> </form>
The <asp:Menu> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:SiteMapDataSource> control. The <asp:SiteMapDataSource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath

TreeView
The <asp:TreeView> control displays a multi level navigation menu. The menu looks like a tree with branches that can be opened or closed with + or - symbol. Code Example:

<asp:SiteMapDataSource id="nav1" runat="server" /> <form runat="server"> <asp:TreeView runat="server" DataSourceId="nav1" /> </form>
The <asp:TreeView> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:SiteMapDataSource> control. The <asp:SiteMapDataSource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath

251

SiteMapPath
The SiteMapPath control displays the trail (navigation path) to the current page. The path acts as clickable links to previous pages. Unlike the TreeView and Menu control the SiteMapPath control does NOT use a SiteMapDataSource. The SiteMapPath control uses the web.sitemap file by default. Tips: If the SiteMapPath displays incorrectly, most likely there is an URL error (typo) in the web.sitemap file. Code Example:

<form runat="server"> <asp:SiteMapPath runat="server" /> </form>

The <asp:SiteMapPath> control in the example above is a placeholder for a server created site path display. Click here to see a demo of Menu, TreeView, and SiteMapPath

252

ASP.NET Web Forms - Examples

ASP.NET HTML Controls HTMLAnchor HTMLButton HTMLImage HTMLImage 2 HTMLInputbutton HTMLInputCheckbox HTMLInputHidden HTMLInputImage HTMLInputRadiobutton HTMLTable HTMLTable 2 HTMLTextarea ASP.NET Web Controls AdRotator Button Button 2 Calendar Calendar 2 Calendar 3 Checkbox CheckboxList DataList DataList with styles DataList with <AlternatingItemTemplate> DropdownList Hyperlink Image ImageButton Label LinkButton Listbox Literal Literal 2 Panel Radiobutton RadiobuttonList Repeater Repeater with <AlternatingItemTemplate> Repeater with <SeparatorTemplate> Table Table 2 Textbox Textbox 2 Textbox 3 XML

253

ASP.NET Validation Controls CompareValidator CompareValidator 2 CustomValidator RangeValidator RangeValidator 2 RegularExpressionValidator RequiredFieldValidator Validationsummary Validationsummary 2 ASP.NET Events Page_Load Page.IsPostBack ASP.NET Data Binding ArrayList RadioButtonList ArrayList DropDownList Hashtable RadioButtonList 1 Hashtable RadiobuttonList 2 Hashtable DropDownList SortedList RadioButtonList 1 SortedList RadiobuttonList 2 SortedList DropDownList XML RadiobuttonList ASP.NET Database Database connection - Bind to a Repeater control Database connection - Bind to a DataList control

254

Java 17 Backend Development: Design backend systems using Spring Boot, Docker, Kafka, Eureka, Redis, and Tomcat
From Everand
Java 17 Backend Development: Design backend systems using Spring Boot, Docker, Kafka, Eureka, Redis, and Tomcat
Elara Drevyn
No ratings yet
Apache Cassandra Administrator Associate - Exam Practice Tests
From Everand
Apache Cassandra Administrator Associate - Exam Practice Tests
Cristian Scutaru
No ratings yet
Syncthing Instructions
No ratings yet
Syncthing Instructions
3 pages
Ahmed Elgendy Flutter Developer CV
No ratings yet
Ahmed Elgendy Flutter Developer CV
2 pages
C Sharp The Nuts and Bolts
100% (1)
C Sharp The Nuts and Bolts
276 pages
WinSPMBT Game Guide Version 8
100% (1)
WinSPMBT Game Guide Version 8
365 pages
ASP.Net
No ratings yet
ASP.Net
391 pages
Index
No ratings yet
Index
90 pages
Web Development Roadmap
No ratings yet
Web Development Roadmap
5 pages
ASP .NET Tutorial-W3school
No ratings yet
ASP .NET Tutorial-W3school
147 pages
IMCA Syllabus 2018
No ratings yet
IMCA Syllabus 2018
28 pages
HackerRank Notes
No ratings yet
HackerRank Notes
10 pages
C# Calculator
No ratings yet
C# Calculator
27 pages
Chapter2 PDF
No ratings yet
Chapter2 PDF
24 pages
Youtube Data Strcutre and Algorithms New Baghdad
No ratings yet
Youtube Data Strcutre and Algorithms New Baghdad
147 pages
Kaushal
No ratings yet
Kaushal
77 pages
Pizza - Google Hashcode
No ratings yet
Pizza - Google Hashcode
3 pages
SQL and Relational Databases 101
No ratings yet
SQL and Relational Databases 101
1 page
Resume of Yaseer ASP - Net MVC C# 7yr
No ratings yet
Resume of Yaseer ASP - Net MVC C# 7yr
10 pages
Udacity Introduction To Programming
No ratings yet
Udacity Introduction To Programming
111 pages
Points To Be Discussed
100% (1)
Points To Be Discussed
35 pages
OOP Part - 3 PDF
No ratings yet
OOP Part - 3 PDF
12 pages
Simple Bank Project Part 1 C Sharp
No ratings yet
Simple Bank Project Part 1 C Sharp
7 pages
Notes by RN Reddy
No ratings yet
Notes by RN Reddy
454 pages
Suresh Babu Gogulamudi
100% (2)
Suresh Babu Gogulamudi
4 pages
Developing Asp Net Core MVC Web Applications m20486 m20486 PDF
No ratings yet
Developing Asp Net Core MVC Web Applications m20486 m20486 PDF
6 pages
Certified C# Professional VS-1066
No ratings yet
Certified C# Professional VS-1066
0 pages
Certified Wordpress Developer - Brochure
No ratings yet
Certified Wordpress Developer - Brochure
7 pages
Asp .Net MVC 4
No ratings yet
Asp .Net MVC 4
95 pages
With C# or VB - Net Interview Questions
100% (1)
With C# or VB - Net Interview Questions
44 pages
Exploratory Data Analysis With R PDF
No ratings yet
Exploratory Data Analysis With R PDF
125 pages
Regular Expressions in Python
No ratings yet
Regular Expressions in Python
16 pages
NET Core - Xamarin Forms + Prism - Xamarin Classic + MVVM Cross (Veterinary)
No ratings yet
NET Core - Xamarin Forms + Prism - Xamarin Classic + MVVM Cross (Veterinary)
447 pages
NET Interview Questions and Answers - DotNet
No ratings yet
NET Interview Questions and Answers - DotNet
16 pages
Linq Notes
No ratings yet
Linq Notes
8 pages
How To Learn Data Science For Free
No ratings yet
How To Learn Data Science For Free
2 pages
TMSWEBCore Dev Guide
No ratings yet
TMSWEBCore Dev Guide
685 pages
MVC 2 - MVC, ASP - NET, A Real Project
No ratings yet
MVC 2 - MVC, ASP - NET, A Real Project
147 pages
Dot Net
No ratings yet
Dot Net
9 pages
2010 - Programming in C# With Visual Studio 2010 Vol 2 (Microsoft)
No ratings yet
2010 - Programming in C# With Visual Studio 2010 Vol 2 (Microsoft)
884 pages
Programming in Oracle With PL/SQL
No ratings yet
Programming in Oracle With PL/SQL
26 pages
ASPNET
No ratings yet
ASPNET
6 pages
ASP Dot Net MVC Syllabus: Loops
No ratings yet
ASP Dot Net MVC Syllabus: Loops
3 pages
Laravel 2023
No ratings yet
Laravel 2023
6 pages
SQL Case Study
No ratings yet
SQL Case Study
3 pages
New .Net Interview Q & A
No ratings yet
New .Net Interview Q & A
275 pages
Instant Razor View Engine How-to
From Everand
Instant Razor View Engine How-to
Abhimanyu Kumar Vatsa
No ratings yet
Cloud Development and Deployment with CloudBees
From Everand
Cloud Development and Deployment with CloudBees
Nicolas De loof
No ratings yet
SOA-Based Enterprise Integration: A Step-by-Step Guide to Services-based Application
From Everand
SOA-Based Enterprise Integration: A Step-by-Step Guide to Services-based Application
Waseem Roshen
No ratings yet
Advanced GitLab CI/CD Pipelines: An In-Depth Guide for Continuous Integration and Deployment
From Everand
Advanced GitLab CI/CD Pipelines: An In-Depth Guide for Continuous Integration and Deployment
Adam Jones
No ratings yet
Alfresco 3 Cookbook
From Everand
Alfresco 3 Cookbook
Snig Bhaumik
No ratings yet
Building Websites with VB.NET and DotNetNuke 4
From Everand
Building Websites with VB.NET and DotNetNuke 4
Daniel N. Egan
1/5 (1)
The Simple Guide to SAS: From Null to Novice
From Everand
The Simple Guide to SAS: From Null to Novice
Kirby Thomas
No ratings yet
ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification Review
From Everand
ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification Review
equitypress
No ratings yet
Ultimate Azure IaaS for Infrastructure Management
From Everand
Ultimate Azure IaaS for Infrastructure Management
Dean Cefola
No ratings yet
Compiere 3
From Everand
Compiere 3
Andries L Pretorius
No ratings yet
MongoDB for Jobseekers: Reach new heights in your career with MongoDB (English Edition)
From Everand
MongoDB for Jobseekers: Reach new heights in your career with MongoDB (English Edition)
Justin Jenkins
No ratings yet
What You'll Learn:: Create The Project
No ratings yet
What You'll Learn:: Create The Project
12 pages
Beginning ASP.NET 4.5: in C# and VB
From Everand
Beginning ASP.NET 4.5: in C# and VB
Imar Spaanjaars
4/5 (4)
ASP.NET.ppt
No ratings yet
ASP.NET.ppt
57 pages
Chapter 4
No ratings yet
Chapter 4
7 pages
Dynamic Site (An Active Server Pages) : Madiha Kiran
No ratings yet
Dynamic Site (An Active Server Pages) : Madiha Kiran
36 pages
Aixperf Part1
No ratings yet
Aixperf Part1
28 pages
Chapter Eleven: Handling Events
No ratings yet
Chapter Eleven: Handling Events
25 pages
SAP Notes 1
100% (14)
SAP Notes 1
22 pages
DWH Draft
No ratings yet
DWH Draft
2 pages
SAP Personas Overview
No ratings yet
SAP Personas Overview
31 pages
Technology and Livelihood Education (Tle) : Learner's Activity Sheet Assessment Checklist
No ratings yet
Technology and Livelihood Education (Tle) : Learner's Activity Sheet Assessment Checklist
9 pages
An 138 Vinculum-II Debug Interface Description
No ratings yet
An 138 Vinculum-II Debug Interface Description
17 pages
What Is Controlling Area and Cost Center?
No ratings yet
What Is Controlling Area and Cost Center?
7 pages
64bitAndroidV8installationInstructionPCT
No ratings yet
64bitAndroidV8installationInstructionPCT
1 page
Voice Based Email System For Visually Impaired
No ratings yet
Voice Based Email System For Visually Impaired
8 pages
SAP On AWS Specialty - Exam
No ratings yet
SAP On AWS Specialty - Exam
18 pages
Operating Systems MCQ Bank For SBI SO (440+)
67% (3)
Operating Systems MCQ Bank For SBI SO (440+)
20 pages
Professional Experience: Quant Intern Barclays
No ratings yet
Professional Experience: Quant Intern Barclays
1 page
Database Management Systems: Instructor: Murali Mani Mmani@cs - Wpi.edu
100% (1)
Database Management Systems: Instructor: Murali Mani Mmani@cs - Wpi.edu
22 pages
Fbn
No ratings yet
Fbn
5 pages
Administration of Veritas Netbackup 8.1.2 and Netbackup Appliances 3.1
No ratings yet
Administration of Veritas Netbackup 8.1.2 and Netbackup Appliances 3.1
6 pages
Documentation For Manual Testing Workflow
No ratings yet
Documentation For Manual Testing Workflow
3 pages
Ece5950 Tut4 Vcs GL
No ratings yet
Ece5950 Tut4 Vcs GL
5 pages
Learn The Basic of MSWord 2013
No ratings yet
Learn The Basic of MSWord 2013
6 pages
Online Collaboration
No ratings yet
Online Collaboration
15 pages
Terraform Syllabus (1)
No ratings yet
Terraform Syllabus (1)
3 pages
Ossec Docs
No ratings yet
Ossec Docs
203 pages
LIST OF Examinations
0% (2)
LIST OF Examinations
5 pages
Bimmercode Quick Start Guide For Unicarscan Ucsi-2000
No ratings yet
Bimmercode Quick Start Guide For Unicarscan Ucsi-2000
5 pages
Nessus Credential Checks
No ratings yet
Nessus Credential Checks
18 pages
Outcomes - Based Teaching and Learning Plan in Geography: Vision Mission Motto Core Values
No ratings yet
Outcomes - Based Teaching and Learning Plan in Geography: Vision Mission Motto Core Values
14 pages
Belkin Manual
No ratings yet
Belkin Manual
64 pages
Siebel Testing - Best Practice: Siebel Has Provided Its Base Functionality (Vanilla Functionality) - For Siebel Testing
No ratings yet
Siebel Testing - Best Practice: Siebel Has Provided Its Base Functionality (Vanilla Functionality) - For Siebel Testing
3 pages