ASP Net

Created by www.ebooktutorials.blogspot.
in
ASP.Net Full
Tutorial
(ASP.Net Web Pages,ASP.Net MVC,ASP.Net Web Forms)
Content Downloaded from www.w3schools.com
Created by www.ebooktutorials.blogspot.in
ASP.NET
Previous
Next Chapter
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, visit our Classic ASP Tutorial.
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
Previous
Next Chapter
ASP.NET Web Pages - Demonstration

Previous
Next Chapter
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.
Previous
Next Chapter
W3Schools.com
ASP.NET Web Pages - WebMatrix

Previous
Next Chapter
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, type default.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>
<title>Web Pages Demo</title>
</head>
<body>
</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
Previous
Next Chapter
ASP.NET Web Pages - Files and Folders

Previous
Next Chapter

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:
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;
}
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 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.
Previous
Next Chapter
ASP.NET Web Pages - Adding Navigation

Previous
Next Chapter

Part III: Adding Navigation.
What We Will Do
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".
_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.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="menu">
<li><a href="/Default">Home</a></li>
<li><a href="/About">About</a></li>
</ul>
<div id="main">
@RenderBody()
</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):
Site.css
h1
{
color: #996600;
}
body
{
color: #696969;
}
#main
{
padding: 30px;
}
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
{
}
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".
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.
Previous
Next Chapter
ASP.NET Web Pages - Databases

Previous
Next Chapter

Part IV: Adding a Database.
What We Will Do
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
Description
Price
Bread
Baked fresh every day
2.99
Strawberry Cake
Made with organic strawberries
9.99
Apple Pie
Second only to your mom's pie
12.99
Pecan Pie
If you like pecans, this is for you
10.99
Lemon Pie
Made with the best lemons in the world
11.99
Cupcakes
Your kids will love these
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
@{
}
<html>
<body>
<table>
<tr>
<th>Id</th>
<th>Product</th>
<th>Price</th>
</tr>
{
<tr>
<td>@row.Id</td>
<td>@row.Name</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>
</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.
Previous
Next Chapter
ASP.NET Web Pages - Adding Registration and Login

Previous
Next Chapter

Part V: Adding Membership registration, and Login.
What We Will Do
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.
_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, the
database itself must always exist.

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".
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".
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>
}
<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.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="menu">
<li><a href="/Default.cshtml">Home</a></li>
<li><a href="/ListProducts">Data</a></li>
<li><a href="/Account/Register">Register</a></li>
<li><a href="/Account/Login">Login</a></li>
</ul>
<div id="main">
@RenderBody()
</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.
Previous
Next Chapter
ASP.NET Web Pages - Security

Previous
Next Chapter

Part VI: Security.
What We Will Do
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
@{
{
}
}
<html>
<body>
<table>
<tr>
<th>Id</th>
<th>Product</th>
<th>Price</th>
</tr>
{
<tr>
<td>@row.Id</td>
<td>@row.Name</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.
Previous
Next Chapter
ASP.NET Web Pages - Tutorial

Previous
Next Chapter
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
Web Forms
ASP.NET Framework
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>
</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
Previous
Next Chapter
ASP.NET Web Pages - Adding Razor Code

Previous
Next Chapter
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>
</head>
<body>
</body>
</html>
Now add some Razor code to the example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</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
Variables are declared with the Dim keyword
VB code is not case sensitive
VB files have the extension .vbhtml
Example
@Code dim myMessage = "Hello World" End Code


@Code
dim greeting = "Welcome to our site!"
dim weekDay = DateTime.Now.DayOfWeek
dim greetingMessage = greeting & " Today is: " & weekDay
End Code
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.
Previous
Next Chapter
ASP.NET Web Pages - Page Layout

Previous
Next Chapter
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")
<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()
</body>
</html>
Any Web Page:

@{Layout="Layout.cshtml";}
<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 = "username@example.com";
WebMail.Password = "your-password";
WebMail.From = "your-name-here@example.com";
}
Previous
Next Chapter
ASP.NET Web Pages - Folders

Previous
Next Chapter
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/html5/html5_intro.asp
The URL corresponds to a physical file on a server: C:\MyWebSites\htm5\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/html5/html5_intro.asp
w3schools
/html5/html5_intro.asp
C:\MyWebSites\w3schools\/html5/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)" />

The Href method is a method of the WebPage Object.
Previous
Next Chapter
ASP.NET Web Pages - Global Pages

Previous
Next Chapter
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.
Previous
Next Chapter
ASP.NET Web Pages - HTML Forms

Previous
Next Chapter
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
{
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>
I want to see:
<select name="Choice">
<option value="Photo1.jpg">Photo 1</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.
Previous
Next Chapter
ASP.NET Web Pages - Objects

Previous
Next Chapter
Web Pages is much often about Objects.
The Page Object

You have already seen some Page Object methods in use:
@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
Description
href
Builds a URL using the specified parameters
RenderBody()
Renders the portion of a content page that is not within a named section (In layout pages)
RenderPage(page)
Renders the content of one page within another page
RenderSection(section)
Renders the content of a named section (In layout pages)
Write(object)
Writes the object as an HTML-encoded string
WriteLitteral
Writes an object without HTML-encoding it first.
Some Page Object Properties

Property
Description
isPost
Returns true if the HTTP data transfer method used by the client is a POST request
Layout
Gets or sets the path of a layout page
Page
Provides property-like access to data shared between pages and layout pages
Request
Gets the HttpRequest object for the current HTTP request
Server
Gets the HttpServerUtility object that provides web-page processing methods
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"
}
<h2>Web Site Main Ingredients</h2>
<p>A Home Page (Default.cshtml)</p>
<p>A Layout File (Layout.cshtml)</p>
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
</head>
<body>
@RenderBody()
</body>
</html
Previous
Next Chapter
ASP.NET Web Pages - Files

Previous
Next Chapter
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).
Previous
Next Chapter
ASP.NET Web Pages - Helpers

Previous
Next Chapter
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)
Previous
Next Chapter
ASP.NET Web Pages - The WebGrid Helper

Previous
Next Chapter
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
@{
}
<html>
<body>
<table>
<tr>
<th>Id</th>
<th>Product</th>
<th>Price</th>
</tr>
{
<tr>
<td>@row.Id</td>
<td>@row.Name</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>
<div id="grid">
@grid.GetHtml()
</div>
</body>
</html>
Run example
Previous
Next Chapter
ASP.NET Web Pages - The Chart Helper

Previous
Next Chapter
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 dbdata = db.Query("SELECT Name, Price FROM Product");
.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 dbdata = db.Query("SELECT Name, Price FROM Product");
.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]);
.AddTitle("Sales Per Employee")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
}
Run example
Previous
Next Chapter
ASP.NET Web Pages - The WebMail Helper

Previous
Next Chapter
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
@{
"Email", true);
}
To initiate the WebMail helper, add the the following WebMail properties to your AppStart page:
_AppStart.cshtml
@{
"Email", true);
WebMail.SmtpServer = "smtp.example.com";
WebMail.SmtpPort = 25;
WebMail.EnableSsl = false;
WebMail.UserName = "support@example.com";
WebMail.Password = "password-goes-here";
WebMail.From = "john@example.com";
}
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:"someone@example.com", 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.
Previous
Next Chapter
ASP.NET Web Pages - PHP

Previous
Next Chapter
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.
Previous
Next Chapter
ASP.NET Web Pages - Publishing the Website

Previous
Next Chapter
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:
C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v4.0\Private
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.
THAT'S IT. GOOD LUCK !
Previous
Next Chapter
ASP.NET Web Pages - Examples in C# and VB

Previous
Next Chapter
Learn ASP.NET Web Pages by C# and Visual Basic examples.
Examples in C#
Examples in VB
Basic Web Pages
Basic Web Pages
Display Date and Time

Reusable Header and Footer
Basic HTML Form
Display Date and Time

Reusable Header and Footer
Basic HTML Form
Examples Explained
Examples Explained
Basic C#
Basic VB
For Loop
For Each Loop
While Loop
Array
For Loop
For Each Loop
While Loop
Array
If Condition
If Else Condition
Else If Condition
Switch Condition
If Condition
If Else Condition
Else If Condition
Select Condition
Examples Explained
Examples Explained
Working with Databases
Working with Databases
Display Database Data

Display Data with WebGrid
Display Database Data

Display Data with WebGrid
Examples Explained
Examples Explained
Using the Chart Helper
Using the Chart Helper
Display
Display
Display
Display
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
Previous
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
Next Chapter
Source:
Output Result:
<html>
<body>
</body>
</html>
Copyright: W3Schools.com
Hello Web Pages

The time is 7/22/2012 6:50:26 AM
Source:
Output Result:
<html>
<body>
@RenderPage("footer.cshtml")
</body>
</html>
This is a header from a separate file
Hello Web Pages

This is a paragraph
This is a footer from a separate file
Source:
Output Result:
<html>
<body>
@{
if (IsPost)
{
string companyname = Request["CompanyName"];
string contactname = Request["ContactName"];
<p>You entered: <br />
}
else
{
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br
/>
Contact Name:<br /><br />
<input type="text" name="ContactName" value="" /><br
/><br />
</form>
}
}
</body>
</html>
Company Name:
Contact Name:
Submit
Source:
Output Result:
<html>
<body>
</body>
</html>
Hello Web Pages

The time is 7/22/2012 6:51:45 AM
Source:
Output Result:
<html>
<body>
@RenderPage("header.vbhtml")
<h1>Hello Razor</h1>
@RenderPage("footer.vbhtml")
</body>
</html>
This is a header from a separate file
Hello Web Pages

This is a paragraph
This is a footer from a separate file
Source:
Output Result:
<html>
<body>
@if (IsPost)
Dim companyname = Request("CompanyName")
Dim contactname = Request("ContactName")
@<p>You entered: <br /><br />
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 />
</form>
end if
Company Name:
Contact Name:
Submit
Source:
Output Result:
<html>
<body>
@for(var i = 10; i < 21; i++)
{
<p>Line @i</p>
}
</body>
</html>
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
Source:
Output Result:
<html>
<body>
<ul>
@foreach (var x in Request.ServerVariables)
{<li>@x</li>}
</ul>
</body>
</html>
ALL_HTTP
ALL_RAW
APPL_MD_PATH
APPL_PHYSICAL_PATH
AUTH_PASSWORD
AUTH_TYPE
AUTH_USER
CERT_COOKIE
CERT_FLAGS
CERT_ISSUER
CERT_KEYSIZE
CERT_SECRETKEYSIZE
CERT_SERIALNUMBER
CERT_SERVER_ISSUER
CERT_SERVER_SUBJECT
CERT_SUBJECT
CONTENT_LENGTH
CONTENT_TYPE
GATEWAY_INTERFACE
HTTPS
HTTPS_KEYSIZE
HTTPS_SECRETKEYSIZE
HTTPS_SERVER_ISSUER
HTTPS_SERVER_SUBJECT
INSTANCE_ID
INSTANCE_META_PATH
LOCAL_ADDR
LOGON_USER
PATH_INFO
PATH_TRANSLATED
QUERY_STRING
REMOTE_ADDR
REMOTE HOST
Source:
Output Result:
<html>
<body>
@{
var i = 0;
while (i < 5)
{
i += 1;
<p>Line @i</p>
}
}
</body>
</html>
Line 1
Line 2
Line 3
Line 4
Line 5
Source:
Output Result:
@{
string[] members = {"Jani", "Hege", "Kai", "Jim"};
int i = Array.IndexOf(members, "Kai")+1;
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>
Members
Jani
Hege
Kai
Jim
The number of names in Members are 4
The person at position 2 is Hege
</body>
</html>
Kai is now in position 3
Source:
Output Result:
@{var price=50;}
<html>
<body>
@if (price>30)
{
<p>The price is too high</p>
}
</body>
</html>
The price is too high.
Source:
Output Result:
@{var price=20;}
<html>
<body>
if (price>30)
{
<p>The price is too high.</p>
}
else
{
<p>The price is OK.</p>
}
</body>
</html>
The price is OK.
Source:
Output Result:
@{var price=25;}
<html>
<body>
if (price>=30)
{
<p>The price is high.</p>
}
elseif(price>20 && price<30)
{
}
else
{
<p>The price is low.</p>
}
</body>
</html>
The price is OK.
Source:
Output Result:
@{
var message="";
var weekday=DateTime.Now.DayOfWeek;
var day=weekday.ToString()
}
<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>
Today is Sunday
Source:
Output Result:
<html>
<body>
@for i=10 to 21
@<p>Line @i</p>
next i
</body>
</html>
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
Source:
Output Result:
<html>
<body>
<ul>
@for each x in Request.ServerVariables
@<li>@x</li>
next x
</ul>
</body>
</html>
ALL_HTTP
ALL_RAW
APPL_MD_PATH
APPL_PHYSICAL_PATH
AUTH_PASSWORD
AUTH_TYPE
AUTH_USER
CERT_COOKIE
CERT_FLAGS
CERT_ISSUER
CERT_KEYSIZE
CERT_SECRETKEYSIZE
CERT_SERIALNUMBER
CERT_SERVER_ISSUER
CERT_SERVER_SUBJECT
CERT_SUBJECT
CONTENT_LENGTH
CONTENT_TYPE
GATEWAY_INTERFACE
HTTPS
HTTPS_KEYSIZE
HTTPS_SECRETKEYSIZE
HTTPS_SERVER_ISSUER
HTTPS_SERVER_SUBJECT
INSTANCE_ID
INSTANCE_META_PATH
LOCAL_ADDR
LOGON_USER
PATH_INFO
PATH_TRANSLATED
QUERY_STRING
REMOTE_ADDR
REMOTE HOST
Source:
Output Result:
<html>
<body>
@Code
Dim i=0
Do While i < 5
i += 1
@<p>Line @i</p>
Loop
End Code
</body>
</html>
Line 1
Line 2
Line 3
Line 4
Line 5
Source:
Output Result:
@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
Members
Jani
Hege
Kai
Jim
The number of names in Members are 4
</body>
</html>
The person at position 2 is Hege

Kai is now in position 3
Source:
Output Result:
@Code
Dim price=50
End Code
<html>
<body>
@If price>30 Then
@<p>The price is too high.</p>
End If
</body>
</html>
The price is too high.
Source:
Output Result:
@Code
Dim price=20
End Code
<html>
<body>
@if price>30 Then
Else
@<p>The price is OK.</p>
End If
</body>
</html>
The price is OK.
Source:
Output Result:
@Code
Dim price=25
End Code
<html>
<body>
@if price>=30 Then
@<p>The price is high.</p>
ElseIfprice>20 And price<30 then
Else
@<p>The price is low.</p>
End If
</body>
</html>
The price is OK.
Source:
Output Result:
@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>
Today is Sunday
Source:
Output Result:
@{
var query = "SELECT * FROM Product";
}
<html>
<body>
<table border="1" width="100%">
<tr>
<th>Id</th>
<th>Product</th>
<th>Price</th>
</tr>
@foreach(var row in db.Query(query))
{
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
</tr>
}
</table>
</body>
</html>
Small Bakery Products

Id
Product
Description
1 Bread
2 Strawberry Cake Made with organic strawberries
3 Apple Pie
4 Pecan Pie
5 Lemon Pie
6 Cupcakes
Price
2.99
9.99
12.99

10.99
Made with the best lemons in the world 11.99
9.99
Source:
Output Result:
@{
var db = Database.Open("SmallBakery") ;
var query = "SELECT * FROM Product ORDER BY Id";
var data = db.Query(query);
var grid = new WebGrid(data);
}
<html>
<head>
<title>Displaying Data Using the WebGrid
Helper</title>
</head>
<body>
<div id="grid">
@grid.GetHtml()
</div>
</body>
</html>

Id
1
3
2
4
5
Name
Description
Price
Bread
2,99
Pecan Pie
12,99
Strawberry Cake Made from organic strawberries
9,99
Lemon Pie
Made with the best lemons in the world 11,99
Cupcakes
Your kids will love yhese
7,99
Source:
Output Result:
@Code
Dim db = Database.Open("SmallBakery")
Dim query = "SELECT * FROM Product"
End Code
<html>
<body>
<tr>
<th>Id</th>
<th>Product</th>
<th>Price</th>
</tr>
@Code
Dim row
for each row in db.Query(query)
End Code
<tr>
<td>@row.Id</td>
<td>@row.Name</td>
</tr>
@Code next End Code
</table>
</body>
</html>

Id
Product
Description
1 Bread
2 Strawberry Cake Made with organic strawberries
3 Apple Pie
4 Pecan Pie
5 Lemon Pie
6 Cupcakes
Price
2.99
9.99
12.99

10.99
Made with the best lemons in the world 11.99
9.99
Source:
Output Result:
@Code
Dim query = "SELECT * FROM Product"
Dim data = db.Query(query)
Dim grid = new WebGrid(data)
End Code
<html>
<head>
<title>Displaying Data Using the WebGrid
Helper</title>
</head>
<body>
<div id="grid">
@grid.GetHtml()
</div>
</body>
</html>

Id
1
3
2
4
5
Name
Description
Price
Bread
2,99
Pecan Pie
12,99
Strawberry Cake Made from organic strawberries
9,99
Lemon Pie
Made with the best lemons in the world 11,99
Cupcakes
Your kids will love yhese
7,99
Source:
Output Result:
@{
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Peter", "Andrew", "Julie",
"Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
}
Source:
Output Result:
@{
var dbdata = db.Query("SELECT Name, Price FROM
Product");
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
}
Source:
Output Result:
@{
var dbdata = db.Query("SELECT Name, Price FROM
Product");
.AddSeries(chartType: "Pie",
xValue: dbdata, xField: "Name",
yValues: dbdata, yFields: "Price")
.Write();
}
Source:
Output Result:
@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]);
.AddTitle("Sales Per Employee")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();
}
Source:
Output Result:
@Code
Dim myChart as new Chart(600,400)
Dim xarr(4)
xarr(0)="Peter"
xarr(1)="Andrew"
xarr(2)="Julie"
xarr(3)="Mary"
xarr(4)="Dave"
Dim yarr(4)
yarr(0)="2"
yarr(1)="6"
yarr(2)="4"
yarr(3)="5"
yarr(4)="3"
myChart.AddTitle("Employees")
myChart.AddSeries("Employees","column",,,,,xarr,,yarr,,
myChart.Write()
End Code
Source:
Output Result:
@Code
Dim dbdata = db.Query("SELECT Name, Price FROM
Product")
Dim myChart = new Chart(600,400)
myChart.AddTitle("Product Sales")
myChart.DataBindTable(dbdata,"Name")
myChart.Write()
End Code
Source:
Output Result:
@Code
Dim dbdata = db.Query("SELECT Name, Price FROM
Product")
myChart.AddTitle("Product Sales")
myChart.AddSeries("Employees","column",,,,,dbdata,"Name
myChart.Write()
End Code
Source:
Output Result:
@Imports System.Data
@Code
Dim dataSet = new DataSet()
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"))
dataSet.ReadXml(Server.MapPath("data.xml"))
Dim dataView = new DataView(dataSet.Tables(0))
myChart.AddTitle("Sales Per Employee")
myChart.AddSeries("Default","Pie",,,,,dataView,"Name",d
myChart.Write()
End Code
ASP.NET Web Pages - Classes

Previous
Next Chapter
ASP.NET Classes Reference

Method
Description
AsBool(), AsBool(true|false)
Converts a string value to a Boolean value (true/false). Returns false or the

specified value if the string does not represent true/false.
AsDateTime(), AsDateTime(value)
Converts a string value to date/time. Returns DateTime. MinValue or the

specified value if the string does not represent a date/time.
AsDecimal(), AsDecimal(value)
Converts a string value to a decimal value. Returns 0.0 or the specified

value if the string does not represent a decimal value.
AsFloat(), AsFloat(value)
Converts a string value to a float. Returns 0.0 or the specified value if the
string does not represent a decimal value.
AsInt(), AsInt(value)
Converts a string value to an integer. Returns 0 or the specified value if the

string does not represent an integer.
Href(path [, param1 [, param2]])
Creates a browser-compatible URL from a local file path, with optional

additional path parts.
Html.Raw(value)
Renders value as HTML markup instead of rendering it as HTML-encoded

output.
IsBool(), IsDateTime(), IsDecimal(), IsFloat(), IsInt()
Returns true if the value can be converted from a string to the specified
type.
IsEmpty()
Returns true if the object or variable has no value.
IsPost
Returns true if the request is a POST. (Initial requests are usually a GET.)
Layout
Specifies the path of a layout page to apply to this page.
PageData[key], PageData[index], 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:
RenderBody()
(Layout pages) Renders the content of a content page that is not in any
named sections.
RenderPage(path, values)
RenderPage(path[, param1 [, param2]])
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).
RenderSection(sectionName [, required = true|false])
(Layout pages) Renders a content section that has a name. Set required to
false to make a section optional.
Request.Cookies[key]
Gets or sets the value of an HTTP cookie.
Request.Files[key]
Gets the files that were uploaded in the current request.
Request.Form[key]
Gets data that was posted in a form (as strings). Request[key] checks both
the Request.Form and the Request.QueryString collections.
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)
Request.Unvalidated().QueryString|Form|Cookies|Headers[key]
Selectively disables request validation 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.
Response.OutputCache(seconds [, sliding] [, varyByParams])
Caches the page output for a specified time. Optionally set sliding to reset
the timeout on each page access and varyByParams to cache different
versions of the page for each different query string in the page request.
Response.Redirect(path)
Redirects the browser request to a new location.
Response.SetStatus(httpStatusCode)
Sets the HTTP status code sent to the browser.
Response.WriteBinary(data [, mimetype])
Writes the contents of data to the response with an optional MIME type.
Response.WriteFile(file)
Writes the contents of a file to the response.
@section(sectionName) { content }
(Layout pages) Defines a content section that has a name.
Server.HtmlDecode(htmlText)
Decodes a string that is HTML encoded.
Server.HtmlEncode(text)
Encodes a string for rendering in HTML markup.
Server.MapPath(virtualPath)
Returns the server physical path for the specified virtual path.
Server.UrlDecode(urlText)
Decodes text from a URL.
Server.UrlEncode(text)
Encodes text to put in a URL.
Session[key]
Gets or sets a value that exists until the user closes the browser.
ToString()
Displays a string representation of the object's value.
UrlData[index]
Gets additional data from the URL (for example, /MyPage/ExtraData).
Previous
Next Chapter
ASP.NET Web Pages - Database Object

Previous
Next Chapter
ASP.NET Database Object Reference

Method
Description
Database.Execute(SQLstatement [, parameters]
Executes SQLstatement (with optional parameters) such as INSERT, DELETE,

or UPDATE and returns a count of affected records.
Database.GetLastInsertId()
Returns the identity column from the most recently inserted row.
Database.Open(filename)
Database.Open(connectionStringName)
Opens either the specified database file or the database specified using a
named connection string from the Web.config file.
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.
Database.QuerySingle(SQLstatement [, parameters])
Executes SQLstatement (with optional parameters) and returns a single

record.
Database.QueryValue(SQLstatement [, parameters])
Executes SQLstatement (with optional parameters) and returns a single

value.
Previous
Next Chapter
ASP.NET Web Pages - WebMail Object

Previous
Next Chapter
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
Description
SmtpServer
The name the SMTP server that will send the emails
SmtpPort
The port the server will use to send SMTP emails
EnableSsl
True, if the server should use SSL encryption
UserName
The name of the SMTP account used to send the email
Password
The password of the SMTP account
From
The email to appear in the from address
WebMail Object Reference - Methods

Method
Description
Send()
Sends an email message to an SMTP server for delivery
The Send() method has the following parameters:

Parameter
Type
Description
to
String
The Email recipients (separated by semicolon)
subject
String
The subject line
body
String
The body of the message
Parameter
Type
Description
from
String
The email of the sender
cc
String
The cc emails (separated by semicolon)
filesToAttach
Collection
Filenames
isBodyHtml
Boolean
True if the email body is in HTML
additionalHeaders
Collection
Additional headers
And the following optional parameters:
Technical Data
Name
Value
Class
System.Web.Helpers.WebMail
Namespace
System.Web.Helpers
Assembly
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.
_AppStart.cshtml
@}
WebMail.SmtpServer = "smtp.example.com";
WebMail.SmtpPort = 25;
WebMail.EnableSsl = false;
WebMail.UserName = "support@example.com";
WebMail.Password = "password";
WebMail.From = "john@example.com"
}
The code above will run each time the web site (application) starts. It feeds your WebMail Object with 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.
support@example.com 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.
Previous
Next Chapter
ASP.NET Web Pages - More Helpers

Previous
Next Chapter
ASP.NET Helpers - Objects References

Analytics Object Reference (Google)
Helper
Description
Analytics.GetGoogleHtml(webPropertyId)
Renders the Google Analytics JavaScript code for the specified ID.
Analytics.GetStatCounterHtml(project, security)
Renders the StatCounter Analytics JavaScript code for the specified project.
Analytics.GetYahooHtml(account)
Renders the Yahoo Analytics JavaScript code for the specified account.
Bing Object Reference

Helper
Description
Bing.SearchBox([boxWidth])
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.
Bing.AdvancedSearchBox([, boxWidth] [, resultWidth] [, resultHeight]

[, themeColor] [, locale])
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.
Chart Object Reference

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

[, axisLabel] [, legend] [, markerStep] [, xValue]
[, xField] [, yValues] [, yFields] [, options])
Adds a series of values to the chart.
Crypto Object Reference

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

Helper
Description
Facebook.LikeButton(href [, buttonLayout] [, showFaces] [, width] [, height]

[, action] [, font] [, colorScheme] [, refLabel])
Lets Facebook users make a connection to pages.
FileUpload Object Reference

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

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

Helper
Description
Gravatar.GetHtml(email [, imageSize] [, defaultImage] [, rating]

[, imageExtension] [, attributes])
Renders the Gravatar image for the specified email address.
Json Object Reference

Helper
Description
Json.Encode(object)
Converts a data object to a string in the JavaScript Object Notation (JSON)

format.
Json.Decode(string)
Converts a JSON-encoded input string to a data object that you can iterate
over or insert into a database.
LinkShare Object Reference

Helper
Description
LinkShare.GetHtml(pageTitle [, pageLinkBack] [, twitterUserName]

[, additionalTweetText] [, linkSites])
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
Description
ObjectInfo.Print(value [, depth] [, enumerationLength])
Renders the properties and values of an object and any child objects.
Recaptcha Object Reference

Helper
Description
Recaptcha.GetHtml([, publicKey] [, theme] [, language] [, tabIndex])
Renders the reCAPTCHA verification test.
ReCaptcha.PublicKey
ReCaptcha.PrivateKey
Sets public and private keys for the reCAPTCHA service. Normally you set
these properties in the _AppStart page.
ReCaptcha.Validate([, privateKey])
Returns the result of the reCAPTCHA test.
ServerInfo.GetHtml()
Renders status information about ASP.NET Web Pages.
Twitter Object Reference

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

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

Helper
Description
WebCache.Get(key)
Returns the object specified by key, or null if the object is not found.
WebCache.Remove(key)
Removes the object specified by key from the cache.
WebCache.Set(key, value [, minutesToCache] [, slidingExpiration])
Puts value into the cache under the name specified by key.
WebGrid Object Reference

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

Helper
Description
WebImage(path)
Loads an image from the specified path.
WebImage.AddImagesWatermark(image)
Adds the specified image as a watermark.
WebImage.AddTextWatermark(text)
Adds the specified text to the image.
WebImage.FlipHorizontal()
WebImage.FlipVertical()
Flips the image horizontally or vertically.
WebImage.GetImageFromRequest()
Loads an image when an image is posted to a page during a file upload.
WebImage.Resize(width, height)
Resizes the image.
WebImage.RotateLeft()
WebImage.RotateRight()
Rotates the image to the left or the right.
WebImage.Save(path [, imageFormat])
Saves the image to the specified path.
Previous
Next Chapter
ASP.NET Web Pages - WebSecurity Object

Previous
Next Chapter
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
Description
CurrentUserId
Gets the ID for the current user
CurrentUserName
Gets the name of the current user
HasUserId
Returns true if the current has a user ID
IsAuthenticated
Returns true if the current user is logged in
WebSecurity Object Reference - Methods

Method
Description
ChangePassword()
Changes the password for a user
ConfirmAccount()
Confirms an account using a confirmation token
CreateAccount()
Creates a new user account
CreateUserAndAccount()
Creates a new user account
GeneratePasswordResetToken()
Generates a token that can be sent to as user by email
GetCreateDate()
Gets the time the specified membership was created
GetPasswordChangeDate()
Gets the date and time when password was changed
GetUserId()
Gets a user ID from a user name
InitializeDatabaseConnection()
Initializes the WebSecurity system (database)
IsConfirmed()
Checks if a user is confirmed
IsCurrentUser()
Checks if the current user matches a user name
Login()
Logs the user in by setting a token in the cookie
Logout()
Logs the user out by removing the token cookie
RequireAuthenticatedUser()
Exits the page if the user is not an authenticated user
RequireRoles()
Exits the page if the user is not a part of the specified roles
RequireUser()
Exits the page if the user is not the specified user
ResetPassword()
Changes a user's password using a token
UserExists()
Checks if a given user exists
Technical Data
Name
Value
Class
WebMatrix.WebData.WebSecurity
Namespace
WebMatrix.WebData
Assembly
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.
_AppStart.cshtml
@{
"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
Email
john@johnson.net
peter@peterson.com
lars@larson.eut
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
12.04.2012
16:12:17
True
NULL
Password
Change
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>
Previous
Next Chapter
WebSecurity Property - CurrentUserId

WebSecurity Object
Definition
The CurrentUserId property is the ID (primary key) for the current user in the WebSecurity
database.
C# and VB Syntax
WebSecurity.CurrentUserId
Examples
Example C#
@{
int value;
value=WebSecurity.CurrentUserId;
}
<p>Current User ID is: @value</p>
Example VB
@Code
Dim value as Integer
value=WebSecurity.CurrentUserId
End Code
<p>Current User ID is: @value</p>
Remarks
The CurrentUserId property is read only. It cannot be changed by code.
The property is used to identify the user in the WebSecurity database, both in the user profile table
and in the membership table.
Errors and Exceptions

The CurrentUserId property returns -1 if there is no current user logged in.
Any access to the WebSecurity object throws an InvalidOperationException if:
The InitializeDatabaseConnection() method has not been called
SimpleMembership is not initialized (or disabled in the website configuration)
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity Property -CurrentUserName

WebSecurity Object
Definition
The CurrentUserName property is the name of the current user in the user profile table in the WebSecurity database.
C# and VB Syntax
WebSecurity.CurrentUserName
Examples
Example C#
@{
string value;
value=WebSecurity.CurrentUserId;
}
<p>Welcome @value</p>
Example VB
@Code
Dim value as String
value=WebSecurity.CurrentUserName
End Code
<p>Welcome @value</p>
Remarks
The CurrentUserName property is read only. It cannot be changed by code.

Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity Property - HasUserId

WebSecurity Object
Definition
The HasUserId property is a boolean value that indicates whether the current user has a user ID in
the WebSecurity database.
The property value is a boolean true if the current user has a user ID. The default is false.
C# and VB Syntax
WebSecurity.HasUserId
Examples
Example C#
@{
bool value;
value=WebSecurity.HasUserId;
}
<p>It is @value that the user has an ID</p>
Example VB
@Code
Dim value as Boolean
value=WebSecurity.HasUserId
End Code
<p>It is @value that the user has an ID</p>
Remarks
The HasUserID property is read only. It cannot be changed by code.
The HasUserId property only verifies that the user has an ID in the WebSecurity database. It does
not verify that the user account is valid (confirmed), or that the user is logged in.
Use the IsConfirmed() method to verify that the user is confirmed.
Use IsAuthenticated property to verify that the user is logged in.

Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity Property - IsAuthenticated

WebSecurity Object
Definition
The IsAuthenticated property is a boolean value that indicates whether the current user is
authenticated (logged in).
The property value is a boolean true if the current user is authenticated, otherwise false.
C# and VB Syntax
WebSecurity.IsAuthenticated
Examples
Example C#
{
}
Example VB
if !WebSecurity.IsAuthenticated then
Response.Redirect("~/Account/Login")
end if
Remarks
The IsAuthenticated property is read only. It cannot be changed by code.

Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - ChangePassword()
WebSecurity Object
Definition
The ChangePassword() method changes the password for a specified user.
Syntax in C# and VB
WebSecurity.ChangePassword(userName, oldPassword, newPassword)
Parameters
Parameter
Type
Description
userName
String
The user name
oldPassword
String
The user's old password
newPassword
String
The new password
Return Value
Type
Description
Boolean
true if the password is changed, otherwise false

Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - ConfirmAccount()
WebSecurity Object
Definition
The ConfirmAccount() method confirms and activates an account using a confirmation token.
C# and VB Syntax
WebSecurity.ConfirmAccount(accountConfirmationToken)
Examples
Example C#
string message = "";
var confirmationToken = Request["confirmationCode"];
WebSecurity.Logout();
if (!confirmationToken.IsEmpty())
{
if (WebSecurity.ConfirmAccount(confirmationToken))
{
message = "Registration confirmed";
}
else
{
message = "Could not confirm your registration";
}
}
Example VB
message = ""
confirmationToken = Request("confirmationCode")
WebSecurity.Logout()
if !confirmationToken.IsEmpty() then
if WebSecurity.ConfirmAccount(confirmationToken) then
message = "Registration Confirmed"
else
message = "Could not confirm your registration"
end if
end if
Parameters
Parameter
Type
accountConfirmationToken String
Description
The confirmation tokene
Return Value
Type
Description
Boolean
true if the account is confirmed, otherwise false.

Remarks
A confirmation token can be created by the CreateAccount(), CreateUserAndAccount(), or
GeneratePasswordResetToken() methods.
Common procedure is to send the token to a user in an email, and ask the user to verify the identity
(via a link to a confirmation page).
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - CreateAccount()
WebSecurity Object
Definition
The CreateAccount() method creates a new account in the user database, using user name and
password, and optionally lets you specify if the user must explicitly confirm the account.
C# and VB Syntax
WebSecurity.CreateAccount(username, password, requireConfirmation)
Parameters
Parameter
Type
Description
userName
String
The user name
password
String
The user password
requireConfirmation
Boolean
true if the account must be confirmed using the token

return value, default is false.
Return Value
Type
Description
String
A token that can be sent to the user to confirm the account.

The CreateAccount() method also throws a MembershipCreateUserException if:
The
The
The
The
The
username is empty
username already has a membership account
password is empty
password is too long
database operation failed
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - CreateUserAndAccount()
WebSecurity Object
Definition
The CreateUserAndAccount() method creates a new account in the user database, using user name
and password, and optionally lets you specify if the user must explicitly confirm the account.
C# and VB Syntax
WebSecurity.CreateUserAndAccount(username, password, propertyValues,
requireConfirmation)
Parameters
Parameter
Type
Description
userName
String
The user name
password
String
The user password
propertyValues
Object
A dictionary that contains additional user attributes
requireConfirmation
Boolean
true if the account must be confirmed using the token

return value, default is false.
Return Value
Type
Description
String
A token that can be sent to the user to confirm the account.
Remarks
The CreateUserAndAccount() method creates a new entry in the user profile table and then a
corresponding entry in the membership table in the WebSecurity database.
You can pass true for requireConfirmationToken parameter to require that the user account must
be confirmed by the user. To confirm the account, you get the token as the return value from the
CreateUserAndAccount() method.
If you are manually maintaining the user profile table and only want to create a membership table
entry for the user, call the CreateAccount() method instead.

The CreateUserAndAccount() method also throws a MembershipCreateUserException if:
The
The
The
The
The
username is empty
username already has a membership account
password is empty
password is too long
database operation failed
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - GeneratePasswordResetToken()
WebSecurity Object
Definition
The GeneratePasswordResetToken() method generates a password reset token that can be sent to
a user in email.
C# and VB Syntax
WebSecurity.GeneratePasswordResetToken(userName, expiration)
Parameters
Parameter
Type
Description
userName
String
The user name
expiration
Integer
The time in minutes until the token expires. Default is 1440

(24 hours)
Return Value
Type
Description
String
A reset token.

Remarks
Use the ResetPassword() method if the user has forgotten his password. The ResetPassword()
method requires a password reset token.
A confirmation token can be created by the CreateAccount(), CreateUserAndAccount(), or
GeneratePasswordResetToken() methods.
The password can be reset by code, but the common procedure is to send an email to the user (with
the token and a link to a page) so he can confirm the new password with the new token:
@{
newPassword = Request["newPassword"];
confirmPassword = Request["confirmPassword"];
token = Request["token"];
if isPost
{
// input testing is ommitted here to save space
retunValue = ResetPassword(token, newPassword);
}
}
<h1>Change Password</h1>
<label for="newPassword">New Password:</label>
<input type="password" id="newPassword" name="newPassword" title="New
password" />
<label for="confirmPassword">Confirm Password:</label>
title="Confirm new password" />
<label for="token">Pasword Token:</label>
<input type="text" id="token" name="token" title="Password Token" />
<p class="form-actions">
<input type="submit" value="Change Password" title="Change password" />
</p>
</form>
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - GetCreateDate()
WebSecurity Object
Definition and Use

The GetCreateDate() method returns the date and time when the specified membership account was created.
C# and VB Syntax
WebSecurity.GetCreateDate(userName)
Parameters
Parameter
Type
Description
userName
String
The user name
Return Value
Type
Description
DateTime
The date and time the membership account was created

If the account creation date is not available, the GetCreatedDate() method returns DateTime.MinValue.
The value of DateTime.MinValue is 00:00:00.0000000, January 1, 0001.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - GetPasswordChangeDate()
WebSecurity Object
Definition
The GetPasswordChangeDate() method returns the date and time a user's password was last
changed.
C# and VB Syntax
WebSecurity.GetPasswordChangedDate(userName)
Parameters
Parameter
Type
Description
userName
String
The user name
Return Value
Type
Description
DateTime
The date and time the password was last changed

Remarks
If the password has never been changed, the GetPasswordChangeDate() method returns
DateTime.MinValue.
The value of DateTime.MinValue is 00:00:00.0000000, January 1, 0001.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - GetUserId()
WebSecurity Object
Definition
The GetUserId() method returns the ID for the specified user.
C# and VB Syntax
WebSecurity.GetUserId(userName)
Parameters
Parameter
Type
Description
userName
String
The user name
Return Value
Type
Description
Integer
The user ID

Remarks
The user ID is the primary key for the user information stored in the user database.
It is used to identify the user, both in the user profile table and in the membership table.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - InitializeDatabaseConnection()
WebSecurity Object
Definition
The InitializeDatabaseConnection() method initializes the WebSecurity database.
The method initializes the WebSecurity system by connecting to the database that contains user and
membership information.
C# and VB Syntax
WebSecurity.InitializeDatabaseConnection(connectionString, userTableName,
userIdColumn, userNameColumn, autoCreateTables)
Parameters
Parameter
Type
Description
connectionString
String
The name of your WebSecurity database (se remarks)
userTableName
String
The database table that contains the user profile

information
userIdColumn
String
The database column that contains the user IDs (primary

keys)
userNameColumn
String
The database column that contains the user names
autoCreateTables
Boolean
true indicates that user profile and membership tables

should be created if they do not exist, otherwise false
Return Value
None.
Remarks
If you are using SQL Server Compact, connectionString should be the name of the WebSecurity
database (without the .sdf file name extension). Otherwise it should be the name of a connection string
in the web configuration (web.config file).
Even if autoCreateTables can force the database tables to be created automatically, the
database itself must always exist.

The InitializeDatabaseConnection() method throws an InvalidOperationException if:
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - IsConfirmed()
WebSecurity Object
Definition
The IsConfirmed() method returns a value that indicates whether the specified user has been
confirmed.
C# and VB Syntax
WebSecurity.IsConfirmed(userName);
Parameters
Parameter
Type
Description
userName
String
The user name
Return Value
Type
Description
Boolean
true if the user is confirmed, otherwise false

Remarks
The IsConfirmed() method checks the user account identified by the userName parameter.
If the membership has been confirmed (the user has confirmed the account by clicking an email link),
the method returns true.
If a registration has not been confirmed, the user cannot log in.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - Login()
WebSecurity Object
Definition
The Login() method logs in a specified user, using a username and a password.
C# and VB Syntax
WebSecurity.Login(userName, password, persistCookie)
Examples
Example C#
if (WebSecurity.Login(username,password))
{
<p>Welcome</p>
}
else
{
<p>Incorrect username or password.</p>
}
Example VB
if WebSecurity.Login(username,password)
<p>Welcome</p>
else
<p>Incorrect username or password</p>
end if
Parameters
Parameter
Type
Description
userName
String
The user name
password
String
The user password
persistCookie
String
true to specify that the authentication token in the cookie

should be persisted beyond the current session; otherwise
false. Default is false.
Return Value
Type
Description
Boolean
true if the user is logged in, otherwise false
Remarks
When a user is logged in, ASP.NET sets an authentication token in a cookie that lets ASP.NET know on
subsequent requests that the user has been logged in. If persistCookie is false, the token is valid
only until the user closes the browser.

Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - Logout()
WebSecurity Object
Definition
The Logout() method logs out the current user.
C# and VB Syntax
Logout()
Examples
Example C#
// Log out the current user
WebSecurity.Logout();
// Redirect back to the homepage
Response.Redirect("~/");
Example VB
' Log out the current user
WebSecurity.Logout()
' Redirect back to the homepage
Response.Redirect("~/")
Parameters
None.
Return Value
None.

Remarks
When a user is logged in, ASP.NET sets an authentication token in a cookie that lets ASP.NET know on subsequent requests that the user has been logged
in.
The Logout() method removes the authentication token, which has the effect of logging the user out.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - RequireAuthenticatedUser()
WebSecurity Object
Definition
The RequireAuthenticatedUser() method sets the HTTP status to 401 (Unauthorized) if the current
user is not authenticated.
C# and VB Syntax
WebSecurity.RequireAuthenticatedUser()
Parameters
None.
Return Value
None.

Remarks
RequireAuthenticatedUser() only validates if the current user is authenticated. If the current user is
not authenticated, the HTTP status is set to 401 (Unauthorized).
To validate if the current user is a specific user (by ID or by name), use the RequireUser() method.
To validate that a user is a member of a role (roles), use the RequireRoles() method.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - RequireRoles()
WebSecurity Object
Definition
The RequireRoles() method sets the HTTP status to 401 (Unauthorized) if the current user is not in
all of the specified roles.
C# and VB Syntax
WebSecurity.RequireRoles(roles)
Examples
Example C#
WebSecurity.RequireRoles("Admin", "Poweruser");
Example VB
WebSecurity.RequireRoles("Admin", "Poweruser")
Parameters
Parameter
Type
Description
roles
String
A comma separated list of roles the current user must be in.
Return Value
None.

Remarks
RequireRoles() validates that the current user is a member of all of the specified roles. If the user is
not a member of all of the specified roles, the HTTP status is set to 401 (Unauthorized).
To validate that the user is authenticated, use the RequireAuthenticatedUser() method.
To validate that the current user is a specific user, use the RequireUser() method.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - RequireUser()
WebSecurity Object
Definition
The RequireUser() method sets the HTTP status to 401 (Unauthorized) if the specified user is not
logged on.
C# and VB Syntax
WebSecurity.RequireUser(userId)
or
WebSecurity.RequireUser(userName)
Parameters
Parameter
Type
Description
userID
Integer
The user ID
userName
String
The user name
Return Value
None.

Remarks
RequireUser() verifies that the current user is the specified user.
To validate that the user is authenticated, use RequireAuthenticatedUser() instead.
To validate that a user is a member of a role (roles), use RequireRoles().
RequireUser() lets only the specified user access the web page. The recommended way to restrict
access to a page is to create a role, and use the RequireRoles() method to verify that the user is a
member of that role.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - ResetPassword()
WebSecurity Object
Definition
The ResetPassword() method resets a user password using a password token.
C# and VB Syntax
WebSecurity.ResetPassword(passwordResetToken,newPassword)
Parameters
Parameter
Type
Description
passwordResetToken
String
The password token
newpassword
String
The new password
Return Value
Type
Description
Boolean
true if the password was changed, otherwise false

Remarks
Use the ResetPassword method if the user has forgotten his password.
The ResetPassword method requires a password reset token.
A confirmation token can be created by the CreateAccount(), CreateUserAndAccount(), or GeneratePasswordResetToken() methods.
The password can be reset by code, but the common procedure is to send an email to the user (with the token and a link to a page) so he can confirm the
new password with the new token:
@{
newPassword = Request["newPassword"];
confirmPassword = Request["confirmPassword"];
token = Request["token"];
if isPost
{
// input testing is ommitted here to save space
retunValue = ResetPassword(token, newPassword);
}
}
<h1>Change Password</h1>
<label for="newPassword">New Password:</label>
<input type="password" id="newPassword" name="newPassword" title="New
password" />
<label for="confirmPassword">Confirm Password:</label>
title="Confirm new password" />
<label for="token">Pasword Token:</label>
<input type="text" id="token" name="token" title="Password Token" />
<p class="form-actions">
<input type="submit" value="Change Password" title="Change password" />
</p>
</form>
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
WebSecurity - UserExists()
WebSecurity Object
Definition
The UserExists() method indicates if the user exists in the WebSecurity database.
C# and VB Syntax
WebSecurity.UserExists(userName)
Parameters
Parameter
Type
Description
userName
String
The user name
Return Value
Type
Description
Boolean
true if the user exists, otherwise false

Remarks
The UserExists() method only verifies that the user exists in the user profile table.
It does not verify that a membership account exists for that user, or that the user is confirmed, or
logged in.
Technical Data
Name
Value
Namespace
WebMatrix.WebData
Assembly
WebSecurity Object
ASP.NET Razor - Markup

Previous
Next Chapter
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:
<ul>
<?php
for ($i = 0; $i < 10; $i++) {
echo("<li>$i</li>");
}
?>
</ul>
Web Forms (and Classic ASP):
<ul>
<% for (int i = 0; i < 10; i++) { %>
<li><% =i %></li>
<% } %>
</ul>
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).
Previous
Next Chapter
ASP.NET Razor - C# and VB Code Syntax

Previous
Next Chapter
Razor supports both C# (C sharp) and VB (Visual Basic).
Main Razor Syntax Rules for C#

Razor code blocks are enclosed in @{ ... }
Code statements end with semicolon
Variables are declared with the var keyword
C# code is case sensitive
C# files have the extension .cshtml
C# Example
@{ var myMessage = "Hello World"; }
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Today is: " + weekDay;
}
Run example
Main Razor Syntax Rules for VB

Razor code blocks are enclosed in @Code ... End Code
Variables are declared with the Dim keyword
VB code is not case sensitive
VB files have the extension .vbhtml
Example
@Code dim myMessage = "Hello World" End Code


@Code
dim greeting = "Welcome to our site!"
dim weekDay = DateTime.Now.DayOfWeek
dim greetingMessage = greeting & " Today is: " & weekDay
End Code
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).
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 Data.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
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
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>
</form>
<p>@totalMessage</p>
</body>
</html>
Run example
Previous
Next Chapter
ASP.NET Razor - C# Variables

Previous
Next Chapter
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
Description
Examples
int
Integer (whole numbers)
103, 12, 5168
float
Floating-point number
3.14,3.4e38
decimal
Decimal number (higher precision)
1037.196543
bool
Boolean
true, false
string
String
"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 ofcommon operators:
Operator
Description
Example
Assigns a value to a variable.
i=6
+
*
/
Adds a value or variable.

Subtracts a value or variable.
Multiplies a value or variable.
Divides a value or variable.
i=5+5
i=5-5
i=5*5
i=5/5
+=
-=
Increments a variable.
Decrements a variable.
i += 1
i -= 1
==
Equality. Returns true if values are equal.
if (i==10)
!=
Inequality. Returns true if values are not equal.
if (i!=10)
<
>
<=
>=
Less than.
Greater than.
Less than or equal.
Greater than or equal.
if
if
if
if
(i<10)
(i>10)
(i<=10)
(i>=10)
Adding strings (concatenation).
"w3" + "schools"
Dot. Separate objects and methods.
DateTime.Hour
()
Parenthesis. Groups values.
(i+5)
()
Parenthesis. Passes parameters.
x=Add(i,5)
[]
Brackets. Accesses values in arrays or collections.
name[3]
Not. Reverses true or false.
if (!ready)
&&
||
Logical AND.
Logical OR.
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 ofcommon conversion methods:
Method
Description
Example
AsInt()
IsInt()
Converts a string to an integer.
if (myString.IsInt())
{myInt=myString.AsInt();}
AsFloat()
IsFloat()
Converts a string to a floating-point number.
if (myString.IsFloat())
{myFloat=myString.AsFloat();}
AsDecimal()
IsDecimal()
Converts a string to a decimal number.
if (myString.IsDecimal())
{myDec=myString.AsDecimal();}
AsDateTime()
IsDateTime()
Converts a string to an ASP.NET DateTime type.
myString="10/10/2012";
myDate=myString.AsDateTime();
AsBool()
IsBool()
Converts a string to a Boolean.
myString="True";
myBool=myString.AsBool();
ToString()
Converts any data type to a string.
myInt=1234;
myString=myInt.ToString();
Previous
Next Chapter
ASP.NET Razor - C# Loops and Arrays

Previous
Next Chapter
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>
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;
int len = members.Length;
string x = members[2-1];
}
<html>
<body>
<h3>Members</h3>
@foreach (var person in members)
{
<p>@person</p>
}
</body>
</html>
Run example
Previous
Next Chapter
ASP.NET Razor - C# Logic Conditions

Previous
Next Chapter
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)
{
}
</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)
{
}
else
{
}
</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.
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.
Previous
Next Chapter
ASP.NET Razor - VB Variables

Previous
Next Chapter
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
Description
Examples
integer
Integer (whole numbers)
103, 12, 5168
double
64 bit floating-point number
3.14,3.4e38
decimal
Decimal number (higher precision)
1037.196543
boolean
Boolean
true, false
string
String
"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
Example
Assigns a value to a variable.
i=6
+
*
/
Adds a value or variable.

Subtracts a value or variable.
Multiplies a value or variable.
Divides a value or variable.
i=5+5
i=5-5
i=5*5
i=5/5
+=
-=
Increments a variable.
Decrements a variable.
i += 1
i -= 1
Equality. Returns true if values are equal.
if i=10
<>
Inequality. Returns true if values are not equal.
if <>10
<
>
<=
>=
Less than.
Greater than.
Less than or equal.
Greater than or equal.
if
if
if
if
&
Adding strings (concatenation).
"w3" & "schools"
Dot. Separate objects and methods.
DateTime.Hour
()
Parenthesis. Groups values.
(i+5)
()
Parenthesis. Passes parameters.
x=Add(i,5)
()
Parenthesis. Accesses values in arrays or collections.
name(3)
Not
Not. Reverses true or false.
if Not ready
And
OR
Logical AND.
Logical OR.
if ready And clear

if ready Or clear
AndAlso
orElse
Extended Logical AND.

Extended Logical OR.
if ready AndAlso clear

if ready OrElse clear
i<10
i>10
i<=10
i>=10
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
Decryptions
Example
AsInt()
IsInt()
Converts a string to an integer.
if myString.IsInt() then
myInt=myString.AsInt()
end if
AsFloat()
IsFloat()
Converts a string to a floating-point number.
if myString.IsFloat() then
myFloat=myString.AsFloat()
end if
AsDecimal()
IsDecimal()
Converts a string to a decimal number.
if myString.IsDecimal() then
myDec=myString.AsDecimal()
end if
AsDateTime()
IsDateTime()
Converts a string to an ASP.NET DateTime type.
myString="10/10/2012"
myDate=myString.AsDateTime()
AsBool()
IsBool()
Converts a string to a Boolean.
myString="True"
myBool=myString.AsBool()
ToString()
Converts any data type to a string.
myInt=1234
myString=myInt.ToString()
Previous
Next Chapter
ASP.NET Razor - VB Loops and Arrays

Previous
Next Chapter
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 i=10 To 21
@<p>Line #@i</p>
Next i
</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>
@For Each x In Request.ServerVariables
@<li>@x</li>
Next x
</ul>
</body>
</html>
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>
@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
@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
</body>
</html>
Run example
Previous
Next Chapter
ASP.NET Razor - VB Logic Conditions

Previous
Next Chapter
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
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
<html>
<body>
@if price>30 then
Else
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
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".
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.
Previous
Next Chapter
ASP.NET MVC Tutorial

Previous
Next Chapter
ASP.NET supports three different development models:
THIS TUTORIAL COVERS MVC
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.
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.
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#)
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.
Previous
Next Chapter
ASP.NET MVC - Internet Application

Previous
Next Chapter
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.
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:
We will explore the content of the files and folders in the next chapter of this tutorial.
Previous
Next Chapter
ASP.NET MVC - Application Folders

Previous
Next Chapter
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:
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".
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).
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:
Note: The files named "modernizr" are JavaScript files used for supporting HTML5 and CSS3 features in the application.
Previous
Next Chapter
ASP.NET MVC - Styles and Layout

Previous
Next Chapter
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>
<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")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
type="text/javascript"></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>
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
{
color: #696969;
}
h1
{
color: #996600;
}
#main
{
padding: 20px;
}
a
{
color: #034af3;
}
/* Menu Styles ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
padding: 10px 20px;
line-height: 2.8em;
/*CSS3 properties*/
}
ul#menu li a:hover
{
}
/* 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;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
padding:3px;
}
table.data td
{
padding:3px;
}
The _View_Start File

The _View_Start 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.
Previous
Next Chapter
ASP.NET MVC - Controllers

Previous
Next Chapter

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.
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.
Previous
Next Chapter
ASP.NET MVC - Views

Previous
Next Chapter

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).
ASP.NET File Types

The following HTML file types can be found in the Views Folder:
File Type
Extention
Plain HTML
.htm or .html
Classic ASP
.asp
Classic ASP.NET
.aspx
ASP.NET Razor C#
.cshtml
ASP.NET Razor VB
.vbhtml
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";}

<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:
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.
Previous
Next Chapter
ASP.NET MVC - SQL Database

Previous
Next Chapter

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
Type
Allow Nulls
ID
int (primary key)
No
Title
nvarchar(100)
No
Director
nvarchar(100)
No
Date
datetime
No
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 the Column Properties window, set the Identity property to True:
When you have finished creating the table columns, save the table and name it MovieDBs.
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
Title
Director
Date
Psycho
Alfred Hitchcock
01.01.1960
La Dolce Vita
Federico Fellini
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"/>
Previous
Next Chapter
ASP.NET MVC - Models

Previous
Next Chapter

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:
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:
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Data.Entity;
namespace MvcDemo.Models
{
public class MovieDB
{
public int ID { get; set; }
public string Title { get; set; }
public string Director { get; set; }
public 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
Congratulations
Congratulations. You have added your first MVC data model to your application.
Now you can click on the "Movies" tab :-)
Previous
Next Chapter
ASP.NET MVC - Security

Previous
Next Chapter

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")]
public string OldPassword { get; set; }
[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2}
characters long.", MinimumLength = 6)]
[Display(Name = "New password")]
public string NewPassword { get; set; }
[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]
[Display(Name = "Password")]
public string Password { get; set; }
[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }
}
The Register Model

public class RegisterModel
{
[Required]
[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)]
[Display(Name = "Password")]
public string Password { get; set; }
[Display(Name = "Confirm password")]
[Compare("Password", ErrorMessage = "The password and confirmation password
do not match.")]
public string ConfirmPassword { get; set; }
}
Previous
Next Chapter
ASP.NET MVC - HTML Helpers

Previous
Next Chapter
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>

The Html.ActionLink() helper as several properties:
Property
Description
.linkText
The link text (label)
.actionName
The target action
.routeValues
The values passed to the action
.controllerName
The target controller
.htmlAttributes
The set of attributes to the link
.protocol
The link protocol
.hostname
The host name for the link
.fragment
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()
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>
<%}%>
Previous
Next Chapter
ASP.NET MVC - Publishing the Website

Previous
Next Chapter
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

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 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
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:
C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v4.0\Private
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.
THAT'S IT. GOOD LUCK !
Previous
Next Chapter
ASP.NET MVC - Reference

Previous
Next Chapter
Classes
Class
Description
AcceptVerbsAttribute
Represents an attribute that specifies which HTTP verbs an

action method will respond to.
ActionDescriptor
Provides information about an action method, such as its

name, controller, parameters, attributes, and filters.
ActionExecutedContext
Provides the context for the ActionExecuted method of the

ActionFilterAttribute class.
ActionExecutingContext
Provides the context for the ActionExecuting method of the

ActionFilterAttribute
Represents the base class for filter attributes.
ActionMethodSelectorAttribute
Represents an attribute that is used to influence the selection

of an action method.
ActionNameAttribute
Represents an attribute that is used for the name of an

action.
ActionNameSelectorAttribute
Represents an attribute that affects the selection of an action

method.
ActionResult
Encapsulates the result of an action method and is used to

perform a framework-level operation on behalf of the action
method.
AdditionalMetadataAttribute
Provides a class that implements the IMetadataAware

interface in order to support additional metadata.
AjaxHelper
Represents support for rendering HTML in AJAX scenarios

within a view.
AjaxHelper(Of TModel)
Represents support for rendering HTML in AJAX scenarios

within a strongly typed view.
AjaxRequestExtensions
Represents a class that extends the HttpRequestBase class

by adding the ability to determine whether an HTTP request
is 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.)
AreaRegistration
Provides a way to register one or more areas in an ASP.NET

MVC application.
AreaRegistrationContext
Encapsulates the information that is required in order to

register an area within an ASP.NET MVC application.
AssociatedMetadataProvider
Provides an abstract class to implement a metadata provider.
AssociatedValidatorProvider
Provides an abstract class for classes that implement a

validation provider.
AsyncController
Provides the base class for asynchronous controllers.
AsyncTimeoutAttribute
Represents an attribute that is used to set the timeout value,

in milliseconds, for an asynchronous method.
AuthorizationContext
Encapsulates the information that is required for using an

AuthorizeAttribute attribute.
AuthorizeAttribute
Represents an attribute that is used to restrict access by

callers to an action method.
BindAttribute
Represents an attribute that is used to provide details about

how model binding to a parameter should occur.
BuildManagerCompiledView
Represents the base class for views that are compiled by the
BuildManager class before being rendered by a view engine.
BuildManagerViewEngine
Provides a base class for view engines.
ByteArrayModelBinder
Maps a browser request to a byte array.
ChildActionOnlyAttribute
Represents an attribute that is used to indicate that an action

method should be called only as a child action.
ChildActionValueProvider
Represents a value provider for values from child actions.
ChildActionValueProviderFactory
Represents a factory for creating value provider objects for

child actions.
ClientDataTypeModelValidatorProvider
Returns the client data-type model validators.
CompareAttribute
Provides an attribute that compares two properties of a

model.
ContentResult
Represents a user-defined content type that is the result of

an action method.
Controller
Provides methods that respond to HTTP requests that are

made to an ASP.NET MVC Web site.
ControllerActionInvoker
Represents a class that is responsible for invoking the action
methods of a controller.
ControllerBase
Represents the base class for all MVC controllers.
ControllerBuilder
Represents a class that is responsible for dynamically

building a controller.
ControllerContext
Encapsulates information about an HTTP request that

matches specified RouteBase and ControllerBase instances.
ControllerDescriptor
Encapsulates information that describes a controller, such as

its name, type, and actions.
ControllerInstanceFilterProvider
Adds the controller to the FilterProviderCollection instance.
CustomModelBinderAttribute
Represents an attribute that invokes a custom model binder.
DataAnnotationsModelMetadata
Provides a container for common metadata, for the

DataAnnotationsModelMetadataProvider class, and for the
DataAnnotationsModelValidator class for a data model.
DataAnnotationsModelMetadataProvider Implements the default model metadata provider for

ASP.NET MVC.
DataAnnotationsModelValidator
Provides a model validator.
DataAnnotationsModelValidator(Of
TAttribute)
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

validator.
DefaultControllerFactory
Represents the controller factory that is registered by

default.
DefaultModelBinder
Maps a browser request to a data object. This class provides

a concrete implementation of a model binder.
DefaultViewLocationCache
Represents a memory cache for view locations.
DependencyResolver
Provides a registration point for dependency resolvers that

implement IDependencyResolver or the Common Service
Locator IServiceLocator interface.
DependencyResolverExtensions
Provides a type-safe implementation of GetService and

GetServices.
DictionaryValueProvider(Of TValue)
Represents the base class for value providers whose values

come from a collection that implements the IDictionary(Of
TKey, TValue) interface.
EmptyModelMetadataProvider
Provides an empty metadata provider for data models that

do not require metadata.
EmptyModelValidatorProvider
Provides an empty validation provider for models that do not

require a validator.
EmptyResult
Represents a result that does nothing, such as a controller

action method that returns nothing.
ExceptionContext
Provides the context for using the HandleErrorAttribute class.
ExpressionHelper
Provides a helper class to get the model name from an

expression.
FieldValidationMetadata
Provides a container for client-side field validation metadata.
FileContentResult
Sends the contents of a binary file to the response.
FilePathResult
Sends the contents of a file to the response.
FileResult
Represents a base class that is used to send binary file

content to the response.
FileStreamResult
Sends binary content to the response by using a Stream

instance.
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.
FilterAttribute
Represents the base class for action and result filter

attributes.
FilterAttributeFilterProvider
Defines a filter provider for filter attributes.
FilterInfo
Encapsulates information about the available action filters.
FilterProviderCollection
Represents the collection of filter providers for the

application.
FilterProviders
Provides a registration point for filters.
FormCollection
Contains the form value providers for the application.
FormContext
Encapsulates information that is required in order to validate

and process the input data from an HTML form.
FormValueProvider
Represents a value provider for form values that are

contained in a NameValueCollection object.
FormValueProviderFactory
Represents a class that is responsible for creating a new

instance of a form-value provider object.
GlobalFilterCollection
Represents a class that contains all the global filters.
GlobalFilters
Represents the global filter collection.
HandleErrorAttribute
Represents an attribute that is used to handle an exception

that is thrown by an action method.
HandleErrorInfo
Encapsulates information for handling an error that was

thrown by an action method.
HiddenInputAttribute
Represents an attribute that is used to indicate whether a

property or field value should be rendered as a hidden input
element.
HtmlHelper
Represents support for rendering HTML controls in a view.
HtmlHelper(Of TModel)
Represents support for rendering HTML controls in a strongly

typed view.
HttpDeleteAttribute
Represents an attribute that is used to restrict an action

method so that the method handles only HTTP DELETE
requests.
HttpFileCollectionValueProvider
Represents a value provider to use with values that come

from a collection of HTTP files.
HttpFileCollectionValueProviderFactory

instance of an HTTP file collection value provider object.
HttpGetAttribute

method so that the method handles only HTTP GET requests.
HttpNotFoundResult
Defines an object that is used to indicate that the requested

resource was not found.
HttpPostAttribute

method so that the method handles only HTTP POST
requests.
HttpPostedFileBaseModelBinder
Binds a model to a posted file.
HttpPutAttribute

method so that the method handles only HTTP PUT requests.
HttpRequestExtensions
Extends the HttpRequestBase class that contains the HTTP

values that were sent by a client during a Web request.
HttpStatusCodeResult
Provides a way to return an action result with a specific HTTP

response status code and description.
HttpUnauthorizedResult
Represents the result of an unauthorized HTTP request.
JavaScriptResult
Sends JavaScript content to the response.
JsonResult
Represents a class that is used to send JSON-formatted

content to the response.
JsonValueProviderFactory
Enables action methods to send and receive JSON-formatted

text and to model-bind the JSON text to parameters of
action methods.
LinqBinaryModelBinder
Maps a browser request to a LINQ Binary object.
ModelBinderAttribute
Represents an attribute that is used to associate a model

type to a model-builder type.
ModelBinderDictionary
Represents a class that contains all model binders for the

application, listed by binder type.
ModelBinderProviderCollection
Provides a container for model binder providers.
ModelBinderProviders
Provides a container for model binder providers.
ModelBinders
Provides global access to the model binders for the

application.
ModelBindingContext
Provides the context in which a model binder functions.
ModelClientValidationEqualToRule
Provides a container for an equality validation rule that is

sent to the browser.
ModelClientValidationRangeRule
Provides a container for a range-validation rule that is sent

to the browser.
ModelClientValidationRegexRule
Provides a container for a regular-expression client validation

rule that is sent to the browser.
ModelClientValidationRemoteRule
Provides a container for a remote validation rule that is sent

to the browser.
ModelClientValidationRequiredRule
Provides a container for client validation for required field.
ModelClientValidationRule
Provides a base class container for a client validation rule

that is sent to the browser.
ModelClientValidationStringLengthRule
Provides a container for a string-length validation rule that is

sent to the browser.
ModelError
Represents an error that occurs during model binding.
ModelErrorCollection
A collection of ModelError instances.
ModelMetadata
Provides a container for common metadata, for the

ModelMetadataProvider class, and for the ModelValidator
class for a data model.
ModelMetadataProvider
Provides an abstract base class for a custom metadata

provider.
ModelMetadataProviders
Provides a container for the current ModelMetadataProvider

instance.
ModelState
Encapsulates the state of model binding to a property of an

action-method argument, or to the argument itself.
ModelStateDictionary
Represents the state of an attempt to bind a posted form to

an action method, which includes validation information.
ModelValidationResult
Provides a container for a validation result.
ModelValidator
Provides a base class for implementing validation logic.
ModelValidatorProvider
Provides a list of validators for a model.
ModelValidatorProviderCollection
Provides a container for a list of validation providers.
ModelValidatorProviders
Provides a container for the current validation provider.
MultiSelectList
Represents a list of items that users can select more than

one item from.
MvcFilter
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.
MvcHandler
Selects the controller that will handle an HTTP request.
MvcHtmlString
Represents an HTML-encoded string that should not be

encoded again.
MvcHttpHandler
Verifies and processes an HTTP request.
MvcRouteHandler
Creates an object that implements the IHttpHandler interface

and passes the request context to it.
MvcWebRazorHostFactory
Creates instances of MvcWebPageRazorHost files.
NameValueCollectionExtensions
Extends a NameValueCollection object so that the collection

can be copied to a specified dictionary.
NameValueCollectionValueProvider
Represents the base class for value providers whose values

come from a NameValueCollection object.
NoAsyncTimeoutAttribute
Provides a convenience wrapper for the

AsyncTimeoutAttribute attribute.
NonActionAttribute
Represents an attribute that is used to indicate that a

controller method is not an action method.
OutputCacheAttribute
Represents an attribute that is used to mark an action

method whose output will be cached.
ParameterBindingInfo
Encapsulates information for binding action-method

parameters to a data model.
ParameterDescriptor
Contains information that describes a parameter.
PartialViewResult
Represents a base class that is used to send a partial view to

the response.
PreApplicationStartCode
Provides a registration point for ASP.NET Razor preapplication start code.
QueryStringValueProvider
Represents a value provider for query strings that are

contained in a NameValueCollection object.
QueryStringValueProviderFactory

instance of a query-string value-provider object.
RangeAttributeAdapter
Provides an adapter for the RangeAttribute attribute.
RazorView
Represents the class used to create views that have Razor

syntax.
RazorViewEngine
Represents a view engine that is used to render a Web page

that uses the ASP.NET Razor syntax.
RedirectResult
Controls the processing of application actions by redirecting

to a specified URI.
RedirectToRouteResult
Represents a result that performs a redirection by using the

specified route values dictionary.
ReflectedActionDescriptor
Contains information that describes a reflected action

method.
ReflectedControllerDescriptor
Contains information that describes a reflected controller.
ReflectedParameterDescriptor
Contains information that describes a reflected actionmethod parameter.
RegularExpressionAttributeAdapter
Provides an adapter for the RegularExpressionAttribute

attribute.
RemoteAttribute
Provides an attribute that uses the jQuery validation plug-in

remote validator.
RequiredAttributeAdapter
Provides an adapter for the RequiredAttributeAttribute

attribute.
RequireHttpsAttribute
Represents an attribute that forces an unsecured HTTP

request to be re-sent over HTTPS.
ResultExecutedContext
Provides the context for the OnResultExecuted method of the

ResultExecutingContext
Provides the context for the OnResultExecuting method of the

RouteCollectionExtensions
Extends a RouteCollection object for MVC routing.
RouteDataValueProvider
Represents a value provider for route data that is contained

in an object that implements the IDictionary(Of TKey,
TValue) interface.
RouteDataValueProviderFactory
Represents a factory for creating route-data value provider

objects.
SelectList
Represents a list that lets users select one item.
SelectListItem
Represents the selected item in an instance of the SelectList
class.
SessionStateAttribute
Specifies the session state of the controller.
SessionStateTempDataProvider
Provides session-state data to the current

TempDataDictionary object.
StringLengthAttributeAdapter
Provides an adapter for the StringLengthAttribute attribute.
TempDataDictionary
Represents a set of data that persists only from one request

to the next.
TemplateInfo
Encapsulates information about the current template context.
UrlHelper
Contains methods to build URLs for ASP.NET MVC within an

application.
UrlParameter
Represents an optional parameter that is used by the

MvcHandler class during routing.
ValidatableObjectAdapter
Provides an object adapter that can be validated.
ValidateAntiForgeryTokenAttribute
Represents an attribute that is used to prevent forgery of a

request.
ValidateInputAttribute
Represents an attribute that is used to mark action methods

whose input must be validated.
ValueProviderCollection
Represents the collection of value-provider objects for the

application.
ValueProviderDictionary
Obsolete. Represents a dictionary of value providers for the

application.
ValueProviderFactories
Represents a container for value-provider factory objects.
ValueProviderFactory
Represents a factory for creating value-provider objects.
ValueProviderFactoryCollection
Represents the collection of value-provider factories for the

application.
ValueProviderResult
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.
ViewContext
Encapsulates information that is related to rendering a view.
ViewDataDictionary
Represents a container that is used to pass data between a

controller and a view.
ViewDataDictionary(Of TModel)
Represents a container that is used to pass strongly typed

data between a controller and a view.
ViewDataInfo
Encapsulates information about the current template content

that is used to develop templates and about HTML helpers
that interact with templates.
ViewEngineCollection
Represents a collection of view engines that are available to

the application.
ViewEngineResult
Represents the result of locating a view engine.
ViewEngines
Represents a collection of view engines that are available to

the application.
ViewMasterPage
Represents the information that is needed to build a master

view page.
ViewMasterPage(Of TModel)
Represents the information that is required in order to build

a strongly typed master view page.
ViewPage
Represents the properties and methods that are needed to

render a view as a Web Forms page.
ViewPage(Of TModel)
Represents the information that is required in order to render

a strongly typed view as a Web Forms page.
ViewResult
Represents a class that is used to render a view by using an

IView instance that is returned by an IViewEngine object.
ViewResultBase
Represents a base class that is used to provide the model to

the view and then render the view to the response.
ViewStartPage
Provides an abstract class that can be used to implement a

view start (master) page.
ViewTemplateUserControl
Provides a container for TemplateInfo objects.
ViewTemplateUserControl(Of TModel)
Provides a container for TemplateInfo objects.
ViewType
Represents the type of a view.
ViewUserControl
Represents the information that is needed to build a user

control.
ViewUserControl(Of TModel)
Represents the information that is required in order to build

a strongly typed user control.
VirtualPathProviderViewEngine
Represents an abstract base-class implementation of the

IViewEngine interface.
WebFormView
Represents the information that is needed to build a Web

Forms page in ASP.NET MVC.
WebFormViewEngine
Represents a view engine that is used to render a Web

Forms page to the response.
WebViewPage
Represents the properties and methods that are needed in

order to render a view that uses ASP.NET Razor syntax.
WebViewPage(Of TModel)
Represents the properties and methods that are needed in

order to render a view that uses ASP.NET Razor syntax.
Interfaces
Interface
Description
IActionFilter
Defines the methods that are used in an action filter.
IActionInvoker
Defines the contract for an action invoker, which is used to invoke an

action in response to an HTTP request.
IAuthorizationFilter
Defines the methods that are required for an authorization filter.
IClientValidatable
Provides a way for the ASP.NET MVC validation framework to discover at

run time whether a validator has support for client validation.
IController
Defines the methods that are required for a controller.
IControllerActivator
Provides fine-grained control over how controllers are instantiated using

dependency injection.
IControllerFactory
Defines the methods that are required for a controller factory.
IDependencyResolver
Defines the methods that simplify service location and dependency

resolution.
IExceptionFilter
Defines the methods that are required for an exception filter.
IFilterProvider
Provides an interface for finding filters.
IMetadataAware
Provides an interface for exposing attributes to the

AssociatedMetadataProvider class.
IModelBinder
Defines the methods that are required for a model binder.
IModelBinderProvider
Defines methods that enable dynamic implementations of model binding

for classes that implement the IModelBinder interface.
IMvcFilter
Defines members that specify the order of filters and whether multiple
filters are allowed.
IResultFilter
Defines the methods that are required for a result filter.
IRouteWithArea
Associates a route with an area in an ASP.NET MVC application.
ITempDataProvider
Defines the contract for temporary-data providers that store data that is
viewed on the next request.
IUnvalidatedValueProvider Represents an IValueProvider interface that can skip request validation.

IValueProvider
Defines the methods that are required for a value provider in ASP.NET
MVC.
IView
Defines the methods that are required for a view.
IViewDataContainer
Defines the methods that are required for a view data dictionary.
IViewEngine
Defines the methods that are required for a view engine.
IViewLocationCache
Defines the methods that are required in order to cache view locations in
memory.
IViewPageActivator
Provides fine-grained control
Previous
Next Chapter
ASP.NET Web Forms - Demo

Previous
Next Chapter
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).
A web server markup language (Razor using VB or C#)
ASP.NET web controls and web components
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:
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
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 like c:\w3schools_demo\DemoWF before clicking OK.
Previous
Next Chapter
ASP.NET Web Forms - Demo

Previous
Next Chapter
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
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
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
{
color: #696969;
}
h1
{
color: #ffffff;
}
h2
{
color: #996600;
}
#main
{
padding: 20px;
border-radius: 0px 4px 4px 4px;
}
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).
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>
</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.
Web Forms File Types

Below is a list of ASP.NET Web Forms most common file types.
Extention
Description
.htm / .html
HTML Pages
Web pages to be viewed directly by the browser
.css
Style Sheets
Defines styles and formatting for the web site
.js
JavaScripts
Contains JavaScripts to be executed in the browser
.aspx
Web Forms
The core of ASP.NET. Web pages with ASP.NET code.
.ascx
Web User Controls

Contains code fragments to be used by multiple pages
.asax
Global Class
Global code (like startup code)
.asmx
Web Service
Contains callable web services
.cs
Class Files
Contains code in C#
.vb
Class Files
Contains code in Vb (Visual Badsic)
.config
Web Configuration
Contains configuration information for the web site
.master
Master Pages
Define the global structure (look) of the web site
.sitemap
XML Sitemap
.xml
Data stored in XML format
.sdf
SQL Server Compact Databases
.mdf
SQL Server Expess (Accsess) Databases
Previous
Next Chapter
ASP.NET Web Forms - Adding a Menu

Previous
Next Chapter

Part II: Adding Navigation.
What We Will Do
Add an about page
Add a navigation menu
Add an About Page

In the "DemoWF" folder, create a new Web Form named "About.aspx".
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:
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">Home</a></li>
<li><a href="About">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).

In the Styles folder, edit your your style sheet (Site.css):
Site.css
body
{
color: #696969;
}
h1
{
color: #ffffff;
}
h2
{
color: #996600;
}
#main
{
padding: 20px;
}
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
padding: 10px 20px;
line-height: 2.8em;
color: #034af3;
}
ul#menu li a:hover
{
}
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 "DemoWF" folder, edit the page (file) named "Default.aspx".
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.
Previous
Next Chapter
ASP.NET Web Forms - Databases

Previous
Next Chapter

Part III: Adding a Database.
What We Will Do
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
* 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
Type
Allow Nulls
ID
int (primary key)
No
Title
nvarchar(100)
No
Director
nvarchar(100)
No
Date
datetime
No
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 the
Column Properties window, set the Identity property to True:
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:
ID
Title
Director
Date
Psycho
Alfred Hitchcock
01.01.1960
La Dolce Vita
Federico Fellini
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".
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>
DataField="ID" HeaderText="ID" />

DataField="Title" HeaderText="Title" />
DataField="Director" HeaderText="Director" />
DataField="Date" HeaderText="Date" />
</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>
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.
Previous
Next Chapter
ASP.NET Web Forms - Tutorial

Previous
Next Chapter
ASP.NET supports three different development models:
THIS TUTORIAL COVERS WEB FORMS
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.
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).
A web server markup language (Razor using VB or C#)
ASP.NET web controls and web components
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
Previous
Next Chapter
ASP.NET Web Forms - HTML Pages

Previous
Next Chapter
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:
<html>
<center>
</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.
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>
<center>
<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>
<center>
</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
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.
Previous
Next Chapter
ASP.NET Web Forms - Server Controls

Previous
Next Chapter
Server controls are tags that are understood by the server.
Limitations in Classic ASP

The listing below was copied from the previous chapter:
<html>
<center>
</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
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:
<script runat="server">
Sub Page_Load
link1.HRef="http://www.w3schools.com"
End Sub
</script>
<html>
<body>
<form runat="server">
<a id="link1" runat="server">Visit W3Schools!</a>
</form>
</body>
</html>
The executable code itself has been moved outside the HTML.
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" />

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:
Sub submit(Source As Object, e As EventArgs)
button1.Text="You clicked me!"
End Sub
</script>
<html>
<body>
<asp:Button id="button1" Text="Click me!"
runat="server" OnClick="submit"/>
</form>
</body>
</html>
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:

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:
Example
<html>
<body>
<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
Previous
Next Chapter
ASP.NET Web Forms - Events

Previous
Next Chapter
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>
<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
Sub Page_Load
End Sub
</script>
<html>
<body>
</form>
</body>
</html>
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
Sub Page_Load
if Not Page.IsPostBack then
end if
End Sub
Sub submit(s As Object, e As EventArgs)
lbl2.Text="Hello World!"
End Sub
</script>
<html>
<body>
<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.
Previous
Next Chapter
ASP.NET Web Forms - HTML Forms

Previous
Next Chapter
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:
...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:
Example
Previous
Next Chapter
ASP.NET Web Forms - Maintaining the ViewState

Previous
Next Chapter
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 & "!")
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
Sub submit(sender As Object, e As EventArgs)
lbl1.Text="Hello " & txt1.Text & "!"
End Sub
</script>
<html>
<body>
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
Previous
Next Chapter
ASP.NET Web Forms - The TextBox Control

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

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>
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>
</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
lbl1.Text="Your name is " & txt1.Text
End Sub
</script>
<html>
<body>
Enter your name:
<asp:TextBox id="txt1" runat="server" />
</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
Sub change(sender As Object, e As EventArgs)
lbl1.Text="You changed text to " & txt1.Text
End Sub
</script>
<html>
<body>
Enter your name:
<asp:TextBox id="txt1" runat="server"
text="Hello World!"
ontextchanged="change" autopostback="true"/>
</form>
</body>
</html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - The Button Control

Previous
Next Chapter
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:
<html>
<body>
<asp:Button id="b1" Text="Submit" runat="server" />
</form>
</body>
</html>
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:
Example
End Sub
</script>
<html>
<body>
Enter your name:
</form>
</body>
</html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - Data Binding

Previous
Next Chapter
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>
<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.
Previous
Next Chapter
ASP.NET Web Forms - The ArrayList Object

Previous
Next Chapter
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:
Sub Page_Load
dim mycountries=New ArrayList
mycountries.Add("Norway")
mycountries.Add("Sweden")
mycountries.Add("France")
mycountries.Add("Italy")
end if
end sub
</script>
By default, an ArrayList object contains 16 entries. An ArrayList can be sized to its final size with the
TrimToSize() method:
Sub Page_Load
mycountries.TrimToSize()
end if
end sub
</script>
An ArrayList can also be sorted alphabetically or numerically with the Sort() method:
Sub Page_Load
mycountries.Sort()
end if
end sub
</script>
To sort in reverse order, apply the Reverse() method after the Sort() method:
Sub Page_Load
mycountries.Sort()
mycountries.Reverse()
end if
end sub
</script>
Data Binding to an ArrayList

An ArrayList 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>
<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
Sub Page_Load
mycountries.Sort()
rb.DataSource=mycountries
rb.DataBind()
end if
end sub
</script>
<html>
<body>
<asp:RadioButtonList id="rb" runat="server" />
</form>
</body>
</html>
Show example
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.
Previous
Next Chapter
ASP.NET Web Forms - The Hashtable Object

Previous
Next Chapter
The Hashtable object contains items in key/value pairs.

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:
Sub Page_Load
dim mycountries=New Hashtable
mycountries.Add("N","Norway")
mycountries.Add("S","Sweden")
mycountries.Add("F","France")
mycountries.Add("I","Italy")
end if
end sub
</script>
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>
<asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" />
</form>
</body>
</html>
Then add the script that builds the list:
sub Page_Load
rb.DataValueField="Key"
rb.DataTextField="Value"
rb.DataBind()
end if
end sub
</script>
<html>
<body>
</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
sub Page_Load
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>
<asp:RadioButtonList id="rb" runat="server"
AutoPostBack="True" onSelectedIndexChanged="displayMessage" />
<p><asp:label id="lbl1" runat="server" /></p>
</form>
</body>
</html>
Show example
Note: You cannot choose the sort order of the items added to the Hashtable. To sort items alphabetically or numerically, use the SortedList object.
Previous
Next Chapter
ASP Source:
Output Result:
sub Page_Load
dim navigate=New Hashtable
navigate.Add("RadioButtonList","control_radiobuttonlist.asp")
navigate.Add("CheckBoxList","control_checkboxlist.asp")
navigate.Add("DropDownList","control_dropdownlist.asp")
navigate.Add("ListBox","control_listbox.asp")
rb.DataSource=navigate
rb.DataValueField="Value"
rb.DataTextField="Key"
rb.DataBind()
end if
end sub
CheckBoxList
DropDownList
RadioButtonList
ListBox
sub navigate(s as Object, e As EventArgs)

response.redirect(rb.SelectedItem.Value)
end sub
</script>
<!DOCTYPE html>
<html>
<body>
AutoPostBack="True" onSelectedIndexChanged="navigate" />
</form>
</body>
</html>
ASP Source:
Output Result:
sub Page_Load
dd.DataSource=mycountries
dd.DataValueField="Key"
dd.DataTextField="Value"
dd.DataBind()
end if
end sub
Norway
Norway

lbl1.text="Your favorite country is: " & dd.SelectedItem.Text
end sub
</script>
<!DOCTYPE html>
<html>
<body>
<asp:DropDownList id="dd" runat="server"
AutoPostBack="True" onSelectedIndexChanged="displayMessage"
/>
</form>
</body>
</html>
ASP Source:
Output Result:
sub Page_Load
rb.DataBind()
end if
end sub
Norway
France
Italy
Sweden

end sub
</script>
<!DOCTYPE html>
<html>
<body>
/>
</form>
</body>
</html>
ASP.NET Web Forms - The SortedList Object

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

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:
sub Page_Load
dim mycountries=New SortedList
end if
end sub
</script>
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>
</body>
</html>
Then add the script that builds the list:
sub Page_Load
rb.DataBind()
end if
end sub
</script>
<html>
<body>
</form>
</body>
</html>
in a label:
Example
sub Page_Load
rb.DataBind()
end if
end sub
end sub
</script>
<html>
<body>
</form>
</body>
</html>
Show example
Previous
Next Chapter
ASP Source:
Output Result:
sub Page_Load
rb.DataBind()
end if
end sub
France
Italy
Norway
Sweden

end sub
</script>
<!DOCTYPE html>
<html>
<body>
/>
</form>
</body>
</html>
ASP Source:
Output Result:
sub Page_Load
dim navigate=New SortedList
navigate.Add("RadioButtonList","control_radiobuttonlist.asp")
navigate.Add("CheckBoxList","control_checkboxlist.asp")
navigate.Add("DropDownList","control_dropdownlist.asp")
navigate.Add("ListBox","control_listbox.asp")
rb.DataSource=navigate
rb.DataValueField="Value"
rb.DataTextField="Key"
rb.DataBind()
end if
end sub
CheckBoxList
DropDownList
ListBox
RadioButtonList
sub navigate(s as Object, e As EventArgs)

response.redirect(rb.SelectedItem.Value)
end sub
</script>
<!DOCTYPE html>
<html>
<body>
AutoPostBack="True" onSelectedIndexChanged="navigate" />
</form>
</body>
</html>
ASP Source:
Output Result:
sub Page_Load
dd.DataSource=mycountries
dd.DataValueField="Key"
dd.DataTextField="Value"
dd.DataBind()
end if
end sub
France
France

lbl1.text="Your favorite country is: " & dd.SelectedItem.Text
end sub
</script>
<!DOCTYPE html>
<html>
<body>
<asp:DropDownList id="dd" runat="server"
/>
</form>
</body>
</html>
ASP.NET Web Forms - XML Files

Previous
Next Chapter
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
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:
sub Page_Load
dim mycountries=New DataSet
mycountries.ReadXml(MapPath("countries.xml"))
end if
end sub
To bind the DataSet to a RadioButtonList control, first create a RadioButtonList control (without any asp:ListItem elements) in an .aspx page:
<html>
<body>
</form>
</body>
</html>
Then add the script that builds the XML DataSet:

sub Page_Load
rb.DataValueField="value"
rb.DataTextField="text"
rb.DataBind()
end if
end sub
</script>
<html>
<body>
</form>
</body>
</html>
in a label:
Example
sub Page_Load
rb.DataValueField="value"
rb.DataTextField="text"
rb.DataBind()
end if
end sub
end sub
</script>
<html>
<body>
</form>
</body>
</html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - The Repeater Control

Previous
Next Chapter
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"):

<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>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<company>Virgin records</company>
<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:

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first
loaded:
sub Page_Load
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub
Then we create a Repeater control in an .aspx page. The contents of the <HeaderTemplate> element
are rendered first and only once within the output, then the contents of the <ItemTemplate> element
are repeated for each "record" in the DataSet, and last, the contents of the <FooterTemplate> element
are rendered once within the output:
<html>
<body>
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<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:
Example
sub Page_Load
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<HeaderTemplate>
<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>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Show example
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
sub Page_Load
end if
end sub
</script>
<html>
<body>
<HeaderTemplate>
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="#e8e8e8">
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Show example
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
sub Page_Load
end if
end sub
</script>
<html>
<body>
<HeaderTemplate>
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
</tr>
</ItemTemplate>
<SeparatorTemplate>
<tr>
<td colspan="6"><hr /></td>
</tr>
</SeparatorTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - The DataList Control

Previous
Next Chapter
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.
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"):

<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<company>Columbia</company>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
<artist>Gary Moore</artist>
<company>Virgin records</company>
<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:

Next, create a DataSet for the XML file and load the XML file into the DataSet when the page is first loaded:
sub Page_Load
end if
end sub
Then we create a DataList in an .aspx page. The contents of the <HeaderTemplate> element are rendered first and only once within the output, then the
contents of the <ItemTemplate> element are repeated for each "record" in the DataSet, and last, the contents of the <FooterTemplate> element are
rendered once within the output:
<html>
<body>
<asp:DataList id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</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:
Example
sub Page_Load
end if
end sub
</script>
<html>
<body>
<asp:DataList id="cdcatalog"
gridlines="both" runat="server">
<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
Using Styles
You can also add styles to the DataList control to make the output more fancy:
Example
sub Page_Load
end if
end sub
</script>
<html>
<body>
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>
</ItemTemplate>
<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
Show example
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:
Example
sub Page_Load
end if
end sub
</script>
<html>
<body>
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-bold="True"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">
<HeaderTemplate>
My CD Catalog
</HeaderTemplate>
<ItemTemplate>
</ItemTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>
<FooterTemplate>
© Hege Refsnes
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - Database Connection

Previous
Next Chapter
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.

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" %>

sub Page_Load
dim dbconn
dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;
data source=" & server.mappath("northwind.mdb"))
dbconn.Open()
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:

sub Page_Load
dim dbconn,sql,dbcomm
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:

sub Page_Load
dim dbconn,sql,dbcomm,dbread
dbconn.Open()
dbread=dbcomm.ExecuteReader()
end sub
</script>
Bind to a Repeater Control

Then we bind the DataReader to a Repeater control:
Example
sub Page_Load
dbconn.Open()
customers.DataSource=dbread
customers.DataBind()
dbread.Close()
dbconn.Close()
end sub
</script>
<html>
<body>
<asp:Repeater id="customers" runat="server">
<HeaderTemplate>
<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>
<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()
Previous
Next Chapter
ASP Source:
Output Result:
Companyname
Alfreds
Futterkiste
sub Page_Load
dbconn=New
OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source="
& server.mappath("/db/northwind.mdb"))
dbconn.Open()
dbread.Close()
dbconn.Close()
end sub
</script>
<!DOCTYPE html>
<html>
<body>
<asp:Repeater id="customers" runat="server">
<HeaderTemplate>
<tr bgcolor="#b0c4de">
<th>Companyname</th>
<th>Contactname</th>
<th>Address</th>
<th>City</th>
</tr>
</HeaderTemplate>
Address
City
Maria Anders
Obere Str. 57
Berglunds
snabbkp
Christina
Berglund
Berguvsvgen
Lule
8
Centro comercial
Moctezuma
Ernst Handel
FISSA Fabrica
Inter. Salchichas
S.A.
Francisco
Sierras de
Mxico
Chang
Granada 9993 D.F.
Roland Mendel Kirchgasse 6 Graz
Berlin
Diego Roel
C/ Moralzarzal,
Madrid
86
Galera del
gastrnomo
Eduardo
Saavedra
Rambla de
Barcelona
Catalua, 23
Island Trading
Helen Bennett
Garden House
Cowes
Crowther Way
Kniglich Essen Philip Cramer Maubelstr. 90
Brandenburg
Laughing Bacchus Yoshi

Wine Cellars
Tannamuri
1900 Oak St.
Vancouver
Magazzini
Giovanni
Alimentari Riuniti Rovelli
Via Ludovico il
Bergamo
Moro 22
North/South
Paris
spcialits
Rattlesnake
Canyon Grocery
Simons bistro
<ItemTemplate>
Contactname
South House
London
300
Queensbridge
265, boulevard
Marie Bertrand
Paris
Charonne
Simon
Crowther
Paula Wilson
Jytte Petersen
2817 Milton
Dr.
Vinbltet 34
Albuquerque
Kbenhavn
ASP Source:
Output Result:
Customers Table
Alfreds Futterkiste in Obere Str. 57, Berlin
Berglunds snabbkp in Berguvsvgen 8, Lule
Centro comercial Moctezuma in Sierras de Granada 9993,
Mxico D.F.
Ernst Handel in Kirchgasse 6, Graz
FISSA Fabrica Inter. Salchichas S.A. in C/ Moralzarzal, 86,
Madrid
Galera del gastrnomo in Rambla de Catalua, 23, Barcelona
sub Page_Load
dbconn=New
OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source="
& server.mappath("/db/northwind.mdb"))
dbconn.Open()
dbread.Close()
dbconn.Close()
end sub
</script>
Island Trading in Garden House Crowther Way, Cowes

Kniglich Essen in Maubelstr. 90, Brandenburg
Laughing Bacchus Wine Cellars in 1900 Oak St., Vancouver
Magazzini Alimentari Riuniti in Via Ludovico il Moro 22,
Bergamo
North/South in South House 300 Queensbridge, London
Paris spcialits in 265, boulevard Charonne, Paris
<!DOCTYPE html>
<html>
<body>
<asp:DataList
id="customers"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-bold="True"
Rattlesnake Canyon Grocery in 2817 Milton Dr., Albuquerque

Simons bistro in Vinbltet 34, Kbenhavn
The Big Cheese in 89 Jefferson Way Suite 2, Portland
Vaffeljernet in Smagslget 45, rhus
Wolski Zajazd in ul. Filtrowa 68, Warszawa
Source: Northwind Database
ASP.NET Web Forms - Master Pages

Previous
Next Chapter
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 contains 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.
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>
<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.
Previous
Next Chapter
ASP.NET Web Forms - Navigation

Previous
Next Chapter
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 called web.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.
Dynamic Menu
The <asp:Menu> control displays a standard site navigation menu.
Code Example:
<asp:SiteMapDataSource id="nav1" 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" />

<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).
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:
<asp:SiteMapPath runat="server" />
</form>
The <asp:SiteMapPath> control in the example above is a placeholder for a server created site path display.
Previous
Next Chapter
ASP.NET Web Forms - HTML Controls

Previous
Next Chapter
HTML server controls are HTML tags understood by the server.
HTML Server Controls

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.
Note: All HTML server controls must be within a <form> tag with the runat="server" attribute!
Note: ASP.NET requires that all HTML elements must be properly closed and properly nested.
HTML Server Control
Description
HtmlAnchor
Controls an <a> HTML element
HtmlButton
Controls a <button> HTML element
HtmlForm
Controls a <form> HTML element
HtmlGeneric
Controls other HTML element not specified by a specific HTML server

control, like <body>, <div>, <span>, etc.
HtmlImage
Controls an <image> HTML element
HtmlInputButton
Controls <input type="button">, <input type="submit">, and <input

type="reset"> HTML elements
HtmlInputCheckBox
Controls an <input type="checkbox"> HTML element
HtmlInputFile
Controls an <input type="file"> HTML element
HtmlInputHidden
Controls an <input type="hidden"> HTML element
HtmlInputImage
Controls an <input type="image"> HTML element
HtmlInputRadioButton
Controls an <input type="radio"> HTML element
HtmlInputText
Controls <input type="text"> and <input type="password"> HTML

elements
HtmlSelect
Controls a <select> HTML element
HtmlTable
Controls a <table> HTML element
HtmlTableCell
Controls <td>and <th> HTML elements
HtmlTableRow
Controls a <tr> HTML element
HtmlTextArea
Controls a <textarea> HTML element
Previous
Next Chapter
ASP.NET HtmlAnchor Control

Definition and Usage

The HtmlAnchor control is used to control an <a> element. In HTML, the <a> element is used to
create a hyperlink. The hyperlink may link to a bookmark or to another Web page.
Properties
Property
Description
Attributes
Returns all attribute name and value pairs of the element
Disabled
A Boolean value that indicates whether or not the control should be

disabled. Default is false
HRef
The URL target of the link
id
A unique id for the control
InnerHtml
Sets or returns the content between the opening and closing tags of the
HTML element. Special characters are not automatically converted to HTML
entities
InnerText
Sets or returns all text between the opening and closing tags of the HTML
element. Special characters are automatically converted to HTML entities
Name
The name of the anchor
OnServerClick
The name of the function to be executed when the link is clicked
runat
Specifies that the control is a server control. Must be set to "server"
Style
Sets or returns the CSS properties that are applied to the control
TagName
Returns the element tag name
Target
The target window to open
Title
A title to be displayed by the browser (like the title attribute of the img
element)
Visible
A Boolean value that indicates whether or not the control should be visible
Example
HTMLAnchor
Declare two HtmlAnchor controls in an .aspx file (remember to embed the control inside an HtmlForm
control). Then modify the URL, target, and title of the HtmlAnchor controls 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 HtmlButton Control


The HtmlButton control is used to control a <button> element. In HTML, the <button> element is used to create a push button.
Properties
Property
Description
Attributes
Disabled
A Boolean value that indicates whether or not the control should be disabled. Default is false
id
InnerHtml
Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not
automatically converted to HTML entities
InnerText
Sets or returns all text between the opening and closing tags of the HTML element. Special characters are
OnServerClick
The name of the function to be executed when the button is clicked
runat
Style
TagName
Visible
Example
HTMLButton
Declare two HtmlButton controls in an .aspx file (remember to embed the control inside an HtmlForm control). Next, write an event handler that specifies
what to happen when a button is clicked.
ASP.NET HtmlForm Control


The HtmlForm control is used to control a <form> element. In HTML, the <form> element is used to
create a form.
Note: All HTML server controls must be within the HtmlForm control!
Note: You can only have one HtmlForm control on a single page!
Properties
Property
Description
Action
A URL that defines where to send the data when the form is submitted.
Attributes
Disabled

EncType
The mime type used to encode the content of the form
id
InnerHtml
entities
InnerText
Method
How the form posts data to the server. Legal values are: "post" and "get".
Default is "post"
Name
The name of the form
runat
Style
TagName
Target
The target window to load the URL
Visible
Note: This attribute is always set to the URL of the page itself!
Example
HTMLForm
Declare one HtmlInputText controls, one HtmlInputButton control, and one HtmlGeneric control in an
.aspx file (remember to embed the controls inside an HtmlForm control). When the submit button is
triggered, the submit subroutine is executed. The submit subroutine writes a welcome message to the
p element.
ASP.NET HtmlGeneric Control


The HtmlGeneric control is used to control other HTML element not specified by a specific HTML server control, like <body>, <div>, <span>, <font>, <p>,
etc.
Properties
Property
Description
Attributes
Disabled
id
InnerHtml
InnerText
runat
Style
TagName
Visible
Example
HTMLGeneric
Declare one HtmlInputText controls, one HtmlInputButton control, and one HtmlGeneric control (the <p> tag) in an .aspx file (remember to embed the
controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a welcome
message to the p element.
ASP.NET HtmlImage Control


The HtmlImage control is used to control an <img> element. In HTML, the <img> element is used to
display an image.
Properties
Property
Description
Align
How to align the image according to surrounding elements. Legal values

are:
top
middle
bottom
left
right
Alt
A short description of the image
Attributes
Border
The width of the borders around the image
Disabled

Height
The height of the image
id
runat
Src
The URL of the image to display
Style
TagName
Visible
Width
The width of the image
Examples
HTMLImage
Declare an HtmlImage control in an .aspx file (remember to embed the control inside an HtmlForm
control). Then we modify the src, alt and border properties of the HtmlImage 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:
HTMLImage 2
Declare an HtmlImage and an HTMLSelect control in an .aspx file (remember to embed the controls
inside an HtmlForm control). Then we modify the src property of the HtmlImage control based on user
choices. The value selected in the HtmlSelect control determines which image to display.
ASP.NET HtmlInputButton Control


The HtmlInputButton control is used to control <input type="button">, <input type="submit">, and <input type="reset"> elements. In HTML, these
elements are used to create a command button, a submit button, and a reset button.
Properties
Property
Description
Attributes
Disabled
id
A unique id for the element
Name
The name of the element
OnServerClick
The name of the function to be executed when the button is clicked
runat
Specifies that the element is a server control. Must be set to "server"
Style
TagName
Type
The type of the element
Value
The value of the element
Visible
Example
HTMLInputbutton
Declare one HtmlInputText controls, one HtmlInputButton control, and one HtmlGeneric control in an .aspx file (remember to embed the controls inside an
HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a welcome message to the p
element.
ASP.NET HtmlInputCheckBox Control


The HtmlInputCheckBox control is used to control an <input type="checkbox"> element. In HTML, this
element is used to create a checkbox.
Properties and Events

Property
Description
Attributes
Checked
A Boolean value that specifies whether or not the element is to be checked
Disabled

id
Name
runat
Style
TagName
Type
Value
Visible
Event
Description
ServerChange
Occurs when the state of the control has changed
Example
HTMLInputCheckbox
Declare two HtmlInputCheckBox controls, one HtmlInputButton control, and one HtmlGeneric in an
triggered, the submit subroutine is executed. The submit subroutine may respond in two ways: if the
"red" checkbox is checked, the server sends the message "You prefer red!" to the p element. If the
"blue" checkbox is checked, the server sends the message "You prefer blue!" to the p element.
ASP.NET HtmlInputFile Control


The HtmlInputFile control is used to control an <input type="file"> element. In HTML, this element is
used to upload a file to the server.
Properties
Property
Description
Accept
List of acceptable MIME types
Attributes
Disabled

id
MaxLength
The maximum number of characters allowed in this element
Name
PostedFile
Gets access to the posted file
runat
Size
The width of the element
Style
TagName
Type
Value
Visible
Example
Declare one HtmlInputFile control, one HtmlInputButton control, and three HtmlGeneric controls in an
triggered, the submit subroutine is executed. The file name and file type are displayed on the page,
while the file itself is uploaded to the c directory on the server:
Sub submit(Sender as Object, e as EventArgs)
fname.InnerHtml=MyFile.PostedFile.FileName
clength.InnerHtml=MyFile.PostedFile.ContentLength
MyFile.PostedFile.SaveAs("c:\uploadfile.txt")
End Sub
</script>
<html>
<body>
<form method="post"
enctype="multipart/form-data" runat="server">
<p>
Select file to upload to server:
<input id="MyFile" type="file" size="40" runat="server">
</p>
<p>
<input type="submit" value="Upload!" OnServerclick="submit"
runat="server">
</p>
<p>
<div runat="server">
FileName: <span id="fname" runat="server"/><br />
ContentLength: <span id="clength" runat="server"/> bytes
</div>
</p>
</form>
</body>
</html>
ASP.NET HtmlInputHidden Control


The HtmlInputHidden control is used to control an <input type="hidden"> element. In HTML, this element is used to create a hidden input field.

Property
Description
Attributes
Disabled
id
Name
runat
Style
TagName
Type
Value
The value of the hidden field
Visible
Event
Description
ServerChange
When the content of the element has changed
Example
HTMLInputHidden
Declare one HtmlInputHidden control, one HtmlInputText control, one HtmlInputButton control, and one HtmlGeneric control in an .aspx file (remember to
embed the controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine sets the
value of the hidden field equal to value of the input field and then displays the value of the hidden field in the p element.
ASP.NET HtmlInputImage Control


The HtmlInputImage control is used to control an <input type="image"> element. In HTML, this
element is used to create an input button using an image, instead of a regular push-style button.

Property
Description
Align
The alignment of the image
Alt
An alternate text to display for the image
Attributes
Border
The width of the borders around the element
Disabled

id
Name
OnServerClick
The name of the function to be executed when the image is clicked
runat
Src
The source of the image
Style
TagName
Type
Value
Visible
Example
HTMLInputImage
Declare two HtmlInputImage controls and one HtmlGeneric control in an .aspx file (remember to embed
the controls inside an HtmlForm control). If the user clicks on the first image, the button1 subroutine is
executed. This subroutine sends the message "You clicked the smiley button!" to the p element. If the
user clicks on the second image, the button2 subroutine is executed. This subroutine sends the
message "You clicked the angry button!" to the p element.
ASP.NET HtmlInputRadioButton Control


The HtmlInputRadioButton control is used to control an <input type="radio"> element. In HTML, this
element is used to create a radiobutton.
Properties
Property
Description
Attributes
Checked
A Boolean value that specifies whether or not the element is to be selected
Disabled

id
Name
The name of the radio button group
runat
Style
TagName
Type
Value
Visible
Example
HTMLInputRadiobutton
Declare three HtmlInputRadioButton controls, one HtmlInputButton control, and one HtmlGeneric
control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the submit
button is triggered, the submit subroutine is executed. The submit subroutine may respond in three
ways: if the radiobutton with id="r1" is selected, the server sends the message "Your favorite color is
red" to the p element. If the radiobutton with id="r2" is selected, the server sends the message "Your
favorite color is green" to the p element. If the radiobutton with id="r3" is selected, the server sends
the message "Your favorite color is blue" to the p element.
ASP.NET HtmlInputText Control


The HtmlInputText control is used to control <input type="text"> and <input type="password"> elements. In HTML, these elements are used to create a
text field and a password field.
Properties
Property
Description
Attributes
Disabled
id
MaxLength
The maximum number of characters allowed in this element
Name
runat
Size
The width of the element
Style
TagName
Type
Value
Visible
Example
HTMLInputText
Declare one HtmlInputText controls, one HtmlInputButton control, and one HtmlGeneric control in an .aspx file (remember to embed the controls inside an
HtmlForm control). When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a welcome message to the p
element.
ASP.NET HtmlSelect Control


The HtmlSelect control is used to control a <select> element. In HTML, the <select> element is used
to create a drop-down list.
Properties
Property
Description
Attributes
DataMember
A name of a data table to use
DataSource
A data source to use
DataTextField
A field in the data source to be displayed in the drop-down list
DataValueField
A field in the data source that specifies the value of each selectable item in
the drop-down list
Disabled

id
InnerHtml
entities
InnerText
Items
The list of items in the drop-down list
Multiple
Whether multiple items can be selected at a time
OnServerChange
The name of the function to be executed when the selected item has
changed
runat
SelectedIndex
The index of the currently selected item
Size
The number of visible items in the drop-down list
Style
TagName
Value
The value of the currently selected item
Visible
Example
HTMLSelect
Declare an HtmlImage and an HTMLSelect control in an .aspx file (remember to embed the controls
inside an HtmlForm control). Then modify the src property of the HtmlImage control based on user
choices. The value selected in the HtmlSelect control determines which image to display.
ASP.NET HtmlTable Control


The HtmlTable control is used to control a <table> element. In HTML, the <table> element is used to
create a table.
Properties
Property
Description
Align
Specifies the alignment of the table
Attributes
BGColor
Specifies the background color of the table
Border
Specifies the width of the borders

Tip: Set border="0" to display tables with no borders!
BorderColor
Specifies the color of the borders
CellPadding
Specifies the space between the cell walls and contents
CellSpacing
Specifies the space between cells
Disabled

Height
Specifies the height of the table
id
InnerHtml
entities
InnerText
Rows
Returns an HtmlRowCollection object which represents all rows in the table
runat
Style
TagName
Visible
Width
Specifies the width of the table
Examples
HTMLTable
Declare two HtmlSelect controls, one HtmlInputButton control, and one HtmlTable control in an .aspx
file (remember to embed the controls inside an HtmlForm control). The user may choose number of
cells and rows. When the submit button is triggered, the submit subroutine is executed. The submit
subroutine generates the table based on what the user did input.
HTMLTable 2
Declare an HtmlTable control and an HtmlInputButton control in an .aspx file (remember to embed the
controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is
executed. The submit subroutine modifies the background color and the border color of the table, it
also changes the contents of the cells.
ASP.NET HtmlTableCell Control


The HtmlTableCell control is used to control <td> and <th> elements. In HTML, these elements are
used to create table cells and header table cells.
Properties
Property
Description
Align
The horizontal alignment of cell content
Attributes
BGColor
The background color of the cell
BorderColor
The color of the borders
ColSpan
The number of columns this cell should span
Disabled

Height
The height of the cell
id
InnerHtml
entities
InnerText
Nowrap
A Boolean value that specifies whether or not the text within this control
should wrap
RowSpan
The number of rows this cell should span
runat
Style
Gets the CSS properties that are applied to the control
TagName
VAlign
The vertical alignment of cell content
Visible
Width
The width of the cell
Examples
HTMLTable
Declare two HtmlSelect controls, one HtmlInputButton control, and one HtmlTable control in an .aspx
file (remember to embed the controls inside an HtmlForm control). The user may choose number of
cells and rows. When the submit button is triggered, the submit subroutine is executed. The submit
HTMLTable 2
Declare an HtmlTable control and an HtmlInputButton control in an .aspx file (remember to embed the
controls inside an HtmlForm control). When the submit button is triggered, the submit subroutine is
executed. The submit subroutine modifies the background color and the border color of the table, it
also changes the contents of the cells.
ASP.NET HtmlTableRow Control


The HtmlTableRow control is used to control a <tr> element. In HTML, the <tr> element is used to create a table row.
Properties
Property
Description
Align
The alignment of the row
Attributes
BGColor
The background color of the row
BorderColor
The color of the borders
Cells
Returns the cells in this row
Disabled
Height
The height of the row
id
InnerHtml
InnerText
runat
Style
TagName
VAlign
The vertical alignment of cells in the row
Visible
Examples
HTMLTable
Declare two HtmlSelect controls, one HtmlInputButton control, and one HtmlTable control in an .aspx file (remember to embed the controls inside an
HtmlForm control). The user may choose number of cells and rows. When the submit button is triggered, the submit subroutine is executed. The submit
HTMLTable 2
Declare an HtmlTable control and an HtmlInputButton control in an .aspx file (remember to embed the controls inside an HtmlForm control). When the
submit button is triggered, the submit subroutine is executed. The submit subroutine modifies the background color and the border color of the table, it also
changes the contents of the cells.
ASP.NET HtmlTextArea Control


The HtmlTextArea control is used to control a <textarea> element. In HTML, the <textarea> element
is used to create a text area.

Property
Description
Attributes
Cols
The number of columns of the text area
Disabled

id
InnerHtml
entities
InnerText
Name
The unique name for the text area
OnServerChange
The name of the function to be executed when the contents of the textarea
is changed
Rows
The number of visible rows of the text area
runat
Style
TagName
Value
The content of the textarea
Visible
Example
HTMLTextarea
Declare an HtmlTextarea control, an HtmlInputButton control, and an HtmlGeneric control in an .aspx
file (remember to embed the controls inside an HtmlForm control). When the submit button is
triggered, the submit subroutine is executed. The submit subroutine sends the message "You wrote: "
and the text the user wrote in the text area to the p element.
ASP.NET AdRotator Control

Web Server Controls

The AdRotator control is used to display a sequence of ad images.
This control uses an XML file to store the ad information. The XML file must begin and end with an <Advertisements> tag. Inside the <Advertisements> tag
there may be several <Ad> tags which defines each ad.
The predefined elements inside the <Ad> tag are listed below:
Element
Description
<ImageUrl>
Optional. The path to the image file
<NavigateUrl>
Optional. The URL to link to if the user clicks the ad
<AlternateText>
Optional. An alternate text for the image
<Keyword>
Optional. A category for the ad
<Impressions>
Optional. The display rates in percent of the hits
Properties
Property
Description
.NET
AdvertisementFile
Specifies the path to the XML file that contains ad information
1.0
AlternateTextField
Specifies a data field to be used instead of the Alt text for an ad
2.0
ImageUrlField
Specifies a data field to be used instead of the ImageURL attribute for an ad
2.0
KeywordFilter
Specifies a filter to limit ads after categories
1.0
NavigateUrlField
Specifies a data field to be used instead of the NavigateUrl attribute for an ad
2.0
runat
1.0
Target
Specifies where to open the URL
1.0
Web Control Standard Properties

AccessKey, Attributes, BackColor, BorderColor, BorderStyle, BorderWidth,
CssClass, Enabled, Font, EnableTheming, ForeColor, Height, IsEnabled, SkinID,
Style, TabIndex, ToolTip, Width
For a full description, go to Web Control Standard Attributes.
Control Standard Properties

AppRelativeTemplateSourceDirectory, BindingContainer, ClientID, Controls,
EnableTheming, EnableViewState, ID, NamingContainer, Page, Parent, Site,
TemplateControl, TemplateSourceDirectory, UniqueID, Visible
For a full description, go to Control Standard Attributes.

AdRotator
Declare an AdRotator control. Then we create an event handler for the AdCreated event, in the .aspx file, to override the value of the NavigateUrl element in
the XML file.
Web Server Controls
ASP.NET Button Control

Web Server Controls

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 Web 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.
Properties
Property
Description
.NET
CausesValidation
Specifies if a page is validated when a button is clicked
1.0
CommandArgument
Specifies additional information about the command to perform
1.0
CommandName
Specifies the command associated with the Command event
1.0
OnClientClick
Specifies the name of the function to be executed when a button is

clicked
2.0
PostBackUrl
Specifies the URL of the page to post to from the current page when 2.0
a button is clicked
runat
Specifies that the control is a server control. Must be set to "server" 1.0
Text
Specifies the text on a button
1.0
UseSubmitBehavior
Specifies whether or not a button uses the browser's submit

mechanism or the ASP.NET postback mechanism
2.0
ValidationGroup
Specifies the group of controls a button causes validation, when it

posts back to the server
2.0



Button
Declare a submit Button control. Then create an event handler for the Click event which changes the
text on the button.
Button 2
Declare a submit Button control. Then create an event handler for the Click event which changes the
text and the style of the button.
Web Server Controls
ASP Source:
Output Result:
End Sub
</script>
Click me!
<!DOCTYPE html>
<html>
<body>
<asp:Button id="button1" Text="Click me!" runat="server"
OnClick="submit" />
</form>
</body>
</html>
ASP Source:
Output Result:
button1.Style("background-color")="#0000ff"
button1.Style("color")="#ffffff"
button1.Style("width")="200px"
button1.Style("cursor")="pointer"
button1.Style("font-family")="verdana"
button1.Style("font-weight")="bold"
button1.Style("font-size")="14pt"
End Sub
</script>
Click me!
<!DOCTYPE html>
<html>
<body>
<asp:Button id="button1" Text="Click me!" runat="server"
OnClick="submit" />
</form>
</body>
</html>
ASP.NET Calendar Control

Web Server Controls

The Calendar control is used to display a calendar in the browser.
This control displays a one-month calendar that allows the user to select dates and move to the next
and previous months.
Properties
Property
Description
.NET
Caption
The caption of the calendar
2.0
CaptionAlign
The alignment of the caption text
2.0
CellPadding
The space, in pixels, between the cell walls and contents
1.0
CellSpacing
The space, in pixels, between cells
1.0
DayHeaderStyle
The style for displaying the names of the days
1.0
DayNameFormat
The format for displaying the names of the days
1.0
DayStyle
The style for displaying days
1.0
FirstDayOfWeek
What should be the first day of week
1.0
NextMonthText
The text displayed for the next month link
1.0
NextPrevFormat
The format of the next and previous month links
1.0
NextPrevStyle
The style for displaying next and previous month links
1.0
OtherMonthDayStyle
The style for displaying days that are not in the current month
1.0
PrevMonthText
The text displayed for the previous month link
1.0
runat
Specifies that the control is a server control. Must be set to

"server"
1.0
SelectedDate
The selected date
1.0
SelectedDates
The selected dates
1.0
SelectedDayStyle
The style for selected days
1.0
SelectionMode
How a user is allowed to select dates
1.0
SelectMonthText
The text displayed for the month selection link
1.0
SelectorStyle
The style for the month and weeks selection links
1.0
SelectWeekText
The text displayed for the week selection link
1.0
ShowDayHeader
A Boolean value that specifies whether the days of the week

header should be shown
1.0
ShowGridLines
A Boolean value that specifies whether the grid lines between

days should be shown
1.0
ShowNextPrevMonth
A Boolean value that specifies whether the next and previous

month links should be shown
1.0
ShowTitle
A Boolean value that specifies whether the title of the calendar

should be shown
1.0
TitleFormat
The format for the title of the calendar
1.0
TitleStyle
The style of the title of the calendar
1.0
TodayDayStyle
The style for today's date
1.0
TodaysDate
Today's date
1.0
UseAccessibleHeader
Specifying whether to use the <th> element for the day

headers instead of the <td> element
2.0
VisibleDate
The date that specifies the month that is currently visible in the 1.0
calendar
WeekendDayStyle
The style for weekends
1.0
OnDayRender
The name of the function to be executed when when each day

cell is created
OnSelectionChanged
The name of the function to be executed when the user selects

a day, week, or month
OnVisibleMonthChanged
The name of the function to be executed when the user

navigates to a different month



Calendar
Declare a Calendar control in its simplest use.
Calendar 2
Declare a Calendar control where the days are displayed with full names in blue, the weekends are
displayed in red on a yellow background, and the current date is displayed with a green background.
Calendar 3
Declare a Calendar control where the days are displayed with full names, the user may select a day, a
week, or the whole month, and the selected day/week/month is displayed with a grey background
color.
Web Server Controls
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
<
Sun
24
1
8
15
22
29
<asp:Calendar runat="server" />
</form>
</body>
</html>
Mon
25
2
9
16
23
30
July 2012
Tue Wed Thu
26 27 28
3
4
5
10 11 12
17 18 19
24 25 26
31
1
2
>
Fri Sat
29 30
6
7
13 14
20 21
27 28
3
4
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
<
July 2012
>
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
<asp:Calendar DayNameFormat="Full" runat="server">
<WeekendDayStyle BackColor="#fafad2" ForeColor="#ff0000"
/>
<DayHeaderStyle ForeColor="#0000ff" />
<TodayDayStyle BackColor="#00ff00" />
</asp:Calendar>
</form>
</body>
</html>
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
<
July 2012
<*> Sunday Monday Tuesday Wednesday Thursday Friday Saturd
<-> 24
25
26
27
28
29
30
<->
1
2
3
4
5
6
7
<->
8
9
10
11
12
13
14
<-> 15
16
17
18
19
20
21
<-> 22
23
24
25
26
27
28
<-> 29
30
31
1
2
3
4
<asp:Calendar DayNameFormat="Full" runat="server"
SelectionMode="DayWeekMonth"
SelectMonthText="<*>"
SelectWeekText="<->"/>
<SelectorStyle BackColor="#f5f5f5" />
</asp:Calendar>
</form>
</body>
</html>
ASP.NET Caption Property

Complete Calendar Control Reference

The Caption property is used to get or set a text that is shown as a caption for the calendar.
Syntax
<asp:Calendar Caption="text" runat="server" />
Attribute
Description
text
The text to be shown as the calendars caption
Example
The following example sets the Caption property in a calendar:
<asp:Calendar id="cal1" runat="server"
Caption="This is a Caption text" />
</form>
Show example
ASP.NET CaptionAlign Property


The CaptionAlign property is used to get or set the alignment of the caption text for a calendar.
Syntax
<asp:Calendar Caption="text" CaptionAlign="align" runat="server" />
Attribute
Description
align
Specifies the alignment of the caption text

Possible Values:
Top - Caption is displayed at the top of the calendar. Text is centered
Bottom - Caption is displayed at the bottom of the calendar. Text is centered
Left - Caption is displayed at the top of the calendar. Text is left-aligned
Right - Caption is displayed at the top of the calendar. Text is right-aligned
Example
The following example sets the Caption property in a calendar and aligns it to the bottom of the
calendar:
Caption="This is a Caption text"
CaptionAlign="bottom" />
</form>
Show example
ASP.NET CellPadding Property


The CellPadding property is used to sets the space between the border and the contents of a calendar
cell.
Syntax
<asp:Calendar CellPadding="pixels" runat="server" />
Attribute
Description
pixels
Specifies the space (in pixels) between the border and the contents of a calendar
cell
Example
The following example shows a calendar with CellPadding 15:
<asp:Calendar id="cal1" runat="server" CellPadding="15" />
</form>
Show example
ASP.NET CellSpacing Property


The CellSpacing property is used to sets the space between calendar cells.
Note: This property does not display properly in FireFox browsers.
Syntax
<asp:Calendar CellSpacing="pixels" runat="server" />
Attribute
Description
pixels
Specifies the space (in pixels) between calendar cells
Example
The following example shows a calendar with CellSpacing 15:
<asp:Calendar id="cal1" runat="server" CellSpacing="15" />
</form>
Show example
Complete Calendar Control Referenc
ASP.NET DayHeaderStyle Property


The DayHeaderStyle property is used to set or return the style of the weekday header in the calendar.
Syntax
<asp:Calendar runat="server">
<DayHeaderStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" DayHeaderStyle-style="value" />
Attribute
Description
style
Specifies the style to set. See the Style Control to see the possible styles and
their values
value
Specifies the value of the specified style
Example 1
The following example shows one way to set the DayHeaderStyle in a calendar:
<asp:Calendar id="cal1" runat="server">
<DayHeaderStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the DayHeaderStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" DayHeaderStyleForeColor="#FF0000" /> </form>
Try-It-Yourself Demos
Set DayHeaderStyle of a Calendar control (with declaration and script)
ASP.NET DayNameFormat Property


The DayNameFormat property is used to set the format of the weekday names in the calendar.
Syntax
<asp:Calendar DayNameFormat="format" runat="server" />
Attribute
Description
format
Specifies the format for displaying the names of the days.

Possible values:
FirstLetter
FirstTwoLetters
Full
Short
Example
The following example shows a calendar with the full day name format:
<asp:Calendar id="cal1" runat="server" DayNameFormat="Full" />
</form>
Show example
ASP.NET DayStyle Property


The DayStyle property is used to set or return the style of the days in the calendar.
Syntax
<DayStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" DayStyle-style="value" />
Attribute
Description
style
their values
value
Example 1
The following example shows one way to set the DayStyle in a calendar:
<DayStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the DayStyle in a calendar:
DayStyle-ForeColor="#FF0000" />
</form>
Set DayStyle of a Calendar control (with declaration and script)
ASP.NET FirstDayOfWeek Property


The FirstDayOfWeek property is used to specify what day should be the first day of the week in the
calendar.
Syntax
<asp:Calendar FirstDayOfWeek="day" runat="server" />
Attribute
Description
day
Specifies the first day of the week in the calendar.

Possible values:
Default
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
Example
The following example shows a calendar with Wednesday set as the first day of the week:
<asp:Calendar id="cal1" runat="server" FirstDayOfWeek="Wednesday" />
</form>
Show example
ASP.NET NextMonthText Property


The NextMonthText property is used to specify the text displayed for the next month link in a calendar.
Syntax
<asp:Calendar NextMonthText="string" runat="server" />
Attribute
Description
string
Specifies the text displayed for the next month link in the calendar. The default
value is ">"
Example
The following example shows a calendar with the NextMonthText set to "Next":
<asp:Calendar id="cal1" runat="server" NextMonthText="Next" />
</form>
Show example
ASP.NET NextPrevFormat Property


The NextPrevFormat property is used to specify the format of the Next and Previous month links in the
calendar.
Syntax
<asp:Calendar NextPrevFormat="format" runat="server" />
Attribute
Description
format
Specifies the format of the next and previous month links in the calendar.
Possible values:
ShortMonth
FullMonth
CustomText
Example
The following example shows a calendar with the NextPrevFormat set to "ShortMonth":
<asp:Calendar id="cal1" runat="server" NextPrevFormat="ShortMonth" />
</form>
Show example
ASP.NET NextPrevStyle Property


The NextPrevStyle property is used to set or return the style of the Next and Previous month links in
the calendar.
Syntax
<NextPrevStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" NextPrevStyle-style="value" />
Attribute
Description
style
their values
value
Example 1
The following example shows one way to set the NextPrevStyle in a calendar:
<NextPrevStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the NextPrevStyle in a calendar:
NextPrevStyle-ForeColor="#FF0000" />
</form>
Set NextPrevStyle of a Calendar control (with declaration and script)
ASP.NET OtherMonthDayStyle Property


The OtherMonthDayStyle property is used to set or return the style of the days in the calendar that are
not part of the current month.
Syntax
<OtherMonthDayStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" OtherMonthDayStyle-style="value" />
Attribute
Description
style
their values
value
Example 1
The following example shows one way to set the OtherMonthDayStyle in a calendar:
<OtherMonthDayStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the OtherMonthDayStyle in a calendar:
OtherMonthDayStyle-ForeColor="#FF0000" />
</form>
Set OtherMonthDayStyle of a Calendar control (with declaration and script)
ASP.NET PrevMonthText Property


The PrevMonthText property is used to specify the text displayed for the previous month link in a
calendar.
Syntax
<asp:Calendar PrevMonthText="string" runat="server" />
Attribute
Description
string
Specifies the text displayed for the previous month link in the calendar. The
default value is "<"
Example
The following example shows a calendar with the PrevMonthText set to "Prev":
<asp:Calendar id="cal1" runat="server" PrevMonthText="Prev" />
</form>
Show example
ASP.NET SelectedDate Property


The SelectedDate property is used to get or set the selected date on a calendar.
Example
The following example outputs the selected date when a date is selected:
<script language="VB" runat="server">

Sub Change(obj As Object, e As EventArgs)
Response.Write("Date: ")
Response.Write(cal1.SelectedDate.ToShortDateString())
End Sub
</script>
OnSelectionChanged="Change" />
</form>
Show example
ASP.NET SelectedDates Property


The SelectedDates property is used to get or set the selected dates from a calendar.
Example
The following example outputs the selected dates when a date is selected:

Sub Change(obj As Object, e As EventArgs)
Dim i As Integer
For i = 0 To Cal1.SelectedDates.Count - 1
Response.Write(Cal1.SelectedDates(i).ToShortDateString())
Response.Write("<br />")
Next i
End Sub
</script>
SelectionMode="DayWeekMonth"
OnSelectionChanged="Change" />
</form>
Show example
ASP.NET SelectedDayStyle Property


The SelectedDayStyle property is used to set or return the style of the selected days in the calendar.
Syntax
<SelectedDayStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" SelectedDayStyle-style="value" />
Attribute
Description
style
their values
value
Example 1
The following example shows one way to set the SelectedDayStyle in a calendar:
<SelectedDayStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the SelectedDayStyle in a calendar:
SelectedDayStyle-ForeColor="#FF0000" />
</form>
Set SelectedDayStyle of a Calendar control (with declaration and script)
ASP.NET SelectionMode Property


The SelectionMode property is used to get or set how a user is allowed to select dates.
Syntax
<asp:Calendar SelectionMode="mode" runat="server" />
Attribute
Description
mode
Specifies how a users is allowed to select dates.

Possible values:
None
Day
DayWeek
DayWeekMonth
Example
The following example sets the SelectionMode of a calendar:
SelectionMode="DayWeekMonth" />
</form>
Show example
ASP.NET SelectMonthText Property


The SelectMonthText property is used to specify the text for selecting an entire month in a calendar.
Note: This property only works when the SelectionMode property is set to DayWeekMonth.
Syntax
<asp:Calendar SelectMonthText="string" runat="server" />
Attribute
Description
string
Specifies the text displayed for selecting an entire month in a calendar. The
default value is ">>"
Example
The following example shows a calendar with the SelectMonthText set to "->":
SelectMonthText="->" SelectionMode="DayWeekMonth" />
</form>
Show example
ASP.NET SelectorStyle Property


The SelectorStyle property is used to set or return the style week and month selectors.
Syntax
<SelectorStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" SelectorStyle-style="value" />
Attribute
Description
style
their values
value
Example 1
The following example shows one way to set the SelectorStyle in a calendar:
<SelectorStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the SelectorStyle in a calendar:
SelectorStyle-ForeColor="#FF0000" />
</form>
Set SelectorStyle of a Calendar control (with declaration and script)
ASP.NET SelectWeekText Property


The SelectWeekText property is used to specify the text for selecting an entire week in a calendar.
Note: This property only works when the SelectionMode property is set to DayWeek or DayWeekMonth.
Syntax
<asp:Calendar SelectWeekText="string" runat="server" />
Attribute
Description
string
Specifies the text displayed for selecting an entire week in a calendar. The default value is ">>"
Example
The following example shows a calendar with the SelectWeekText set to "->":
SelectWeekText="->" SelectionMode="DayWeek" />
</form>
Show example
ASP.NET ShowDayHeader Property


The ShowDayHeader property is used to specify whether or not to display the names of the weekdays in the calendar.
By default this property is set as TRUE and the weekday names are displayed. To remove the weekday names the property must be set as FALSE.
Syntax
<asp:Calendar ShowDayHeader="TRUE|FALSE" runat="server" />
Example
The following example sets the ShowDayHeader as FALSE:
ShowDayHeader="FALSE" />
</form>
Show example
ASP.NET ShowGridLines Property


The ShowGridLines property is used to specify whether or not to display borders between the days in
the calendar.
By default this property is set as FALSE and the grid lines are not displayed. To show the grid lines the
property must be set as TRUE.
Syntax
<asp:Calendar ShowGridLines="TRUE|FALSE" runat="server" />
Example
The following example sets the ShowGridLines as TRUE:
ShowGridLines="TRUE" />
</form>
Show example
ASP.NET ShowNextPrevMonth Property


The ShowNextPrevMonth property is used to specify whether or not to display the next and previous month links in the calendar.
By default this property is set as TRUE and the next and previous month links are displayed. To remove the links the property must be set as FALSE.
Syntax
<asp:Calendar ShowNextPrevMonth="TRUE|FALSE" runat="server" />
Example
The following example sets the ShowNextPrevMonth as FALSE:
ShowNextPrevMonth="FALSE" />
</form>
Show example
ASP.NET ShowTitle Property


The ShowTitle property is used to specify whether or not to display the title in the calendar.
By default this property is set as TRUE and the calendar title are displayed. To remove the title the property must be set as FALSE.
Note: Hiding the title hides the name of the month and the next and previous month links
Syntax
<asp:Calendar ShowTitle="TRUE|FALSE" runat="server" />
Example
The following example sets the ShowTitle as FALSE:
ShowTitle="FALSE" />
</form>
Show example
ASP.NET TitleFormat Property


The TitleFormat property is used to get or set how the title of a calendar is displayed.
Syntax
<asp:Calendar TitleFormat="mode" runat="server" />
Attribute
Description
mode
Specifies how the calendar title is shown

Possible values:
Month
MonthYear (Default)
Example
The following example sets the TitleFormat to display month:
TitleFormat="Month" />
</form>
Show example
ASP.NET TitleStyle Property


The TitleStyle property is used to set or return the style of the title of a calendar.
Syntax
<TitleStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" TitleStyle-style="value" />
Attribute
Description
style
their values
value
Example 1
The following example shows one way to set the TitleStyle in a calendar:
<TitleStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the TitleStyle in a calendar:
TitleStyle-ForeColor="#FF0000" />
</form>
Set TitleStyle of a Calendar control (with declaration and script)
ASP.NET TodayDayStyle Property


The TodayDayStyle property is used to set or return the style of the current date in a calendar.
Syntax
<TodayDayStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" TodayDayStyle-style="value" />
Attribute
Description
style
their values
value
Example 1
The following example shows one way to set the TodayDayStyle in a calendar:
<TodayDayStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the TodayDayStyle in a calendar:
TodayDayStyle-ForeColor="#FF0000" />
</form>
Set TodayDayStyle of a Calendar control (with declaration and script)
ASP.NET TodaysDate Property


The TodaysDate property is used to get or set the current date from a calendar.
If this property is not set, this date will be the date on the server.
Example
The following example shows a outputs today's date:

Sub Page_Load
Response.Write("Today is: ")
Response.Write(cal1.TodaysDate.ToShortDateString())
End Sub
</script>
<asp:Calendar id="cal1" runat="server" />
</form>
Show example
ASP.NET VisibleDate Property


The VisibleDate property is used to get or set the date that specifies the month to display in the calendar.
Example
The following example sets the VisibleDate to 01-Oct-07:
Sub Page_Load
cal1.VisibleDate = DateValue("01-Oct-07")
End Sub
</script>
<asp:Calendar id="cal1" runat="server" />
</form>
Show example
ASP.NET WeekendDayStyle Property


The WeekendDayStyle property is used to set or return the style of the weekends in a calendar.
Syntax
<WeekendDayStyle style="value" />
</asp:Calendar>
or
<asp:Calendar runat="server" WeekendDayStyle-style="value" />
Attribute
Description
style
Specifies the style to set. See the Style Control to see the possible styles and their values
value
Example 1
The following example shows one way to set the WeekendDayStyle in a calendar:
<WeekendDayStyle ForeColor="#FF0000" />
</asp:Calendar>
</form>
Show example
Example 2
The following example shows another way to set the WeekendDayStyle in a calendar:
WeekendDayStyle-ForeColor="#FF0000" />
</form>
Set WeekendDayStyle of a Calendar control (with declaration and script)
ASP.NET CalendarDay Control

Web Server Controls

The CalendarDay control represents a day in a calendar control.
Properties
Property
Description
.NET
Date
The date variable of the date
1.0
DayNumberText
The day number(string) of a date
1.0
IsOtherMonth
Specifies if the date in another month than the one displayed in 1.0
the calendar
IsSelectable
Specifies if the date is selectable
1.0
IsSelected
Specifies if the date is selected
1.0
IsToday
Specifies if the date is today's date
1.0
IsWeekend
Specifies if the date is Saturday or Sunday
1.0


Web Server Controls
ASP.NET Date Property

Complete CalendarDay Control Reference

The Date property is used to get a date variable representing the date.
Example
The following example shows how to get the Date from a selected day in a calendar:
Sub DaySelect(obj As Object, e As DayRenderEventArgs)
If e.Day.IsSelected Then
Label1.Text = e.Day.Date
End If
End Sub
</script>
OnDayRender="DaySelect" />
The selected date is:
<asp:Label id="Label1" runat="server"/>
</form>
Show example
ASP.NET DayNumberText Property


The DayNumberText property is used to get a string representing the day number of a date.
Example
The following example shows how to get the DayNumberText from a selected day in a calendar:
Label1.Text = e.Day.DayNumberText
End If
End Sub
</script>
The selected date is:
</form>
Show example
ASP.NET IsOtherMonth Property


The IsOtherMonth property is used to get whether or not the date is in the month displayed by the calendar.
This property returns "FALSE" if the date is the displayed month.
Example
The following example shows if the selected day is in the current month or not:
If e.Day.IsOtherMonth = "TRUE" Then
Label1.Text = "NO"
Else
Label1.Text = "YES"
End If
End If
End Subv </script>
OnDayRender="DaySelect"/>
The selected date is in the current month:
</form>
Show example
ASP.NET IsSelectable Property


The IsSelectable property is used to get or set whether or not a date is selectable.
This property returns "TRUE" if the date is selectable.
Example
The following example shows a calendar where the weekends are not selectable:
If e.Day.IsWeekend Then
e.Day.IsSelectable = False
End If
End Sub
</script>
The weekends are not selectable
</form>
Show example
ASP.NET IsSelected Property


The IsSelected property is used to get whether or not a date is selected in a calendar control.
This property returns "TRUE" if the date is selected.
Example
The following example shows if the selected day is in the current month or not:
If e.Day.IsOtherMonth = "TRUE" Then
Label1.Text = "NO"
Else
Label1.Text = "YES"
End If
End If
End Sub
</script>
</form>
Show example
ASP.NET IsToday Property


The IsToday property is used to get whether or not the date is the current date.
This property returns "TRUE" if the date is the current date.
Example
The following example shows if the selected day is the current date or not:
If e.Day.IsToday = "TRUE" Then
Label1.Text = "YES"
Else
Label1.Text = "NO"
End If
End If
End Sub
</script>
</form>
Show example
ASP.NET IsWeekend Property


The IsWeekend property is used to get whether or not the date is a Saturday or Sunday.
This property returns "TRUE" if the date is in a weekend.
Example
The following example shows if the selected day is in a weekend or not:
If e.Day.IsWeekend = "TRUE" Then
Label1.Text = "YES"
Else
Label1.Text = "NO"
End If
End If
End Sub
</script>
The selected date is in a weekend:
</form>
Show example
ASP.NET DropDownList Control

Web Server Controls

The DropDownList control is used to create a drop-down list.
Each selectable item in a DropDownList control is defined by a ListItem element!
Tip: This control supports data binding!
Properties
Property
Description
.NET
SelectedIndex
The index of a selected item
1.0
OnSelectedIndexChanged
The name of the function to be executed when the index of the

selected item has changed
1.0
runat

"server"
1.0
ListControl Standard Properties

AppendDataBoundItems, AutoPostBack, CausesValidation, DataTextField,
DataTextFormatString, DataValueField, Items, runat, SelectedIndex,
SelectedItem, SelectedValue, TagKey, Text, ValidationGroup,
The ListControl control covers all the base functions for list controls. Controls that inherits from this
control include the CheckBoxList, DropDownList, ListBox, and RadioButtonList controls.
For a full description, go to ListControl Standard Attributes.


Example
DropdownList
Declare one DropDownList control in an .aspx file. Then create an event handler for the Click event
which displays some text and the selected item, in a Label control.
Web Server Controls
ASP.NET SelectedIndex Property

Complete DropDownList Control Reference

The SelectedIndex property is used to get or set the index number of the selected item in a
DropDownList.
Example
The following example outputs the text of the selected item:
<script runat="Server">
Sub GetName(obj As Object, e As EventArgs)
lbl.Text = ddList.SelectedItem.Text
End Sub
</script>
<form runat="Server">
Select a name from the list:
<asp:DropDownList id="ddList" runat="Server">
<asp:ListItem Text="Peter" />
<asp:ListItem Text="Lois" />
<asp:ListItem Text="Cleveland" />
<asp:ListItem Text="Quagmire" />
<asp:ListItem Text="Joe" />
</asp:DropDownList>
<asp:Button Text="Select"
OnClick="GetName" Runat="Server" />
<br />
Name is:
<asp:Label id="lbl" Runat="Server"/>
</form>
Show example
Complete DropDownList Control Reference
ASP Source:
Output Result:
mess.Text="You selected " & drop1.SelectedItem.Text
End Sub
</script>
Item11
Item
<!DOCTYPE html>
<html>
<body>
<asp:DropDownList id="drop1" runat="server">
<asp:ListItem>Item 1</asp:ListItem>
</asp:DropDownList>
<asp:Button Text="Submit" OnClick="submit" runat="server"/>
<p><asp:label id="mess" runat="server"/></p>
</form>
</body>
</html>
Submit
ASP.NET HyperLink Control

Web Server Controls

The HyperLink control is used to create a hyperlink.
Properties
Property
Description
.NET
ImageUrl
The URL of the image to display for the link
1.0
NavigateUrl
The target URL of the link
1.0
runat

"server"
1.0
Target
The target frame of the URL
1.0
Text
The text to display for the link
1.0


Example
Hyperlink
Declare a HyperLink control in an .aspx file.
Web Server Controls
ASP.NET ImageUrl Property

Complete HyperLink Control Reference

The ImageUrl property is used to set or return the URL of an image to display for the hyperlink.
Syntax
<asp:HyperLink ImageUrl="URL" runat="server" />
Attribute
Description
URL
The URL of the image to use
Example
The following example sets the ImageUrl on a HyperLink control:
<asp:HyperLink id="link1" runat="server"
NavigateUrl="http://www.w3schools.com" ImageUrl="img.gif" />
</form>
Show example
ASP.NET NavigateUrl Property


The NavigateURL property is used to set or return the URL of a HyperLink control.
Syntax
<asp:HyperLink NavigateUrl="URL" runat="server" />
Attribute
Description
URL
A string that specifies the URL of the hyperlink control
Example
The following example sets the URL of a HyperLink control:
<asp:HyperLink id="link1" runat="server" Text="W3Schools"
NavigateUrl="http://www.w3schools.com" />
</form>
Show example
ASP.NET Target Property


The Target property is used to set or return the target of a HyperLink control.
Syntax
<asp:HyperLink Target="target" runat="server" />
Attribute
Description
target
Where to open the target URL.

_blank - the target URL will open in a new window
_self - the target URL will open in the same frame as it was clicked
_parent - the target URL will open in the parent frameset
_top - the target URL will open in the full body of the window
Example
The following example sets the Target on a HyperLink control:
NavigateUrl="http://www.w3schools.com" Target="_blank" />
</form>
Show example
ASP.NET Text Property


The Text property is used to set or return the text of a HyperLink control.
Syntax
<asp:HyperLink Text="string" runat="server" />
Attribute
Description
string
A string that specifies the text on the hyperlink control
Example
The following example sets the text on a HyperLink control:
NavigateUrl="http://www.w3schools.com" />
</form>
Show example
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
<asp:HyperLink
ImageUrl="/banners/w6.gif"
NavigateUrl="http://www.w3schools.com"
Text="Visit W3Schools!"
Target="_blank"
runat="server" />
</form>
</body>
</html>
WEB HOSTING
ASP.NET Image Control
Best Web Hosting

PHP MySQL Hosting
Web Server Controls
Best Hosting Coupons

UK Reseller Hosting
Cloud Hosting
The Image control is used to display an image.
Top Web Hosting

$3.98 Unlimited Hosting
Properties
Premium Website Design
Property
Description
.NET
AlternateText
An alternate text for the image
1.0
DescriptionUrl
The location to a detailed description for the image
2.0
GenerateEmptyAlternateText
Specifies whether or not the control creates an empty string as an

alternate text
2.0
ImageAlign
Specifies the alignment of the image
1.0
ImageUrl
The URL of the image to display for the link
1.0
runat
WEB BUILDING
Download XML Editor
FREE Website BUILDER
Build a FREE Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript,
XML, PHP, and ASP
W3SCHOOLS BOOKS
AccessKey, Attributes, BackColor, BorderColor, BorderStyle, BorderWidth, CssClass,

Enabled, Font, EnableTheming, ForeColor, Height, IsEnabled, SkinID, Style, TabIndex,
ToolTip, Width
New Books:
HTML, CSS
JavaScript, and Ajax

STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE
Share with
Example
Image
Declare an Image control in an .aspx file.
Web Server Controls
REPORT
W3Schools is optimized for learning, testing,
ERROR
HOME
TOP
PRINT
FORUM
ABOUT
ASP.NET AlternateText Property

Complete Image Control Reference

The AlternateText property is used to set or return the alternate text of an image.
This property specifies the text to display if the image is not available.
The alternate text displays as a ToolTip if your browser supports it (Internet Explorer)
Syntax
<asp:Image AlternateText="text" runat="server" />
Attribute
Description
text
Specifies an alternate text for the image
Example
The following example sets the AlternateText for an Image control (image file does not exist):
<asp:Image id="Img1" ImageUrl="missing_img.gif"
runat="server" AlternateText="Image Text" />
</form>
Show example
ASP.NET ImageAlign Property


The ImageAlign property is used to set or return the alignment of the image.
Syntax
<asp:Image ImageAlign="align" runat="server" />
Attribute
Description
align
Specifies the alignment of the image.

Possible values:
NotSet
AbsBottom
AbsMiddle
BaseLine
Bottom
Left
Middle
Right
TextTop
Top
Example
The following example sets the ImageAlign for an Image control:
<asp:Image id="Img1" runat="server"
ImageUrl="img.gif" ImageAlign="Right" />
</form>
Show example
ASP.NET ImageUrl Property


The ImageUrl property is used to set or return the URL of an image to display.
Syntax
<asp:Image ImageUrl="URL" runat="server" />
Attribute
Description
URL
Example
The following example sets the ImageUrl for an Image control:
<asp:Image id="Img1" runat="server" ImageUrl="img.gif" />
</form>
Show example
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
<asp:Image
runat="server"
AlternateText="W3Schools"
ImageUrl="/banners/w6.gif"/>
</form>
</body>
</html>
ASP.NET ImageButton Control

Web Server Controls

The ImageButton control is used to display a clickable image.
Properties
Property
Description
.NET
CausesValidation
Specifies if a page is validated when an ImageButton control is

clicked
1.0
CommandArgument
Additional information about the command to perform
1.0
CommandName
The command associated with the Command event
1.0
GenerateEmptyAlternateText
Specifies whether or not the control creates an empty string as

an alternate text
2.0
OnClientClick
The name of the function to be executed when the image is

clicked
2.0
PostBackUrl
The URL of the page to post to from the current page when the 2.0
ImageButton control is clicked
runat

"server"
1.0
TagKey
1.0
ValidationGroup
The group of controls for which the ImageButton control causes 2.0
validation when it posts back to the server
Note: The properties of the Image control can also be used on the ImageButton control.


Example
ImageButton
Declare one ImageButton control and one Label control in an .aspx file. When the user clicks on the
image, the getCoordinates subroutine is executed. The subroutine sends the message "Coordinates: "
and the x and y coordinates of the click to the Label control.
Web Server Controls
ASP.NET CausesValidation Property

Complete ImageButton Control Reference

The CausesValidation property specifies if a page is validated when a ImageButton control is clicked.
Page validation is performed when a button is clicked by default.
This property is mostly used to prevent validation when a cancel or reset button is clicked.
Syntax
<asp:ImageButton CausesValidation="TRUE|FALSE" runat="server" />
Example
The following example removes validation when an ImageButton is clicked:
<asp:ImageButton id="button1" runat="server"
CausesValidation="FALSE" ImageUrl="img.gif" />
</form>
Show example
ASP.NET ValidationGroup Property


The OnClientClick property is used to sets a client side script to be run when the ImageButton control is clicked.
The script specified in this property is run by the ImageButton's event "OnClick" in addition to the predefined script.
Syntax
<asp:ImageButton OnClientClick="func" runat="server" />
Attribute
Description
func
Client side script to be run when ImageButton is clicked
Example
The following example runs two scripts when the ImageButton control is clicked:
Sub script1(obj As Object, e As ImageClickEventArgs)
lblMsg.Text="Hello!"
End Sub
</script>
<asp:ImageButton OnClick="script1" OnClientClick="script2()"
ImageUrl="img.gif" runat="server" />
<br />
<asp:label id="lblMsg" runat="server" />
</form>
<script type="text/javascript">
function script2()
{
return confirm('Hello!');
}
</script>
Show example
ASP.NET PostBackUrl Property


The PostBackUrl property is used to gets or sets the URL of the page to post when the ImageButton
control is clicked.
Syntax
<asp:ImageButton PostBackUrl="string" runat="server" />
Attribute
Description
string
String specifying the URL of the page to post to. Default is an empty string, this
causes the page to post back to itself
Example
The following example sets the post URL of a ImageButton control:
Name:<asp:textbox id="TextBox1" runat=Server />
<asp:ImageButton id="Button1" ImageUrl="img.gif"
PostBackUrl="demo_postbackurl.aspx" runat="Server" />
</form>
Show example


The ValidationGroup property specifies which group of controls is validated on validation.
This property is mostly used when there are several buttons in a form.
Syntax
<asp:ImageButton ValidationGroup="group" runat="server" />
Attribute
Description
group
The validation group to validate.
Example
The following example validates the specific validation group:
<asp:textbox id="tb1" runat=Server />

<asp:requiredfieldvalidator id="ReqField1" controltovalidate="tb1"
validationgroup="valGroup1" errormessage="Required" runat=Server />
<asp:ImageButton id="Button2" causesvalidation=true
validationgroup="valGroup2" ImageUrl="img.gif" runat=Server />
Show example
ASP Source:
Output Result:
Sub getCoordinates(sender As Object, e As ImageClickEventArgs)
mess.Text="Coordinates: " & e.x & ", " & e.y
End Sub
</script>
Click on the image:
<!DOCTYPE html>
<html>
<body>
<p>Click on the image:</p>
<asp:ImageButton
runat="server"
ImageUrl="smiley.gif"
OnClick="getCoordinates"/>
<p><asp:label id="mess" runat="server"/></p>
</form>
</body>
</html>
ASP.NET Label Control

Web Server Controls

The Label control is used to display text on a page. The text is programmable.
Note:This control lets you apply styles to its content!
Properties
Property
Description
runat
Text
The text to display in the label


Example
Label
Declare one Label control, one TextBox control, and one Button control in an .aspx file. When the user
clicks on the button, the submit subroutine is executed. The subroutine copies the content of the
TextBox control to the Label control.
Web Server Controls
ASP Source:
Output Result:
Sub submit(Sender As Object, e As EventArgs)
label1.Text=txt1.Text
End Sub
</script>
Write some text:
<!DOCTYPE html>
<html>
<body>
Write some text:
<asp:TextBox id="txt1" Width="200" runat="server" />
<asp:Button id="b1" Text="Copy to Label" OnClick="submit"
runat="server" />
<p><asp:Label id="label1" runat="server" /></p>
</form>
</body>
</html>
Copy to Label
ASP.NET LinkButton Control

Web Server Controls

The LinkButton control is used to create a hyperlink button.
Note: This control looks like a HyperLink control but has the same functionality as the Button control.
Properties
Property
Description
.NET
CausesValidation
Specifies if a page is validated when a LinkButton control is clicked
1.0
CommandArgument
Additional information about the command to perform
1.0
CommandName
The command associated with the Command event
1.0
OnClientClick
The name of the function to be executed when the LinkButton is clicked
2.0
PostBackUrl
The URL of the page to post to from the current page when the LinkButton control is clicked
2.0
runat
1.0
Text
The text on the LinkButton
1.0
ValidationGroup
The group of controls for which the LinkButton control causes validation when it posts back to the 2.0
server


Example
LinkButton
Declare one LinkButton control and one Label control in an .aspx file. When the user clicks on the link, the lbClick subroutine is executed. The subroutine
sends the text "You clicked the LinkButton control" to the Label control.
Web Server Controls
ASP.NET OnClientClick Property

Complete LinkButton Control Reference

The OnClientClick property is used to sets a client side script to be run when the LinkButton control is clicked.
The script specified in this property is run by the LinkButton's event "OnClick" in addition to the predefined script.
Syntax
<asp:LinkButton OnClientClick="func" runat="server" />
Attribute
Description
func
Client side script to be run when LinkButton is clicked
Example
The following example runs two scripts when the LinkButton control is clicked:
Sub script1(obj As Object, e As EventArgs)
lblMsg.Text="Hello!"
End Sub
</script>
<html>
<body>
<asp:LinkButton OnClick="script1" OnClientClick="script2()"
Text="Click Me" runat="server" />
<br />
<asp:label id="lblMsg" runat="server" />
</form>
<script type="text/javascript">
function script2()
{
return confirm('Hello!');
}
</script>
</body>
</html>
Show example
ASP.NET PostBackUrl Property


The PostBackUrl property is used to gets or sets the URL of the page to post when the LinkButton
control is clicked.
Syntax
<asp:LinkButton PostBackUrl="string" runat="server" />
Attribute
Description
string
String specifying the URL of the page to post to. Default is an empty string, this
causes the page to post back to itself
Example
The following example sets the post URL of a LinkButton control:
Name:<asp:TextBox id="TextBox1" runat=Server />
<asp:LinkButton id="Button1" Text="Submit"
PostBackUrl="demo_postbackurl.aspx" runat="Server" />
</form>
Show example


The Text property is used to set or return the text on a LinkButton control.
Note: This control looks like a HyperLink control but has the same functionality as the Button control.
Syntax
<asp:LinkButton Text="string" runat="server" />
Attribute
Description
string
A string that specifies the text on the LinkButton control
Example
The following example sets the text on a LinkButton control:
<asp:LinkButton id="lbt1" runat="server" Text="Submit" />
</form>
Show example


The ValidationGroup property specifies which group of control is validated on validation.
This property is mostly used when there are several buttons in a form.
Syntax
<asp:LinkButton ValidationGroup="group" runat="server" />
Attribute
Description
group
The group of controls to validate.
Example
The following example validates the specific validation group:
<asp:TextBox id="tb1" runat=Server />

<asp:RequiredFieldValidator id="ReqField1" ControlToValidate="tb1"
ValidationGroup="valGroup1" ErrorMessage="Required" runat="server" />
<asp:LinkButton id="Button2" Text="Validate" CausesValidation="True"
ValidationGroup="valGroup2" runat="server" />
Show example
ASP Source:
Output Result:
Sub lblClick(sender As Object, e As EventArgs)
Label1.Text="You clicked the LinkButton control"
End Sub
</script>
Click me!
<!DOCTYPE html>
<html>
<body>
<asp:LinkButton Text="Click me!" OnClick="lblClick"
runat="server" />
<p><asp:Label id="Label1" runat="server" /></p>
</form>
</body>
</html>
ASP.NET ListBox Control

Web Server Controls

The ListBox control is used to create a single- or multi-selection drop-down list.
Each selectable item in a ListBox control is defined by a ListItem element!
Properties
Property
Description
.NET
Rows
The number of rows displayed in the list
1.0
SelectionMode
Allows single or multiple selections
1.0

The ListControl control covers all the base functions for list controls. Controls that inherits from this control include the CheckBoxList, DropDownList, ListBox,
and RadioButtonList controls.


Example
Listbox
Declare one ListBox control in an .aspx file. Then create an event handler for the Click event which displays some text and the selected item, in a Label
control.
Web Server Controls
ASP.NET Rows Property

Complete ListBox Control Reference

The Rows property is used to get or set the number of rows visible (without scrolling) in the ListBox.
Syntax
<asp:ListBox Rows="num" runat="server">
Some Content
</asp:ListBox>
Attribute
Description
num
Specifies the number of rows visible (without scrolling) in the ListBox.
Example
The following example sets the Rows property of a ListBox control:
<asp:ListBox id="lb1" Rows="5" runat="server">
<asp:ListItem Value="Item1" />
</asp:ListBox>
</form>
Show example
ASP.NET SelectionMode Property


The SelectionMode property is used to get or set how a user is allowed to select ListBox items.
Syntax
<asp:ListBox SelectionMode="mode" runat="server">
Some Content
</asp:ListBox>
Attribute
Description
mode
Specifies how a users is allowed to select items.

Possible values:
Single - Default. Multiple items can not be selected
Multiple - Multiple items can be selected
Example
The following example sets the SelectionMode of a ListBox control:
SelectionMode="Multiple" />
</form>
Show example
ASP Source:
Output Result:
Sub submit(Sender As Object,e As EventArgs)
mess.Text="You selected " & drop1.SelectedItem.Text
End Sub
</script>
Item
Item11
Item 2
Item 2
Item 3
Item43
Item
Item54
Item
<!DOCTYPE html>
<html>
<body>
<asp:ListBox id="drop1" rows="3" runat="server">
<asp:ListItem selected="true">Item 1</asp:ListItem>
</asp:ListBox>
<asp:Button Text="Submit" OnClick="submit" runat="server" />
<p><asp:label id="mess" runat="server" /></p>
</form>
</body>
</html>
Submit
ASP.NET ListItem Control

Web Server Controls

The ListItem control creates an item in a list.
This control is used with the list controls such as <asp:ListBox>, <asp:RadioButtonList> and
<asp:BulletedList>.
Syntax
<asp:ListItem
Enabled="True|False"
Selected="True|False"
Text="label"
Value="value" />
Properties
Property
Description
.NET
Attributes
Optional. A collection of attribute name and value pairs for the

ListItem that are not directly supported by the class
1.0
Enabled
Optional. Specifies if the item is enabled or disabled
2.0
Selected
Optional. Specifies whether or not the item is selected
1.0
Text
Optional. The text displayed in the ListItem
1.0
Value
Optional. The value of the the ListItem.
1.0


It is possible to use the Text or Value properties and the inner HTML text to set the text displayed for
an item in the list.
Example
<asp:ListItem Value="Text1" Text="Text2">Text3</asp:ListItem>
Depending on the combination of the three, different texts are shown and values used. The table below
shows all possible combinations and their results:
Inner HTML
Text Property
Value Property
Text Shown
Value Used
Set
Set
Set
Inner HTML
Value Property
Set
Set
Not set
Inner HTML
Inner HTML
Set
Not set
Set
Inner HTML
Value Property
Set
Not set
Not set
Inner HTML
Inner HTML
Not set
Set
Set
Text Property
Value Property
Not set
Set
Not set
Text Property
Text Property
Not set
Not set
Set
Value Property
Value Property
Not set
Not set
Not set
Not set
Not set
Tips and Notes

Note: The Text and Value properties have a default value of an empty string. Because of this it is
possible to have empty list items.
Examples
Basic ListItem in BulletedList
A BulletedList control with two ListItems in an .aspx file.
ListItems with different properties in ListBox
A ListBox control with some ListItems in an .aspx file. The items in the list uses different properties to
show the ListItem text.
ListItem disabled in ListBox
A ListBox control with one of the ListItems disabled.
ListItem selected in RadioButtonList
A RadioButtonList control with one of the ListItems selected.
Web Server Controls
ASP.NET Enabled Property

Complete ListItem Control Reference

The Enabled property is used to set or return the whether or not the ListItem is enabled by default.
If this property is set to TRUE the ListItem is Enabled by default, otherwise FALSE. Default is TRUE.
Syntax
<asp:ListItem Enabled="True|False" runat="server" />
Example
The following example disables a ListItem in a ListBox control:
<asp:ListBox runat="server">
<asp:ListItem Text="Item1" Enabled="False"/>
<asp:ListItem Text="Item2" />
</asp:ListBox>
</form>
Show example
ASP.NET Selected Property


The Selected property is used to set or return the whether or not the ListItem is selected by default.
If this property is set to TRUE the ListItem is selected by default, otherwise FALSE. Default is FALSE.
Syntax
<asp:ListItem Selected="True|False" runat="server" />
Example
The following example sets the Selected ListItem in a ListBox control:
<asp:ListItem Text="Item1" Selected="True"/>
</asp:ListBox>
</form>
Show example


The Text property is used to set or return the text of a ListItem control.
Syntax
<asp:ListItem Text="string" runat="server" />
Attribute
Description
string
A string that specifies the text of the ListItem control
Example
Inner HTML
Text Property
Value Property
Text Shown
Value Used
Set
Set
Set
Inner HTML
Value Property
Set
Set
Not set
Inner HTML
Inner HTML
Set
Not set
Set
Inner HTML
Value Property
Set
Not set
Not set
Inner HTML
Inner HTML
Not set
Set
Set
Text Property
Value Property
Not set
Set
Not set
Text Property
Text Property
Not set
Not set
Set
Value Property
Value Property
Not set
Not set
Not set
Not set
Not set
Tips and Notes

Example
The following example sets the text of a ListItem in a ListBox control:
</asp:ListBox>
</form>
Show example
ASP.NET Value Property


The Value property is used to set or return the value of a ListItem control.
Syntax
<asp:ListItem Value="string" runat="server" />
Attribute
Description
string
A string that specifies the value of the ListItem control
Example
Inner HTML
Text Property
Value Property
Text Shown
Value Used
Set
Set
Set
Inner HTML
Value Property
Set
Set
Not set
Inner HTML
Inner HTML
Set
Not set
Set
Inner HTML
Value Property
Set
Not set
Not set
Inner HTML
Inner HTML
Not set
Set
Set
Text Property
Value Property
Not set
Set
Not set
Text Property
Text Property
Not set
Not set
Set
Value Property
Value Property
Not set
Not set
Not set
Not set
Not set
Tips and Notes

Example
The following example sets the Value of a ListItem in a ListBox control:
</asp:ListBox>
</form>
Show example
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
Item1
Item2
<asp:BulletedList runat="server">
</asp:BulletedList>
</form>
</body>
</html>
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
Text1
Text1
Text2
Text2
Text3
Text3
<asp:ListItem Text="Text1" />
<asp:ListItem Value="Text3" />
</asp:ListBox>
</form>
</body>
</html>
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
Item1
Item1
Item2
Item2
Item3
Item3
<asp:ListItem Text="Item4" enabled="False"/>
</asp:ListBox>
</form>
</body>
</html>
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
Item1
Item2
Item3
<asp:RadioButtonList runat="server">
<asp:ListItem Text="Item4" selected="True"/>
</form>
Item4
</body>
</html>
ASP.NET Literal Control

Web Server Controls

The Literal control is used to display text on a page. The text is programmable.
Note: This control does not let you apply styles to its content!
Properties
Property
Description
.NET
Mode
2.0
runat
1.0
Text
Specifies the text to display
1.0

Examples
Literal
Declare one Literal control which displays some static text in an .aspx file.
Literal 2
Declare one Literal control and one Button control in an .aspx file. When the user clicks on the button,
the submit subroutine is executed. The subroutine changes the text of the Literal control.
Web Server Controls

Complete Literal Control Reference

The Text property is used to set or return the text of a Literal control.
If the text is set in the ASP.NET code the (like in the example below) text is HTML decoded before it is
displayed. However, if the property is set programmatically or set as text between the opening and
closing tags of the control, the caption is not HTML decoded.
Syntax
<asp:HyperLink Text="string" runat="server" />
Attribute
Description
string
A string that specifies the text in the literal control
Example
The following example sets the text for the Literal control:
<asp:Literal runat="server" Text="W3Schools" />
</form>
Show example
Complete Literal Control Reference
ASP.NET Panel Control

Web Server Controls

The Panel control is used as a container for other controls.
Tip: This control is often used to generate controls by code and to display and hide groups of controls.
Note: This control renders as an HTML <div> element.
Properties
Property
Description
.NET
BackImageUrl
Specifies a URL to an image file to display as a background for

this control
1.0
DefaultButton
Specifies the ID of the default button in the Panel
2.0
Direction
Specifies the content display direction of the Panel
2.0
GroupingText
Specifies the caption for the group of controls in the Panel
2.0
HorizontalAlign
Specifies the horizontal alignment of the content
1.0
runat

"server"
1.0
ScrollBars
Specifies the position and visibility of scroll bars in the Panel
2.0
Wrap
Specifies whether the content should wrap or not
1.0


Example
Panel
Declare one Panel control, one CheckBox control, and one Button control in an .aspx file. When the
user checks the CheckBox control, and the clicks the Refresh button, the Panel control will hide.
Web Server Controls
ASP.NET BackImageUrl Property

Complete Panel Control Reference

The BackImageUrl property is used to set or return the URL of an image to use as background image
for the Panel Control.
Syntax
<asp:Panel BackImageUrl="URL" runat="server">
Some Content
</asp:Panel>
Attribute
Description
URL
Example
The following example sets the BackImageUrl for a Panel control:
<asp:Panel id="Pan1" runat="server" BackImageUrl="img.gif">
Hello!
</asp:Panel>
</form>
Show example
ASP.NET DefaultButton Property


The DefaultButton property is used to set or return the id of the default button for the Panel Control.
This property is used to specify which button gets clicked when the Panel control has focus and the
"ENTER" key is pressed.
Syntax
<asp:Panel DefaultButton="button_id" runat="server">
Some Content
</asp:Panel>
Attribute
Description
button_id
The id of the button to use as default button
Example
The following example sets the DefaultButton for a Panel control:
<asp:Panel runat="server" DefaultButton="bt1">
<asp:TextBox runat="server" />
<asp:Button id="bt1" Text="Default" runat="server" />
</asp:Panel>
</form>
Show example
ASP.NET Direction Property


The Direction property is used to set or return the ontent display direction of the Panel.
This property is used specify the display direction for controls that include text in the Panel.
Syntax
<asp:Panel Direction="direction" runat="server">
Some Content
</asp:Panel>
Attribute
Description
direction
Specifies the content display direction of the panel

Possible values:
NotSet - Default. The content direction is not set
LeftToRight - The content direction is left to right
RightToLeft - The content direction is right to left
Example
The following example changes the Direction property for a Panel control:
<asp:Panel id="pan1" runat="server" Direction="RightToLeft">
Hello!
</asp:Panel>
</form>
Show example
ASP.NET GroupingText Property


The GroupingText property is used to set or return caption text for the group of controls in the Panel Control.
This property is used to display a frame and caption for the Panel control.
Syntax
<asp:Panel GroupingText="string" runat="server">
Some Content
</asp:Panel>
Attribute
Description
string
The string to display as caption text for the Panel
Example
The following example sets the GroupingText for a Panel control:
<asp:Panel id="pan1" runat="server" GroupingText="Panel" >
Hello!
</asp:Panel>
</form>
Show example
ASP.NET HorizontalAlign Property


The HorizontalAlign property is used to set or return horizontal alignment of the content in the Panel Control.
Syntax
<asp:Panel HorizontalAlign="align" runat="server">
Some Content
</asp:Panel>
Attribute
Description
align
Specifies the horizontal alignment of the content.

Possible values:
Center
Justify
Left
NotSet (Default)
Right
Example
The following example sets the HorizontalAlign property of a Panel control:
<asp:Panel id="pan1" runat="server" HorizontalAlign="Right" >
Hello!
</asp:Panel>
</form>
Show example
ASP.NET ScrollBars Property


The ScrollBars property is used to set or return the position and visibility of scroll bars in the Panel
control
Syntax
<asp:Panel ScrollBars="value" runat="server">
Some Content
</asp:Panel>
Attribute
Description
value
Specifies the which scrollbars are shown or not shown.

Possible values:
None - Default. No scroll bars are shown
Horizontal - Only a horizontal scroll bar is shown
Vertical - Only a vertical scroll bar is shown
Both - Horizontal and vertical scroll bars are shown
Auto - Horizontal, vertical, or both scroll bars are shown if needed
Example
The following example sets the ScrollBars property to "Auto" in a Panel control:
<asp:Panel id="pan1" runat="server"
Height="100px" ScrollBars="Auto">
Some content
</asp:Panel>
</form>
Show example
ASP.NET Wrap Property


The Wrap property is used to set or return whether or not content should wrap in the Panel control.
Syntax
<asp:Panel Wrap="TRUE|FALSE" runat="server">
Some Content
</asp:Panel>
Example
The following example sets the Wrap property to "FALSE" in a Panel control:
<asp:Panel ID="Pan1" Width="250px"
Wrap="FALSE" runat="server">
Some content
</asp:Panel>
</form>
Show example
ASP Source:
Output Result:
Sub Page_Load(sender As Object, e As EventArgs)
if check1.Checked then
panel1.Visible=false
else
panel1.Visible=true
end if
End Sub
</script>
Hello World!
Hide Panel control

Reload
<!DOCTYPE html>
<html>
<body>
<asp:Panel id="panel1"
runat="server" BackColor="#ff0000"
Height="100px" Width="100px">
Hello World!
</asp:Panel>
<asp:CheckBox id="check1"
Text="Hide Panel control"
runat="server"/>
<br /><br />
<asp:Button Text="Reload" runat="server" />
</form>
</body>
</html>
ASP.NET PlaceHolder Control

Web Server Controls

The PlaceHolder control is used to reserve space for controls added by code.
Note: The PlaceHolder control does not produce any visible output (it only acts as a container for other
controls on the Web page).
Properties
Property
Description
runat


Web Server Controls
ASP.NET RadioButton Control

Web Server Controls

The RadioButton control is used to display a radio button.
Tip: To create a set of radio buttons using data binding, use the RadioButtonList control!
Properties
Property
Description
AutoPostBack
A Boolean value that specifies whether the form should be posted immediately after the Checked property has
changed or not. Default is false
Checked
A Boolean value that specifies whether the radio button is checked or not
id
GroupName
The name of the group to which this radio button belongs
OnCheckedChanged
The name of the function to be executed when the Checked property has changed
runat
Text
The text next to the radio button
TextAlign
On which side of the radio button the text should appear (right or left)
Example
Radiobutton
Declare three RadioButton controls, 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 may respond in three ways: if the radiobutton with id="red" is selected, the server sends the message "You selected Red"
to the Label control. If the radiobutton with id="green" is selected, the server sends the message "You selected Green" to the Label control. If the
radiobutton with id="green" is selected, the server sends the message "You selected Blue" to the Label control.
Web Server Controls
ASP Source:
Sub submit(Sender As Object,
if red.Checked then
Label1.Text="You selected "
elseIf green.Checked then
elseIf blue.Checked then
end if
End Sub
</script>
Output Result:
Select your favorite color:

Red
Green
Blue
e As EventArgs)
& red.Text
& green.Text
Submit
& blue.Text
<!DOCTYPE html>
<html>
<body>
Select your favorite color:
<br />
<asp:RadioButton id="red" Text="Red" Checked="True"
GroupName="colors" runat="server"/>
<br />
<asp:RadioButton id="green" Text="Green"
<br />
<asp:RadioButton id="blue" Text="Blue"
<br />
<asp:Button text="Submit" OnClick="submit" runat="server"/>
<p><asp:Label id="Label1" runat="server"/></p>
</form>
</body>
</html>
ASP.NET RadioButtonList Control

Web Server Controls

The RadioButtonList control is used to create a group of radio buttons.
Each selectable item in a RadioButtonList control is defined by a ListItem element!
Properties
Property
Description
.NET
CellPadding
The amount of pixels between the border and the contents of the
table cell
1.0
CellSpacing
The amount of pixels between table cells
1.0
RepeatColumns
The number of columns to use when displaying the radio button

group
1.0
RepeatDirection
Specifies whether the radio button group should be repeated

horizontally or vertically
1.0
RepeatLayout
The layout of the radio button group
1.0
runat
TextAlign
On which side of the radio button the text should appear
1.0

The ListControl control covers all the base functions for list controls. Controls that inherits from this
control include the CheckBoxList, DropDownList, ListBox, and RadioButtonList controls.


Example
RadiobuttonList
Declare one RadioButtonList control, one Button control, and one Label control in an .aspx file. Then we
create an event handler for the Click event which displays some text and the selected item, in a Label
control.
Web Server Controls

Complete RadioButtonList Control Reference

The CellPadding property is used to get or set the amount of pixels between the border and the
contents of the table cell.
Note: This function only works if the RepeatLayout property is set to "Table"
Syntax
<asp:RadioButtonList CellPadding="pixels" runat="server">
Some Content
</asp:RadioButtonList >
Attribute
Description
pixels
Specifies the amount of pixels between the border and the contents of the table
cell.
Example
The following example sets the CellPadding property of a RadioButtonList control:
<asp:RadioButtonList id="rb1"
runat="server" CellPadding="15">
Some content
</form>
Show example


The CellSpacing property is used to get or set the amount of pixels between table cells in the
RadioButtonList.
Note: This function only works if the RepeatLayout property is set to "Table" (default).
Syntax
<asp:RadioButtonList CellSpacing="pixels" runat="server">
Some Content
Attribute
Description
pixels
Specifies the amount of pixels between the table cells.
Example
The following example sets the CellSpacing property of a RadioButtonList control:
runat="server" CellSpacing="15">
Some content
</form>
Show example
ASP.NET RepeatColumns Property


The RepeatColumns property is used to get or set the number of columns to use when displaying the radio button list.
Syntax
<asp:RadioButtonList RepeatColumns="num" runat="server">
Some Content
Attribute
Description
num
Specifies the number of columns to display. Default is "1"
Example
The following example sets the RepeatColumns property to "2" in a RadioButtonList control:
runat="server" RepeatColumns="2">
Some content
</form>
Show example
ASP.NET RepeatDirection Property


The RepeatDirection property is used to get or set if the items in the RadioButtonList are displayed vertically or horizontally.
Syntax
<asp:RadioButtonList RepeatDirection="mode" runat="server">
Some Content
Attribute
Description
mode
Specifies the layout direction of the items in the RadioButtonList.

Possible values:
Horizontal - Items are displayed horizontally
Vertical - Default. Items are displayed vertically
Example
The following example sets the RepeatDirection of a RadioButtonList control:
runat="server" RepeatDirection="Horizontal">
Some content
</form>
Show example
ASP.NET RepeatLayout Property


The RepeatLayout property is used to get or set how items are displayed in the RadioButtonList.
Syntax
<asp:RadioButtonList RepeatLayout="mode" runat="server">
Some Content
Attribute
Description
mode
Specifies the layout of the items in the RadioButtonList.

Possible values:
Flow - Items are not displayed in a table
Table - Default. Items are displayed in a table
Example
The following example sets the RepeatLayout of a RadioButtonList control:
runat="server" RepeatLayout="Flow">
Some content
</form>
Show example
ASP.NET TextAlign Property


The TextAlign property is used to get or set the text alignment for the text of the RadioButtonList
items.
Syntax
<asp:RadioButtonList TextAlign="align" runat="server">
Some Content
Attribute
Description
align
Specifies the alignment of the text for the list item

Possible values:
Left
Right (default)
Example
The following example sets the TextAlign property to "Left" in a RadioButtonList control:
runat="server" TextAlign="Left">
Some content
</form>
Show example
ASP.NET BulletedList Control

Web Server Controls

The BulletedList control creates a list in bullet format.
Each item in a BulletedList control is defined by a ListItem element!
Note: This class is new in ASP.NET 2.0.
Properties
Property
Description
.NET
BulletImageUrl
Specifies the URL of a custom bullet list image. Used if "BulletStyle"

is "CustomImage"
2.0
BulletStyle
Specifies the style of the bullet list
2.0
DisplayMode
Specifies the type of list displayed
2.0
FirstBulletNumber
Specify the start number of list items in an ordered list
2.0
runat
Required. Specifies that the control is a server control. Must be set

to "server"
1.0
Target
Specifies where to open the target URL
2.0

AppendDataBoundItems, CausesValidation, DataTextField, DataTextFormatString,
DataValueField, Items, ValidationGroup
The ListControl control covers all the base functions for list controls. The properties above applies to
the BulletedList control.


Web Server Controls
ASP.NET BulletImageUrl Property

Complete BulletedList Control Reference

The BulletImageUrl property is used to get or set the URL of the image used when the BulletStyle
property is set to "CustomImage".
Syntax
<asp:BulletedList BulletImageUrl="url" runat="server">
Some Content
</asp:BulletedList>
Attribute
Description
url
String specifying the URL of image to use as bullet marker
Example
The following example sets the BulletImageUrl of a BulletedList control:
<asp:BulletedList id="bl1" runat="server"
BulletImageUrl="image.gif">
Some content
</asp:BulletedList>
</form>
Show example
ASP.NET BulletStyle Property


The BulletStyle property is used to get or set the style of the bullet list marker.
Syntax
<asp:BulletedList BulletStyle="style" runat="server">
Some Content
</asp:BulletedList>
Attribute
Description
style
Specifies the style of the list item marker.

Possible values:
NotSet - Not set
Circle - Empty circle
Disc - Filled circle
Square - Filled square
Numbered - Number
LowerAlpha - Lowercase letter
UpperAlpha - Uppercase letter
LowerRoman - Lowercase Roman numeral
UpperRoman - Uppercase Roman numeral
CustomImage - Custom image (defined by the "BulletImageUrl" property)
Example
The following example sets the BulletStyle of a BulletedList control:
<asp:BulletedList id="bl1"
runat="server" BulletStyle="Numbered">
Some content
</asp:BulletedList>
</form>
Show example
ASP.NET DisplayMode Property


The DisplayMode property is used to get or set the type of list displayed.
Syntax
<asp:BulletedList DisplayMode="mode" runat="server">
Some Content
</asp:BulletedList>
Attribute
Description
mode
Specifies the list item display mode.

Possible Values:
Text - Default. Standard Text
HyperLink - Hyperlink
LinkButton - Hyperlink Button
Example
The following example sets the DisplayMode of a BulletedList control:
<asp:Bulletedlist DisplayMode="HyperLink"
id="bl1" runat="server">
<asp:ListItem Text="W3Schools"
Value="http://www.w3schools.com/" />
</asp:Bulletedlist>
</form>
Show example
ASP.NET FirstBulletNumber Property


The FirstBulletNumber property is used to get or set the number of the first item in an ordered
BulletedList control.
Syntax
<asp:BulletedList FirstBulletNumber="num" runat="server">
Some Content
</asp:BulletedList>
Attribute
Description
num
Specifies the number of the first list item in an ordered list.
Example
The following example sets the FirstBulletNumber of a BulletedList control:
<asp:BulletedList id="bl1" runat="server"
FirstBulletNumber="4">
Some content
</asp:BulletedList>
</form>
Show example
ASP.NET Target Property


The Target property is used to get or set where to open the target URL.
Syntax
<asp:BulletedList Target="target" runat="server">
Some Content
</asp:BulletedList>
Attribute
Description
target
Specifies where to open the target URL.

Possible Values:
_blank - the target URL will open in a new window
_self - the target URL will open in the same frame as it was clicked
_search - the target URL will open in the search pane
_top - the target URL will open in the full body of the window
_parent - the target URL will open in the parent frameset
framename - specify a target frame name
Tips and Notes

Note: This property is only used when DisplayMode property is "HyperLink"
Example
The following example sets the Target of a BulletedList control:
<asp:Bulletedlist Target="HyperLink"
id="bl1" runat="server">
<asp:ListItem Text="W3Schools" Target="_blank"
Value="http://www.w3schools.com/" />
</asp:Bulletedlist>
</form>
Show example
ASP.NET Style Control

Web Server Controls

The Style control is used to set the style of a web control.
Properties
Property
Description
.NET
BackColor
The background color of the control
1.0
BorderColor
The border color of the control
1.0
BorderStyle
The border style of the control
1.0
BorderWidth
The border width of the control
1.0
CssClass
The CSS class rendered by the control on the client
1.0
Font
The font properties of the control
1.0
ForeColor
The foreground color (typically the color of the text) of the control
1.0
Height
The height of the control
1.0
RegisteredCssClass
The CSS class that is registered with the control
2.0
Width
The width of the control
1.0
Web Server Controls
ASP.NET BackColor Property

Complete Style Control Reference

The BackColor property is used to set or return the background color of a control.
Syntax
<asp:webcontrol id="id" BackColor="color" runat="server" />
Attribute
Description
color
The color to set as background color of a control. Must be a valid HTML color
Example
The following example sets the background color of a button:
<asp:Button id="button1" Text="Submit"
BackColor="#FFCC80" runat="server" />
</form>
Show example
Set the background color of a Button control (with declaration and script)
ASP.NET BorderColor Property


The BorderColor property is used to set or return the border color of a control.
Syntax
<asp:webcontrol id="id" BorderColor="color" runat="server" />
Attribute
Description
color
The color to set as background color of a control. Must be a valid HTML color
Example
The following example sets the border color of a table:
<asp:Table runat="server" BorderColor="#FF0000"
BorderWidth="5" GridLines="vertical">
<asp:TableRow>
<asp:TableCell>Hello</asp:TableCell>
<asp:TableCell>World</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
Set the border color of a Button control (with declaration and script)
Complete Style Control Referenc
ASP.NET BorderStyle Property


The BorderStyke property is used to set or return the border style of a control.
Syntax
<asp:webcontrol id="id" BorderStyle="style" runat="server" />
Possible Style Values

Value
Description
NotSet Border style is not set

None
Defines no border
Dotted
Defines a dotted border
Dashed Defines a dashed border

Solid
Defines a solid border
Double Defines two borders. The width of the two borders are the same as the border-width value
Groove Defines a 3D grooved border. The effect depends on the border-color value
Ridge
Defines a 3D ridged border. The effect depends on the border-color value
Inset
Defines a 3D inset border. The effect depends on the border-color value
Outset
Defines a 3D outset border. The effect depends on the border-color value
Example
The following example sets the border style of a table:
<asp:Table runat="server" BorderStyle="dotted"
BorderWidth="5" GridLines="vertical">
<asp:TableRow>
<asp:TableCell>World</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
Set the border color of a Button control (with declaration and script)
ASP.NET BorderWidth Property


The BorderWidth property is used to set or return the border width of a control.
Syntax
<asp:webcontrol id="id" BorderWidth="length" runat="server" />
Attribute
Description
length
The width of the border. Must be a valid .NET length unit. Valid length units are:
cm, mm, in, pt, pc, or px
Example
The following example sets the border width of a table:
<form runat="server"> <asp:Table runat="server" BorderWidth="5"

GridLines="vertical"> <asp:TableRow>
<asp:TableCell>World</asp:TableCell> </asp:TableRow> </asp:Table>
</form>
Show example
Set the border width of a Button control (with declaration and script)
ASP.NET CssClass Property


The CssClass property is used to set or return a CSS style class to a control.
Syntax
<asp:webcontrol id="id" CssClass="style" runat="server" />
Attribute
Description
style
A String specifying the CSS class used on the control
Example
The following example sets the CSS style to a button:
<style>
.TestStyle
{
font: 12pt verdana;
font-weight:700;
color:orange;
}
</style>
<asp:Button id="Button" CssClass="TestStyle"
Text="Submit" runat="server"/>
</form>
Show example
ASP.NET Font Property


The Font property is used to set or return the font of a control.
Syntax
<asp:webcontrol id="id" font-subproperty="value" runat="server" />
Font SubProperties
Value
Description
Bold
Bold sub property. Possible values are TRUE or FALSE
Italic
Italic sub property. Possible values are TRUE or FALSE
Name
Font name property (like "Verdana" or "Arial"). When you set this property, the Names property is automatically updated with a single element
array with the value of the Name property
Names
An array of font names. When you set this property, the Name property is automatically updated with the first element in the array
Strikeout Strikeout sub property. Possible values are TRUE or FALSE

Underline Strikeout sub property. Possible values are TRUE or FALSE
Size
Font size sub property. Specify the font size
Example
The following example sets the font of a button control:
<asp:Button id="Button1" Text="Submit"
Font-Name="Verdana" Font-Size="15" runat="server"/>
</form>
Show example
Set the Font of a Button control (with declaration and script)
ASP.NET ForeColor Property


The ForeColor property is used to set or return the foreground color (normally the text color) of a
control.
Syntax
<asp:webcontrol id="id" ForeColor="color" runat="server" />
Attribute
Description
color
The color to set as foreground color of a control. Must be a valid HTML color
Example
The following example sets the foreground color of a button:
ForeColor="#FF0000" runat="server" />
</form>
Show example
Set the text color of a Button control (with declaration and script)
ASP.NET Height Property


The Height property is used to set or return the height of a control.
Syntax
<asp:webcontrol id="id" Height="value" runat="server" />
Attribute
Description
value
The height of control. Must be a number representing pixels or a percent value representing the parent objects height
Example
The following example sets the height of a button control:
Height="50px" runat="server" />
</form>
Show example
ASP.NET Width Property


The Width property is used to set or return the width of a control.
Syntax
<asp:webcontrol id="id" Width="value" runat="server" />
Attribute
Description
value
The width of control. Must be a number representing pixels or a percent value

representing the parent objects width
Example
The following example sets the width of a button control:
Width="150px" runat="server" />
</form>
Show example
ASP.NET Table Control

Web Server Controls

The Table control is used in conjunction with the TableCell control and the TableRow control to create a
table.
Properties
Property
Description
.NET
BackImageUrl
A URL to an image to use as an background for the table
1.0
Caption
The caption of the table
2.0
CaptionAlign
The alignment of the caption text
2.0
CellPadding
The space between the cell walls and contents
1.0
CellSpacing
The space between cells
1.0
GridLines
The gridline format in the table
1.0
HorizontalAlign
The horizontal alignment of the table in the page
1.0
Rows
A collection of rows in the Table
1.0
runat

"server"
1.0


Examples
Table
Declare two Table controls in an .aspx file.
Table 2
Declare a Table control, three TableRow controls, and two TableCell controls in an .aspx file.
Web Server Controls
ASP.NET BackImageUrl Property

Complete Table Control Reference

The BackImageUrl property is used to set or return the URL of an image to use as background image
for the Table Control.
Syntax
<asp:Table BackImageUrl="URL" runat="server">
Some Content
</asp:Table>
Attribute
Description
URL
Example
The following example sets the BackImageUrl for a Table control:
<asp:Table id="tab1" runat="server" BackImageUrl="img.gif">
<asp:TableRow>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET Caption Property


The Caption property is used to get or set a text that is shown as a caption for the Table Control.
Syntax
<asp:Table Caption="string" runat="server">
Some Content
</asp:Table>
Attribute
Description
string
The text to be shown as the table caption
Example
The following example sets the Caption for a Table control:
<asp:Table id="tab1" runat="server"
Caption="Table Example">
<asp:TableRow>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET CaptionAlign Property


The CaptionAlign property is used to get or set the alignment of the caption text for a table.
Syntax
<asp:Table Caption="text" CaptionAlign="align" runat="server">
Some Content
</asp:Table>
Attribute
Description
align
Specifies the alignment of the caption text

Possible Values:
NotSet - Default. Caption alignment is not set.
Top - Caption is displayed at the top of the table. Text is centered
Bottom - Caption is displayed at the bottom of the table. Text is centered
Left - Caption is displayed at the top of the table. Text is left-aligned
Right - Caption is displayed at the top of the table. Text is right-aligned
Example
The following example sets the Caption property in a table and aligns it to the bottom of the Table
control:
Caption="Table Example" CaptionAlign="bottom">
<asp:TableRow>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example


The CellPadding property is used to get or set the amount of space (in pixels) between the cell border and the cell content.
Syntax
<asp:Table CellPadding="px" runat="server">
Some Content
</asp:Table>
Attribute
Description
px
Specifies how many pixels of space there is between the cell border and cell content
Example
The following example sets the CellPadding property of the Table control:
CellPadding="30">
<asp:TableRow>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example


The CellSpacing property is used to get or set the amount of space (in pixels) between the cells in a
table.
Note: This property does not work in FireFox.
Syntax
<asp:Table CellSpacing="px" runat="server">
Some Content
</asp:Table>
Attribute
Description
px
Specifies how many pixels of space there is between the cells
Example
The following example sets the CellSpacing property of the Table control:
CellSpacing="20">
<asp:TableRow>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET GridLines Property


The GridLines property is used to get or set the grid line style of the Table control.
Syntax
<asp:Table GridLines="mode" runat="server">
Some Content
</asp:Table>
Attribute
Description
mode
Specifies the grid line style for the table

Possible Values:
None
Horizontal
Vertical
Both
Example
The following example sets the GridLines property to "Both":
<asp:Table id="tab1" runat="server" GridLines="Both">
<asp:TableRow>
<asp:TableCell>
Hello!
</asp:TableCell>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example


The HorizontalAlign property is used to set or return horizontal alignment of the content in the Table control.
Syntax
<asp:Table HorizontalAlign="align" runat="server">
Some Content
</asp:Table>
Attribute
Description
align

Possible values:
Center
Justify
Left
NotSet (Default)
Right
Example
The following example sets the HorizontalAlign property of a Table control:
<asp:Table id="tab1" runat="server" HorizontalAlign="Right">
<asp:TableRow>
<asp:TableCell>
Hello!
</asp:TableCell>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET TableCell Control

Web Server Controls

The TableCell control is used in conjunction with the Table control and the TableRow control to create a
cell in a table.
Tip: The cells of each row are stored in the Cells collection of the TableRow control.
Properties
Property
Description
.NET
AssociatedHeaderCellID
A list of table header cells associated with the TableCell control
2.0
ColumnSpan
The number of columns this cell should span
1.0
HorizontalAlign
The horizontal alignment of the contents in the table cell
1.0
RowSpan
The number of rows this cell should span
1.0
runat

"server"
1.0
Text
Specifies the text of the table cell
1.0
VerticalAlign
The vertical alignment of the contents in the table cell
1.0
Wrap
Specifies whether the cell's contents should wrap or not
1.0


Example
Table
Table 2
Web Server Controls
ASP.NET ColumnSpan Property

Complete TableCell Control Reference

The ColumnSpan property is used to set or return number of columns the TableCell spans in a Table
control.
Syntax
<asp:TableCell ColumnSpan="num" runat="server">
Some content
</asp:TableCell>
Attribute
Description
num
Specifies the number of columns the TableCell spans
Example
The following example sets the ColumnSpan mode to "2":
<asp:Table id="tab1" runat="server">
<asp:TableRow>
<asp:TableCell ColumnSpan="2">
Some Content
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
Some Content
</asp:TableCell>
<asp:TableCell>
Some Content
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example


The HorizontalAlign property is used to set or return horizontal alignment of the content in the
TableCell control.
Syntax
<asp:TableCell HorizontalAlign="align" runat="server">
Some Content
</asp:TableCell>
Attribute
Description
align

Possible values:
Center
Justify
Left
NotSet (Default)
Right
Example
The following example sets the HorizontalAlign property of a TableCell control:
<asp:TableRow>
<asp:TableCell HorizontalAlign="Center">
Hello!
</asp:TableCell>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET RowSpan Property


The RowSpan property is used to set or return number of rows the TableCell spans in a Table control.
Syntax
<asp:TableCell RowSpan="num" runat="server">
Some content
</asp:TableCell>
Attribute
Description
num
Specifies the number of rows the TableCell spans
Example
The following example sets the RowSpan mode to "2":
<asp:TableRow>
<asp:TableCell RowSpan="2">
Some Content
</asp:TableCell>
<asp:TableCell>
Some Content
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
Some Content
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example


The Text property is used to set or return the text of a TableCell control.
Syntax
<asp:TableCell Text="string" runat="server" />
Attribute
Description
string
A string that specifies the text of the Table cell
Example
The following example sets the text of a TableCell control:
<asp:TableRow>
<asp:TableCell Text="Hello" />
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET VerticalAlign Property


The VerticalAlign property is used to set or return vertical alignment of the content in the TableCell
control.
Syntax
<asp:TableCell VerticalAlign="align" runat="server">
Some Content
</asp:TableCell>
Attribute
Description
align
Specifies the vertical alignment of the content.

Possible values:
Bottom
Middle
NotSet
Top
Example
The following example sets the VerticalAlign property of a TableCell control:
<asp:TableRow>
<asp:TableCell VerticalAlign="Center">
Hello!
</asp:TableCell>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example


The Wrap property is used to set or return whether or not the text within a table cell wraps.
Syntax
<asp:TableCell Wrap="True|False" runat="server">
Some content
</asp:TableCell>
Example
The following example sets the wrap mode to "False":
<asp:TableRow>
<asp:TableCell Wrap="False">
Some Content
<asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET TableRow Control

Web Server Controls

The TableRow control is used in conjunction with the TableCell control and the Table control to create a row in a table.
Tip: The rows of a table are stored in the Rows collection of the Table control.
Properties
Property
Description
.NET
Cells
HorizontalAlign
The horizontal alignment of the contents in the table row
1.0
TableSection
The location of a TableRow object in a Table control
2.0
VerticalAlign
The vertical alignment of the contents in the table row
1.0


Examples
Table
Table 2
Web Server Controls

Complete TableRow Control Reference

The HorizontalAlign property is used to set or return horizontal alignment of the content in the
TableRow control.
Syntax
<asp:TableRow HorizontalAlign="align" runat="server">
Some Content
</asp:TableRow>
Attribute
Description
align

Possible values:
Center
Justify
Left
NotSet (Default)
Right
Example
The following example sets the HorizontalAlign property of a TableRow control:
<asp:TableRow HorizontalAlign="Right">
<asp:TableCell>
Hello!
</asp:TableCell>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP.NET TableSection Property


The TableSection property is used to set or return location for a TableRow object in a Table control.
This property to get or set where the TableRow object is placed in a Table control.
Syntax
<asp:TableRow TableSection="section" runat="server">
Some Content
</asp:TableRow>
Attribute
Description
section
Specifies which table section the row belongs to.

Possible values:
TableHeader - Header row
TableBody - Default. Body of the table
TableFooter - The footer row
Example
The following example sets the TableSection property of a TableRow control:
<asp:table id="Table1" runat="server" GridLines="Both">
<asp:TableRow TableSection="TableHeader">
<asp:TableCell>Header</asp:TableCell>
</asp:TableRow>
</asp:table>
</form>
Show example
ASP.NET VerticalAlign Property


The VerticalAlign property is used to set or return vertical alignment of the content in the TableRow
control.
Syntax
<asp:TableRow VerticalAlign="align" runat="server">
Some Content
</asp:TableRow>
Attribute
Description
align
Specifies the vertical alignment of the content.

Possible values:
Bottom
Middle
NotSet
Top
Example
The following example sets the VerticalAlign property of a TableRow control:
<asp:TableRow VerticalAlign="Middle">
<asp:TableCell>
Hello!
</asp:TableCell>
<asp:TableCell>
Hello!
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</form>
Show example
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
1 2
3 4
<form runat=server>
<asp:Table runat="server" CellPadding="5"
GridLines="horizontal" HorizontalAlign="Center">
<asp:TableRow>
<asp:TableCell>1</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
</asp:TableRow>
</asp:Table>
<br />
<asp:Table runat="server" CellPadding="5"
GridLines="vertical" HorizontalAlign="Center">
<asp:TableRow>
</asp:TableRow>
<asp:TableRow>
</asp:TableRow>
</asp:Table>
</form>
1 2
3 4
</body>
</html>
ASP Source:
Output Result:
Sub Page_Load(sender As Object, e As EventArgs)
dim rows,cells,j,i
rows=3
cells=2
For j=0 To rows-1
dim r As New TableRow()
For i=0 To cells-1
dim c As New TableCell()
c.Controls.Add(New LiteralControl("row " & j & ", cell " & i))
r.Cells.Add(c)
Next
Table1.Rows.Add(r)
Next
End Sub
</script>
row 0, cell 0 row 0, cell 1

<!DOCTYPE html>
<html>
<body>
<asp:Table id="Table1" BorderWidth="1" GridLines="Both"
runat="server" />
</form>
</body>
</html>
ASP.NET TextBox Control

Web Server Controls

Properties
Property
Description
.NET
AutoCompleteType
Specifies the AutoComplete behavior of a TextBox
2.0
AutoPostBack
A Boolean value that specifies whether the control is

automatically posted back to the server when the contents
change or not. Default is false
1.0
CausesValidation
Specifies if a page is validated when a Postback occurs
2.0
Columns
The width of the textbox
1.0
MaxLength
The maximum number of characters allowed in the textbox
1.0
ReadOnly
Specifies whether or not the text in the text box can be

changed
1.0
Rows
The height of the textbox (only used if TextMode="Multiline")
1.0
runat

"server"
TagKey
Text
The contents of the textbox
1.0
TextMode
Specifies the behavior mode of a TextBox control (SingleLine,

MultiLine or Password)
1.0
ValidationGroup
The group of controls that is validated when a Postback occurs
Wrap
A Boolean value that indicates whether the contents of the

textbox should wrap or not
1.0
OnTextChanged
The name of the function to be executed when the text in the

textbox has changed


Examples
Textbox
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.
Textbox 2
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 copies the
contents of the textbox to the Label control.
Web Server Controls
ASP.NET AutoCompleteType Property

Complete TextBox Control Reference

The AutoCompleteType property is used to set or return the AutoComplete category of a TextBox control.
The AutoComplete feature creates a list of values entered in a text box. When using the text box again, a list of values entered is displayed. The user can
then select a value instead of retyping a previously entered value
Syntax
<asp:TextBox AutoCompleteType="cat" runat="server"/>
Attribute
Description
cat
Specifies the AutoComplete category.

Possible values:
BusinessCity - City in the business category
BusinessCountryRegion - Country/region in the business category
BusinessFax - Fax number in the business category
BusinessPhone - Phone number in the business category
BusinessState - State in the business category
BusinessStreetAddress - Street address in the business category
BusinessUrl - Web site URL in the business category
BusinessZipCode - ZIP code in the business category
Cellular - Phone number in the mobile-phone category
Company - Business name in the business category
Department - Department in the business category
Disabled - AutoComplete feature is disabled
DisplayName - Name to display in the user category
Email - E-mail in the user category
FirstName - First name in the user category
Gender - Gender in the user category
HomeCity - Home city in the user category
HomeCountryRegion - Home country/region in the user category
HomeFax - Fax number in the user category
Homepage - Web site URL in the user category
HomePhone - Phone number in the user category
HomeState - Home state in the user category
HomeStreetAddress - Home street in the user category
HomeZipCode - ZIP code in the user category
JobTitle - Job title in the user category
LastName - Last name in the user category
MiddleName - Middle name in the user category
None - No category specified
Notes - Extra information in the form
Office - Office location in the business category
Pager - Phone number in the pager category
Search - Keywords in the search category
Example
The following example sets the AutoCompleteType mode to "FirstName":
<asp:TextBox id="tb1" runat="server" AutoCompleteType="FirstName" />
</form>
Show example
ASP.NET AutoPostBack Property


The AutoPostBack property is used to set or return whether or not an automatic post back occurs when
the user presses "ENTER" or "TAB" in the TextBox control.
If this property is set to TRUE the automatic post back is enabled, otherwise FALSE. Default is FALSE.
Syntax
<asp:TextBox AutoPostBack="TRUE|FALSE" runat="server"/>
Example
The following example sets the AutoPostBack mode to "TRUE":
<asp:TextBox id="tb1" runat="server" AutoPostBack="TRUE" />
</form>
Show example
ASP.NET Columns Property


The Columns property is used to set or return the width of the TextBox control.
Syntax
<asp:TextBox Columns="num" runat="server" />
Attribute
Description
num
A number specifying the width, in characters, of the text box
Example
The following example sets the width of a TextBox control:
<asp:TextBox id="tb1" runat="server" Columns="50" />
</form>
Show example
ASP.NET MaxLength Property


The MaxLength property is used to set or return the maximum number of characters allowed in a
TextBox control.
Syntax
<asp:TextBox MaxLength="num" runat="server" />
Attribute
Description
num
A number specifying the maximum number of characters allowed in the text box
Example
The following example sets the max number of characters allowed in a TextBox control:
<asp:TextBox id="tb1" runat="server" MaxLength="10" />
</form>
Show example
ASP.NET ReadOnly Property


The ReadOnly property is used to set or return whether or not the text in the TextBox control can be
changed.
If this property is set to TRUE the text can not be changed, otherwise FALSE. Default is FALSE.
Syntax
<asp:TextBox ReadOnly="TRUE|FALSE" runat="server"/>
Example
The following example sets the ReadOnly mode to "TRUE":
<asp:TextBox id="tb1" runat="server" ReadOnly="TRUE"
Text="This text is read only" />
</form>
Show example
ASP.NET Rows Property


The Rows property is used to set or return the height of the TextBox control.
This property can only be used if TextMode="Multiline"
Syntax
<asp:TextBox runat="server" Rows="num" TextMode="MultiLine" />
Attribute
Description
num
A number specifying the height, in rows, of the text box
Example
The following example sets the height of a TextBox control:
<asp:TextBox id="tb1" runat="server"
TextMode="MultiLine" Rows="5" />
</form>
Show example


The Text property is used to set or return the text of a TextBox control.
Syntax
<asp:TextBox Text="string" runat="server" />
Attribute
Description
string
A string that specifies the text of the TextBox control
Example
The following example sets the text of a TextBox control:
<asp:TextBox id="tb1" runat="server" Text="Name" />
</form>
Show example
ASP.NET TextMode Property


The TextMode property is used to set or return the behavior mode of a TextBox control.
Syntax
<asp:TextBox TextMode="mode" runat="server" />
Attribute
Description
mode
A number specifying the maximum number of characters allowed in the text box
Possible values:
SingleLine - Default. One line text box
MultiLine - Text box with multiple lines
Password - One line text box that masks the input
Example
The following example sets the text mode of a TextBox control to "Password":
<asp:TextBox id="tb1" runat="server" TextMode="Password" />
</form>
Show example


The Wrap property is used to set or return whether or not the text content wraps within a multiline
text box.
This property can only be used if TextMode="Multiline"
Syntax
<asp:TextBox Wrap="TRUE|FALSE" TextMode="MultiLine" runat="server"/>
Example
The following example sets the wrap mode to "False":
<asp:TextBox id="tb1" runat="server"
TextMode="MultiLine" Wrap="False" />
</form>
Show example
ASP Source:
Output Result:
End Sub
</script>
Enter your name:
<!DOCTYPE html>
<html>
<body>
Enter your name:
</form>
</body>
</html>
Submit
ASP Source:
Output Result:
sub submit(sender As Object, e As EventArgs)
lbl1.Text=txt1.Text
end sub
</script>
Hello World!
Copy Text to Label
<!DOCTYPE html>
<html>
<body>
<asp:TextBox id="txt1" Text="Hello World!"
Font_Face="verdana" BackColor="#0000ff"
ForeColor="white" TextMode="MultiLine"
Height="50" runat="server" />
<asp:Button OnClick="submit"
Text="Copy Text to Label" runat="server" />
</form>
</body>
</html>
ASP.NET XML Control

Web Server Controls

The XML control is used to display an XML document or the results of an XSL Transform.
Note: At least one of the XML Document properties must be set or no XML document is displayed.
You can also specify an XSLT document that will format the XML document before it is written to the
output. You can format the XML document with the Transform property or the TransformSource
property.
Properties
Property
Description
.NET
ClientID
Controls
Document
Deprecated. Specifies an XML document using a

System.Xml.XmlDocument object
1.0
DocumentContent
Specifies an XML string
1.0
DocumentSource
Specifies a path to an XML file to display
1.0
EnableTheming
runat

"server"
1.0
SkinID
Transform
Formats the XML document using a

System.Xml.Xsl.XslTransform object
1.0
TransformArgumentList
TransformSource
Specifies a path to an XSL Transform file
XPathNavigator

Example
XML
How to use the Xml control to display the result of an XSL Transform.
Web Server Controls
XML DocumentSource Property

XML Control

The DocumentSource property is used to set or return the path to an XML document to display in the
Xml control.
Syntax
<asp:Xml DocumentSource="path" runat="server" />
Attribute
Description
path
A string that specifies the location of the xml file.

This attribute can be the relative or absolute path:
Relative path: The path of the file relative to the location of the current
web page (like "~/note.xml")
Absolute path: The absolute path (like "C:\xml\note.xml")
Example
Example
The following example specifies the XML document used:
<asp:Xml id="xml1" runat="server" DocumentSource="note.xml" />
</form>
Show example
The XML file used in this example is "note.xml"

XML Control
ASP Source:
Output Result:
<!DOCTYPE html>
<html>
<body>
My CD Collection
<asp:Xml DocumentSource="cdcatalog.xml"
TransformSource="cdcatalog.xsl" runat="server" />
</form>
Title
Empire Burlesque
Hide your heart
Greatest Hits
<p><a href="cdcatalog.xml" target="_blank">View XML

file</a></p>
<p><a href="cdcatalog.xsl" target="_blank">View XSL
file</a></p>
Still got the blues Gary Moore

Eros
Eros Ramazzotti
</body>
</html>
View XML file

View XSL file
Artist
Bob Dylan
Bonnie Tyler
Dolly Parton
ASP.NET Web Forms - Validation Controls

Previous
Next Chapter
Validation server controls are used to validate user-input.
Validation Server Controls

A Validation server control is used to validate the data of an input control. If the data does not pass
validation, it will display an error message to the user.
The syntax for creating a Validation server control is:

Validation Server Control
Description
CompareValidator
Compares the value of one input control to the value of

another input control or to a fixed value
CustomValidator
Allows you to write a method to handle the validation of the

value entered
RangeValidator
Checks that the user enters a value that falls between two
values
RegularExpressionValidator
Ensures that the value of an input control matches a

specified pattern
RequiredFieldValidator
Makes an input control a required field
ValidationSummary
Displays a report of all validation errors occurred in a Web

page
ASP.NET CompareValidator Control


The CompareValidator control is used to compare the value of one input control to the value of another
input control or to a fixed value.
Note: If the input control is empty, the validation will succeed. Use the RequiredFieldValidator control
to make the field required.
Properties
Property
Description
BackColor
The background color of the CompareValidator control
ControlToCompare
The name of the control to compare with
ControlToValidate
The id of the control to validate
Display
The display behavior for the validation control. Legal values are:
None (the control is not displayed. Used to show the error
message only in the ValidationSummary control)
Static (the control displays an error message if validation fails.
Space is reserved on the page for the message even if the input
passes validation.
Dynamic (the control displays an error message if validation
fails. Space is not reserved on the page for the message if the
input passes validation
EnableClientScript
A Boolean value that specifies whether client-side validation is enabled

or not
Enabled
A Boolean value that specifies whether the validation control is

enabled or not
ErrorMessage
The text to display in the ValidationSummary control when validation

fails. Note: This text will also be displayed in the validation control if
the Text property is not set
ForeColor
The foreground color of the control
id
IsValid
A Boolean value that indicates whether the control specified by

ControlToValidate is determined to be valid
Operator
The type of comparison to perform. The operators are:

Equal
GreaterThan
GreaterThanEqual
LessThan
LessThanEqual
NotEqual
DataTypeCheck
runat
Text
The message to display when validation fails
Type
Specifies the data type of the values to compare. The types are:
Currency
Date
Double
Integer
String
ValueToCompare
A specified value to compare with
Examples
CompareValidator
Declare two TextBox controls, one Button control, and one CompareValidator control in an .aspx file. If
validation fails, the text "Validation Failed!" will be displayed in red on a yellow background in the
CompareValidator control.
CompareValidator 2
Declare two TextBox controls, one ListBox control, one Button control, and one CompareValidator
control in an .aspx file. The check_operator() function sets the operator of the CompareValidator
control equal to the selected operator in the ListBox control, then it validates the CompareValidator
control. If validation fails, the text "Validation Failed!" will be displayed in red on a yellow background in
the CompareValidator control.
ASP.NET CustomValidator Control


The CustomValidator control allows you to write a method to handle the validation of the value
entered.
Properties
Property
Description
BackColor
The background color of the CustomValidator control
ClientValidationFunction
Specifies the name of the client-side validation script function to be

executed. Note: The script must be in a language that the browser
supports, such as VBScript or JScript
With VBScript, the function must be in the form:
Sub FunctionName (source, arguments)
With JScript, the function must be in the form:
Function FunctionName (source, arguments)
ControlToValidate
Display
passes validation.
EnableClientScript

or not
Enabled

enabled or not
ErrorMessage

ForeColor
id
IsValid

OnServerValidate
Specifies the name of the server-side validation script function to be

executed
runat
Text
Example
CustomValidator
Declare two Label controls, one TextBox control, one Button control, and one CustomValidator control
in an .aspx file. The user() function checks the length of the input value. If the length is <8 or >16 the
text "A username must be between 8 and 16 characters!" will appear in the CustomValidator control.
ASP.NET RangeValidator Control


The RangeValidator control is used to check that the user enters an input value that falls between two
values. It is possible to check ranges within numbers, dates, and characters.
Note: The validation will not fail if the input control is empty. Use the RequiredFieldValidator control to
make the field required.
Note: The validation will not fail if the input value cannot be converted to the data type specified. Use
the CompareValidator control, with its Operator property set to
ValidationCompareOperator.DataTypeCheck, to verify the data type of the input value.
Properties
Property
Description
BackColor
The background color of the RangeValidator control
ControlToValidate
Display
None (the control is not displayed. Used to show the error message
only in the ValidationSummary control)
Static (the control displays an error message if validation fails. Space
is reserved on the page for the message even if the input passes
validation.
Dynamic (the control displays an error message if validation fails.
Space is not reserved on the page for the message if the input
passes validation
EnableClientScript
A Boolean value that specifies whether client-side validation is enabled or

not
Enabled
A Boolean value that specifies whether the validation control is enabled or

not
ErrorMessage
The text to display in the ValidationSummary control when validation fails.

Note: This text will also be displayed in the validation control if the Text
property is not set
ForeColor
id
IsValid

MaximumValue
Specifies the maximum value of the input control
MinimumValue
Specifies the minimum value of the input control
runat
Type
Specifies the data type of the value to check. The types are:
Currency
Date
Double
Integer
String
Text
Examples
RangeValidator
Declare one TextBox control, one Button control, and one RangeValidator control in an .aspx file. If
validation fails, the text "The date must be between 1/1/2002 and 31/5/2002!" will be displayed in the
RangeValidator control.
RangeValidator 2
Declare one TextBox control, one Button control, one Label control, and one RangeValidator control in
an .aspx file. The submit() function checks if the page is valid. If it is valid, it returns "The page is
valid!" in the Label control. If it is not valid, it returns "The page is not valid!" in the Label control. If
validation fails, the text "The value must be from 1 to 100!" will be displayed in the RangeValidator
control.
ASP.NET RegularExpressionValidator Control


The RegularExpressionValidator control is used to ensure that an input value matches a specified
pattern.
Note: Both server- and client-side validation are performed unless the browser does not support
client-side validation or the EnableClientScript property is set to false.
Note: The validation will not fail if the input control is empty. Use the RequiredFieldValidator control to
make the field required.
Properties
Property
Description
BackColor
The background color of the RegularExpressionValidator control
ControlToValidate
Display
passes validation.
EnableClientScript

or not
Enabled

enabled or not
ErrorMessage

ForeColor
id
IsValid

runat
BackColor
The background color of the RegularExpressionValidator control
Text
ValidationExpression
Specifies the expression used to validate input control. The expression

validation syntax is different on the client than on the server. JScript is
used on the client. On the server, the language you have specified is
used
Example
RegularExpressionValidator
Declare one TextBox control, one Button control, one Label control, and one
RegularExpressionValidator control in an .aspx file. The submit() function checks if the page is valid. If
it is valid, it returns "The page is valid!" in the Label control. If it is not valid, it returns "The page is
not valid!" in the Label control. If validation fails, the text "The zip code must be 5 numeric digits!" will
be displayed in the RegularExpressionValidator control.
ASP.NET RequiredFieldValidator Control


The RequiredFieldValidator control is used to make an input control a required field.
With this control, the validation fails if the input value does not change from its initial value. By default,
the initial value is an empty string ("").
Note: Leading and trailing spaces of the input value are removed before validation.
Note: The InitialValue property does not set the default value for the input control. It indicates the
value that you do not want the user to enter in the input control.
Properties
Property
Description
BackColor
The background color of the RequiredFieldValidator control
ControlToValidate
Display
passes validation.
EnableClientScript

or not
Enabled

enabled or not
ErrorMessage

ForeColor
id
InitialValue
Specifies the starting value of the input control. Default value is ""
IsValid

runat
Text
Example
RequiredFieldValidator
Declare two TextBox controls, one Button control, and one RequiredFieldValidator control in an .aspx
file. It shows how to use the RequiredFieldValidator control to make the "txt_name" textbox a required
field.
ASP.NET ValidationSummary Control


The ValidationSummary control is used to display a summary of all validation errors occurred in a Web
page.
The error message displayed in this control is specified by the ErrorMessage property of each validation
control. If the ErrorMessage property of the validation control is not set, no error message is displayed
for that validation control.
Properties
Property
Description
DisplayMode
How to display the summary. Legal values are:

BulletList
List
SingleParagraph
EnableClientScript
A Boolean value that specifies whether client-side validation is enabled or

not
Enabled
A Boolean value that specifies whether the validation control is enabled or

not
ForeColor
The fore color of the control
HeaderText
A header in the ValidationSummary control
id
runat
ShowMessageBox
A Boolean value that specifies whether the summary should be displayed in

a message box or not
ShowSummary
A Boolean value that specifies whether the ValidationSummary control

should be displayed or hidden
Examples
Validationsummary
Use the ValidationSummary control to write a bulleted list of fields that are required but left empty by
the user.
Validationsummary 2
Use the ValidationSummary control to display a message box of the fields that are required but left
empty by the user.

ASP Net

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ASP Net

Uploaded by

Copyright:

Available Formats

Created by www.ebooktutorials.blogspot.

Content Downloaded from www.w3schools.com

Classic ASP - Active Server Pages

ASP.NET Programming Languages

ASP.NET Server Technologies

ASP.NET Development Tools

ASP.NET File Extensions

Content Downloaded from www.w3schools.com

ASP.NET Web Pages - Demonstration

This is a Web Pages Demonstration

Like to Read a Tutorial First?

Easy Learning with "Run Example"

Web Pages Example

We Will Use WebMatrix

How to Install WebMatrix

Content Downloaded from www.w3schools.com

Content Downloaded from www.w3schools.com

ASP.NET Web Pages - WebMatrix

Learn ASP.NET Web Pages by building a web site from scratch.

Create a Web Site with WebMatrix

Content Downloaded from www.w3schools.com

Create a Web Page with WebMatrix

Content Downloaded from www.w3schools.com

In the ribbon bar, click Run:

Hello Web Pages

Content Downloaded from www.w3schools.com

ASP.NET Web Pages - Files and Folders

Learn ASP.NET Web Pages by building a web site from scratch.

a new empty web site

1. Start With an Empty Web Site

3. Create a Style Sheet

Content Downloaded from www.w3schools.com

4. Create a Layout Page

5. Create a Home Page

Content Downloaded from www.w3schools.com

ASP.NET Web Pages - Adding Navigation

Learn ASP.NET Web Pages by building a web site from scratch.

Add the File: _PageStart.cshtml

Add an About Page

Add a Navigation Menu

Content Downloaded from www.w3schools.com

Edit The Style Sheet

Edit the Home Page

Feel free to edit the content.

Content Downloaded from www.w3schools.com

ASP.NET Web Pages - Databases

Learn ASP.NET Web Pages by building a web site from scratch.

Displaying Data from Database

Content Downloaded from www.w3schools.com

Rename the database to "SmallBakery.sdf".

Adding Data to the Database

Content Downloaded from www.w3schools.com

Baked fresh every day

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

Creating a Test Page

Add the Test Page to Your Application

Content Downloaded from www.w3schools.com

ASP.NET Web Pages - Adding Registration and Login

Learn ASP.NET Web Pages by building a web site from scratch.