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

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
Learn ASP.NET Web Pages by building a web site from scratch. Part I: Creating a Web Site with WebMatrix.
Next Chapter
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> <meta charset="utf-8" /> <title>Web Pages Demo</title> </head> <body> <h1>Hello Web Pages</h1> </body> </html>
In the Quick Access Toolbar, click Save:
In the ribbon bar, click Run:
WebMatrix starts a web server (IIS Express) and runs the page on your computer. The page is displayed in your default browser:
Hello Web Pages
Previous
Next Chapter
ASP.NET Web Pages - Files and Folders

Previous
Learn ASP.NET Web Pages by building a web site from scratch. Part II: Creating standard folders and a consistent style.
Next Chapter
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
Learn ASP.NET Web Pages by building a web site from scratch. Part III: Adding Navigation.
Next Chapter
What We Will Do
In this chapter we will: Add a PageStart page Add an about page Add a navigation menu
Add the File: _PageStart.cshtml

In the root folder (the "Demo" folder), create a new file named "_PageStart.cshtml". Put the following code inside the file:
_PageStart.cshtml
@{ // Set the layout page for the whole site Layout = "~/Shared/Layout.cshtml"; }
The _PageStart file above contains code to be run in every page of the web site. After adding this, you no longer need to add the layout information to every web page.
Add an About Page

In the "Demo" folder, create a new file named "About.cshtml". Put the following code inside the about file:
About.cshtml
<h1>About Us</h1> <p> Lorem Ipsum Porem Lorem Ipsum Porem </p>
The about file above contains a heading and a paragraph. Please feel free to edit the content.
Add a Navigation Menu

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

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

In your "Demo" folder, edit the file named "Default.cshtml". Put the following code inside the file:
Default.cshtml
<h1>Welcome to Us</h1> <p> Lorem Ipsum Porem Lorem Ipsum Porem </p>
Run example
Feel free to edit the content.
Congratulations
You have added navigation to your website. In the next chapter we will add a database.
Previous
Next Chapter
ASP.NET Web Pages - Databases

Previous
Learn ASP.NET Web Pages by building a web site from scratch. Part IV: Adding a Database.
Next Chapter
What We Will Do
In this chapter we will: Create a database Add data to the database Create a page to list the database
Displaying Data from Database

With Web Pages, you can easily display data from a database:
Database Example
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td aligh="right">@row.Price</td> </tr> } </table> </body> </html>
Run example
Creating a Database
WebMatrix includes an SQL Database design tool. Follow the instructions below to create an SQL database called "SmallBakery". Open the Databases workspace and click New Database or Add a database. WebMatrix will create a database with the same name as your site: "Demo.sdf":
Rename the database to "SmallBakery.sdf". Click New Table. Click New Column and create 4 columns named "Id", "Name", "Description", and "Price". For all columns, set Allows Null to "False". For the "Id" column, Set Data Type to "bigint", Is Identity to "True", and Is Primary Key to "True". For the "Name" and "Description" columns, set Data Type to "nvarchar". For the "Price" column, set Data Type to "money". Save the table and name it "Product". When you are finished, your table design will look like this:
Notes: Allow Nulls = "False" specifies that the column cannot be blank (empty). Is Primary Key tells the database that this will be the table's primary key. Is Identity tells the database to assign a new ID number for every record (starting at 1). Data Type = "nvarchar" specifies that this column is a string of variable length. (The n prefix indicates that the column can hold international Unicode characters)
Adding Data to the Database

Follow the instructions below to add some data to your database: In the left pane, expand the SmallBakery.sdf node and then click Tables.
Right-click the Product table and then click Data. In the edit pane, enter the following records: Name Bread Strawberry Cake Apple Pie Pecan Pie Lemon Pie Cupcakes Description 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 Price 2.99 9.99 12.99 10.99 11.99 7.99
Creating a Test Page

Follow the instructions below to create a test page for your database: In the root folder (the Demo folder), create a new web page named ListProducts.cshtml. Replace the code in the file with the code from the example above:
ListProducts.cshtml
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td aligh="right">@row.Price</td> </tr> } </table> </body> </html>
Add the Test Page to Your Application

Add a new line to your layout file:
Layout.cshtml
<ul id="menu"> <li><a href="/Default">Home</a></li> <li><a href="/ListProducts">Data</a></li> <li><a href="/About">About</a></li> </ul>
Run example
Database Connection
The Database.Open(name) method will connect to a database in two steps: First, it searches the application's App_Data folder for a database that matches the name parameter without the file-name extension. If no file is found, it looks for a connection string in the application's Web.config file. This two-step search makes it possible to test the application with a local database, and run the application on a web host using a connection string. A connection string contains information about how to connect to a database. It can include a file path, or the name of an SQL database, with full user name and password.
Previous
Next Chapter
ASP.NET Web Pages - Adding Registration and Login

Previous
Learn ASP.NET Web Pages by building a web site from scratch. Part V: Adding Membership registration, and Login.
Next Chapter
What We Will Do
In this chapter we will: Create a WebSecurity database to hold user profiles and membership information Initialize WebSecurity in AppStart Add a membership registration page Add a member login page
The WebSecurity Object

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

We will create a new WebSecurity database to store user profiles, logins, passwords, and membership information. You don't have to create a new database. You can use your existing database (SmallBakery.sdf). Select the Databases workspace in WebMatrix, and click "Add a database to your site" to create a new SQL Server Compact database. Name the database "Users.sdf" The database will be created in the App_Data folder of your web.
Create an AppStart Page

In the root of your web (the demo folder), create a new page named _AppStart.cshtml. Put the following code inside the file:
_AppStart.cshtml
@{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); }
The code above will be run each time your web site (application) starts. It initializes the WebSecurity database (Users.sdf), with user profile tables, if it is not already initialized. "Users" is the name of the database. "UserProfile" is the name of the database table that contains the user profile information. "UserId" is the name of the (integer) column that contains the user IDs. "Email" is the name of the (string) column that contains user names. true is a boolean value indicating that the user profile and membership tables should be created automatically if they don't exist. Otherwise set to false. Although true indicates that the membership tables can be created automatically, 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". Put the following code inside the file:
Register.cshtml
@{// Initialize page var email = ""; var password = ""; var confirmPassword = ""; var ErrorMessage = ""; // If this is a POST request, validate and process data if (IsPost) { email = Request.Form["email"]; password = Request.Form["password"]; confirmPassword = Request.Form["confirmPassword"]; if (email.IsEmpty() || password.IsEmpty()) { ErrorMessage = "You must specify both email and password.";} if (password != confirmPassword) { ErrorMessage = "Password and confirmation do not match.";} // If all information is valid, create a new account if (ErrorMessage=="") { var db = Database.Open("Users"); var user = db.QuerySingle("SELECT Email FROM UserProfile WHERE LOWER(Email) = LOWER(@0)", email); if (user == null) { db.Execute("INSERT INTO UserProfile (Email) VALUES (@0)", email); WebSecurity.CreateAccount(email, password, false); // Navigate back to the homepage and exit Response.Redirect("~/"); } else {ErrorMessage = "Email address is already in use.";} } } } @if (ErrorMessage!="") { <p>@ErrorMessage</p> <p>Please correct the errors and try again.</p> } <form method="post" action=""> <fieldset> <legend>Sign-up Form</legend> <ol> <li> <label>Email:</label> <input type="text" id="email" name="email" </li> <li> <label>Password:</label> <input type="password" id="password" name="password" </li> <li> <label>Confirm Password:</label> <input type="password" id="confirmPassword" name="confirmPassword" </li> <li> <p><input type="submit" value="Register" /></p> </li> </ol> </fieldset> </form>
Add a Login Page

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

In the "Shared" folder, edit the layout file. Put the following code inside the layout file:
Layout.cshtml
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/Shared/Site.css" /> </head> <body> <ul id="menu"> <li><a href="/Default.cshtml">Home</a></li> <li><a href="/ListProducts">Data</a></li> <li><a href="/About">About</a></li> <li><a href="/Account/Register">Register</a></li> <li><a href="/Account/Login">Login</a></li> </ul> <div id="main"> @RenderBody() <p>© 2012 W3Schools. All rights reserved.</p> </div> </body> </html>
The layout file above, is a copy of the layout file from the previous chapter, with the Register an Login pages added to the navigation menu (marked red).
Congratulations
You have added membership registration and login information to your website.
Previous
Next Chapter
ASP.NET Web Pages - Security

Previous
Learn ASP.NET Web Pages by building a web site from scratch. Part VI: Security.
Next Chapter
What We Will Do
In this chapter we will: Add access restriction security to a web page
Membership, Login, and Security

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

Access restrictions (security) can easily be added to any web page. Just put the following code inside the page:
Security Code:
if (!WebSecurity.IsAuthenticated) { Response.Redirect("~/Account/Login"); }
The code above executes an if test, asking if the user is logged in. If not, the user is redirected to the login page.
Preventing Access to the Database

In our example, the page ListProducts.cshtml, lists bakery products from the "SmallBakery" database. Add the security code at the beginning of the page:
ListProducts.cshtml
@{ if (!WebSecurity.IsAuthenticated) { Response.Redirect("~/Account/Login"); } var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td aligh="right">@row.Price</td> </tr> } </table> </body> </html>
The ListProducts page above, is a copy of the page from the previous chapter about databases. The security code is (added at the beginning) is marked red.
Congratulations
You have added security to your web site, using the WebSecurity object. For a full reference to the WebSecurity object, please visit our WebSecurity Object Reference.
ASP.NET Web Pages - Tutorial

Previous
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.
Next Chapter
Web Pages
MVC ASP.NET Framework
Web Forms
Easy Learning with "Run Example"

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

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

Web Pages is one of the 3 programming models for creating ASP.NET web sites and web applications. The other two programming models are Web Forms and MVC (Model, View, Controller). Web Pages is the simplest programming model for developing ASP.NET web pages. It provides an easy way to combine HTML, CSS, JavaScript and server code: Easy to learn, understand, and use Built around single web pages Similar to PHP and Classic ASP Server scripting with Visual Basic or C# Full HTML, CSS, and JavaScript control Web Pages are easy extendable with programmable Web Helpers, including database, video, graphics, social networking and much more.
Where to Start?
Many developers like to start learning a new technology by looking at working examples. If you want to take a look at a working Web Pages examples, follow the ASP.NET Web Pages Demo.
Web Pages Tutorial

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

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

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

At the end of this tutorial you will find a complete set of ASP.NET references with objects, components, properties and methods. Web Pages References
Previous
Next Chapter
ASP.NET Web Pages - Adding Razor Code

Previous
In this tutorial we will use Razor markup with C# and Visual Basic code
Next Chapter
What is Razor?
Razor Razor Razor Razor is a markup syntax for adding server-based code to web pages has the power of traditional ASP.NET markup, but is easier to learn, and easier to use is a server side markup syntax much like ASP and PHP supports C# and Visual Basic programming languages
Adding Razor Code

Remember the web page from previous chapter:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Web Pages Demo</title> </head> <body> <h1>Hello Web Pages</h1> </body> </html>
Now add some Razor code to the example:
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Web Pages Demo</title> </head> <body> <h1>Hello Web Pages</h1> <p>The time is @DateTime.Now</p> </body> </html>
Run example
The page contains ordinary HTML markup, with one addition: the @ marked Razor code. The Razor code does all the work of determining the current time on the server and display it. (You can specify formatting options, or just display the default)
Main Razor Syntax Rules for C#

Razor code blocks are enclosed in @{ ... } Inline expressions (variables and functions) start with @ Code statements end with semicolon Variables are declared with the var keyword Strings are enclosed with quotation marks C# code is case sensitive C# files have the extension .cshtml
C# Example
 @{ var myMessage = "Hello World"; }  <p>The value of myMessage is: @myMessage</p>  @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Today is: " + weekDay; } <p>The greeting is: @greetingMessage</p>
Run example
Main Razor Syntax Rules for VB

Razor code blocks are enclosed in @Code ... End Code
Inline expressions (variables and functions) start with @ Variables are declared with the Dim keyword Strings are enclosed with quotation marks VB code is not case sensitive VB files have the extension .vbhtml
Example
 @Code dim myMessage = "Hello World" End Code  <p>The value of myMessage is: @myMessage</p>  @Code dim greeting = "Welcome to our site!" dim weekDay = DateTime.Now.DayOfWeek dim greetingMessage = greeting & " Today is: " & weekDay End Code <p>The greeting is: @greetingMessage</p>
Run example
More About C# and Visual Basic

If you want to learn more about Razor, and the C# and Visual Basic programming languages, go to the Razor section of this tutorial.
Previous
Next Chapter
ASP.NET Web Pages - Page Layout

Previous
With Web Pages it is easy to create a web site with a consistent layout.
Next Chapter
A Consistent Look
On the Internet you will discover many web sites with a consistent look and feel: Every page have the same header Every page have the same footer Every page have the same style and layout With Web Pages this can be done very efficiently. You can have reusable blocks of content (content blocks), like headers and footers, in separate files. You can also define a consistent layout for all your pages, using a layout template (layout file).
Content Blocks
Many websites have content that is displayed on every page (like headers and footers). With Web Pages you can use the @RenderPage() method to import content from separate files. Content block (from another file) can be imported anywhere in a web page, and can contain text, markup, and code, just like any regular web page. Using common headers and footers as an example, this saves you a lot of work. You don't have to write the same content in every page, and when you change the header or footer files, the content is updated in all your pages. This is how it looks in code:
Example
<html> <body> @RenderPage("header.cshtml") <h1>Hello Web Pages</h1> <p>This is a paragraph</p> @RenderPage("footer.cshtml") </body> </html>
Run example
Using a Layout Page

In the previous section, you saw that including the same content in many web pages is easy. Another approach to creating a consistent look is to use a layout page. A layout page contains the structure, but not the content, of a web page. When a web page (content page) is linked to a layout page, it will be displayed according to the layout page (template). The layout page is just like a normal web page, except from a call to the @RenderBody() method where the content page will be included. Each content page must start with a Layout directive. This is how it looks in code:
Layout Page:
<html> <body> <p>This is header text</p> @RenderBody() <p>© 2012 W3Schools. All rights reserved.</p> </body> </html>
Any Web Page:

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

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

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

With ASP.NET, the common way to hide sensitive information (database passwords, email passwords, etc.) is to keep the information in a separate file named "_AppStart".
_AppStart.cshtml
@{ WebMail.SmtpServer = "mailserver.example.com"; WebMail.EnableSsl = true; WebMail.UserName = "username@example.com"; WebMail.Password = "your-password"; WebMail.From = "your-name-here@example.com"; }
Previous
Next Chapter
ASP.NET Web Pages - Folders

Previous
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
Next Chapter
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)" />  <link rel="stylesheet" type="text/css" href="/Shared/Site.css" />
The Href method is a method of the WebPage Object.
Previous
Next Chapter
ASP.NET Web Pages - Global Pages

Previous
This chapter is about the global pages AppStart and PageStart.
Next Chapter
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

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

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

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

The example below shows how to display a selected picture which the user selects from a drop-down list:
Razor Example
@{ var imagePath=""; if (Request["Choice"] != null) {imagePath="images/" + Request["Choice"];} } <!DOCTYPE html> <html> <body> <h1>Display Images</h1> <form method="post" action=""> I want to see: <select name="Choice"> <option value="Photo1.jpg">Photo 1</option> <option value="Photo2.jpg">Photo 2</option> <option value="Photo3.jpg">Photo 3</option> </select> <input type="submit" value="Submit" /> @if (imagePath != "") { <p> <img src="@imagePath" alt="Sample" /> </p> } </form> </body> </html>
Run example
Example explained
The server creates a variable called imagePath. The HTML page has a drop-down list (a <select> element) named Choice. It lets the user select a friendly name (like Photo 1), and passes a file name (like Photo1.jpg) when the page is submitted to the web server. The Razor code reads the value of Choice by Request["Choice"]. If it has a value the code constructs a path to the image (images/Photo1.jpg, and stores it in the variable imagePath.
In the HTML page there is an <img> element to display the image. The src attribute is set to the value of the imagePath variable when the page displays. The <img> element is in an if block to prevent trying to display an image with no name (like the first time the page is displayed.
Previous
Next Chapter
ASP.NET Web Pages - Objects

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

You have already seen some Page Object methods in use:
@RenderPage("header.cshtml") @RenderBody()
In the previous chapter you saw two Page Object properties being used (isPost, and Request):
If (isPost) { if (Request["Choice"] != null {
Some Page Object Methods

Method href RenderBody() RenderPage(page) RenderSection(section) Write(object) WriteLitteral Description Builds a URL using the specified parameters Renders the portion of a content page that is not within a named section (In layout pages) Renders the content of one page within another page Renders the content of a named section (In layout pages) Writes the object as an HTML-encoded string Writes an object without HTML-encoding it first.
Some Page Object Properties

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

The Page property of the Page Object, provides property-like access to data shared between pages and layout pages. You can use (add) your own properties to the Page property: Page.Title Page.Version Page.anythingyoulike The pages property is very helpful. For instance, it makes it possible to set the page title in content files, and use it in the layout file:
Home.cshtml
@{ Layout="~/Shared/Layout.cshtml"; Page.Title="Home Page" } <h1>Welcome to W3Schools</h1> <h2>Web Site Main Ingredients</h2> <p>A Home Page (Default.cshtml)</p> <p>A Layout File (Layout.cshtml)</p> <p>A Style Sheet (Site.css)</p>
Layout.cshtml
<!DOCTYPE html> <html> <head> <title>@Page.Title</title> </head> <body> @RenderBody() </body>
</html
Previous
Next Chapter
ASP.NET Web Pages - Files

Previous
This chapter is about working with text files.
Next Chapter
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
Web Helpers greatly simplifies web development and common programming tasks.
Next Chapter
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
WebGrid - One of many useful ASP.NET Web Helpers.
Next Chapter
Doing the HTML Yourself

In the previous chapter, you displayed database data by using razor code, and doing all the HTML markup yourself:
Database Example
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <html> <body> <h1>Small Bakery Products</h1> <table> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(selectQueryString)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td align="right">@row.Price</td> </tr> } </table> </body> </html>
Run example
Using The WebGrid Helper

Using the WebGrid helper is an easier way to display data. The WebGrid helper: Automatically sets up an HTML table to display data Supports different options for formatting Supports paging through data Supports Sorting by clicking on column headings
WebGrid Example
@{ var db = Database.Open("SmallBakery") ; var selectQueryString = "SELECT * FROM Product ORDER BY Id"; var data = db.Query(selectQueryString); var grid = new WebGrid(data); } <html> <head> <title>Displaying Data Using the WebGrid Helper</title> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid.GetHtml() </div> </body> </html>
Run example
Previous
Next Chapter
ASP.NET Web Pages - The Chart Helper

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

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

The example below shows the code needed to display a chart from an array of values:
Example
@{ var myChart = new Chart(width: 600, height: 400) .AddTitle("Employees") .AddSeries(chartType: "column", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); }
Run example
- new Chart creates a new chart object and sets its width and height - the AddTitle method specifies the chart title - the AddSeries method adds data to the chart - the chartType parameter defines the type of chart - the xValue parameter defines x-axis names - the yValues parameter defines the y-axis values - the Write() method displays the chart
Chart From Database Data

You can run a database query and then use data from the results to create a chart:
Example
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Name, Price FROM Product"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Product Sales") .DataBindTable(dataSource: dbdata, xField: "Name") .Write(); }
Run example
- var db = Database.Open opens the database (and assigns the database object to the variable db) - var dbdata = db.Query runs a database query and stores the result in dbdata
- new Chart creates a chart new object and sets its width and height - the AddTitle method specifies the chart title - the DataBindTable method binds the data source to the chart - the Write() method displays the chart An alternative to using the DataBindTable method is to use AddSeries (See previous example). DataBindTable is easier to use, but AddSeries is more flexible because you can specify the chart and data more explicitly:
Example
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Name, Price FROM Product"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Product Sales") .AddSeries(chartType:"Pie", xValue: dbdata, xField: "Name", yValues: dbdata, yFields: "Price") .Write(); }
Run example
Chart From XML Data

The third option for charting is to use an XML file as the data for the chart:
Example
@using System.Data; @{ var dataSet = new DataSet(); dataSet.ReadXmlSchema(Server.MapPath("data.xsd")); dataSet.ReadXml(Server.MapPath("data.xml")); var dataView = new DataView(dataSet.Tables[0]); var myChart = new Chart(width: 600, height: 400) .AddTitle("Sales Per Employee") .AddSeries("Default", chartType: "Pie", xValue: dataView, xField: "Name", yValues: dataView, yFields: "Sales") .Write();} }
Run example
Previous
Next Chapter
ASP.NET Web Pages - The WebMail Helper

Previous
The WebMail Helper - One of many useful ASP.NET Web Helpers.
Next Chapter
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
To initiate the WebMail helper, add the the following WebMail properties to your AppStart page:
_AppStart.cshtml
@{ WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true); WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 25; WebMail.EnableSsl = false; WebMail.UserName = "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
Attention PHP Developers. Web Pages can be written in PHP.
Next Chapter
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
Learn how to publish a Web Pages application without using WebMatrix.
Next Chapter
Publish Your Application Without Using WebMatrix

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

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

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

On the remote server create a bin folder in the root of your application. (If you have installed Helpers, you already have a bin folder) Copy everything from your folder: C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\Assemblies to your application's bin folder on the remote server.
4. Copy the SQL Server Compact DLL Files

If your application has a SQL Server Compact database (an .sdf file in App_Data folder), you must copy the SQL Server Compact DLL files: Copy everything from your folder: C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v4.0\Private to your application's bin folder on the remote server. Create (or edit) the Web.config file for your application:
Example C#
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.data> <DbProviderFactories> <remove invariant="System.Data.SqlServerCe.4.0" /> <add invariant="System.Data.SqlServerCe.4.0" name="Microsoft SQL Server Compact 4.0" description=".NET Framework Data Provider for Microsoft SQL Server Compact" type="System.Data.SqlServerCe.SqlCeProviderFactory, System.Data.SqlServerCe, Version=4.0.0.1,Culture=neutral, PublicKeyToken=89845dcd8080cc91" /> </DbProviderFactories> </system.data> </configuration>
5. Copy SQL Server Compact Data

Do you have .sdf files in your App_Data folder that contains test data? Do you want to publish the test data to the remote server? Most likely not. If you have to copy the SQL data files (.sdf files), you should delete everything in the database, and then copy the empty .sdf file from your development computer to the server. THAT'S IT. GOOD LUCK !
ASP.NET Web Pages - Examples in C# and VB

Previous
Learn ASP.NET Web Pages by C# and Visual Basic examples.
Next Chapter
Examples in C#
Basic Web Pages Display Date and Time Reusable Header and Footer Basic HTML Form Examples Explained Basic C# For Loop For Each Loop While Loop Array If Condition If Else Condition Else If Condition Switch Condition Examples Explained Working with Databases Display Database Data Display Data with WebGrid Examples Explained Using the Chart Helper Display Display Display Display a a a a Bar Chart from an Array Bar Chart from a Database Pie Chart from a Database Pie Chart from an XML File
Examples in VB
Basic Web Pages Display Date and Time Reusable Header and Footer Basic HTML Form Examples Explained Basic VB For Loop For Each Loop While Loop Array If Condition If Else Condition Else If Condition Select Condition Examples Explained Working with Databases Display Database Data Display Data with WebGrid Examples Explained Using the Chart Helper Display Display Display Display a a a a Bar Chart from an Array Bar Chart from a Database Pie Chart from a Database Pie Chart from an XML File
Examples Explained
Examples Explained
Previous
Next Chapter
Source: <html> <body> <h1>Hello Web Pages</h1> <p>The time is @DateTime.Now</p> </body> </html>
Output Result:
Hello Web Pages

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

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

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

This is a paragraph This is a footer from a separate file
Source: <html> <body> @if (IsPost) Dim companyname = Request("CompanyName") Dim contactname = Request("ContactName") @<p>You entered: <br /><br /> Company Name: @companyname <br /> Contact Name: @contactname </p> else @<form method="post" action=""> Company Name:<br /> <input type="text" name="CompanyName" value="" /><br /> Contact Name:<br /> <input type="text" name="ContactName" value="" /><br /><br /> <input type="submit" value="Submit" class="submit" /> </form> end if
Output Result:
Company Name: Contact Name:
Submit
Source: <html> <body> @for(var i = 10; i < 21; i++) { <p>Line @i</p> } </body> </html>
Output Result:
Line 10 Line 11 Line 12 Line 13 Line 14 Line 15 Line 16 Line 17 Line 18 Line 19 Line 20
Source: <html> <body> <ul> @foreach (var x in Request.ServerVariables) {<li>@x</li>} </ul> </body> </html>
Output Result:
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: <html> <body> @{ var i = 0; while (i < 5) { i += 1; <p>Line @i</p> } } </body> </html>
Output Result:
Line 1 Line 2 Line 3 Line 4 Line 5
Source: @{ 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> </body> </html>
Output Result:
Members
Jani Hege Kai Jim The number of names in Members are 4 The person at position 2 is Hege Kai is now in position 3
Source: @{var price=50;} <html> <body> @if (price>30) { <p>The price is too high</p> } </body> </html>
Output Result:
The price is too high.
Source: @{var price=20;} <html> <body> if (price>30) { <p>The price is too high.</p> } else { <p>The price is OK.</p> } </body> </html>
Output Result:
The price is OK.
Source: @{var price=25;} <html> <body> if (price>=30) { <p>The price is high.</p> } else if (price>20 && price<30) { <p>The price is OK.</p> } else { <p>The price is low.</p> } </body> </html>
Output Result:
The price is OK.
Source: @{ 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>
Output Result:
Today is Sunday
Source: <html> <body> @for i=10 to 21 @<p>Line @i</p> next i </body> </html>
Output Result:
Line 10 Line 11 Line 12 Line 13 Line 14 Line 15 Line 16 Line 17 Line 18 Line 19 Line 20
Source: <html> <body> <ul> @for each x in Request.ServerVariables @<li>@x</li> next x </ul> </body> </html>
Output Result:
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: <html> <body> @Code Dim i=0 Do While i < 5 i += 1 @<p>Line @i</p> Loop End Code </body> </html>
Output Result:
Line 1 Line 2 Line 3 Line 4 Line 5
Source: @Code Dim members as String()={"Jani","Hege","Kai","Jim"} i=Array.IndexOf(members,"Kai")+1 len=members.Length x=members(2-1) End Code <html> <body> <h3>Members</h3> @For Each person In members @<p>@person</p> Next person <p>The number of names in Members are @len</p> <p>The person at position 2 is @x</p> <p>Kai is now in position @i</p> </body> </html>
Output Result:
Members
Jani Hege Kai Jim The number of names in Members are 4 The person at position 2 is Hege Kai is now in position 3
Source: @Code Dim price=50 End Code <html> <body> @If price>30 Then @<p>The price is too high.</p> End If </body> </html>
Output Result:
The price is too high.
Source: @Code Dim price=20 End Code <html> <body> @if price>30 Then @<p>The price is too high.</p> Else @<p>The price is OK.</p> End If </body> </html>
Output Result:
The price is OK.
Source: @Code Dim price=25 End Code <html> <body> @if price>=30 Then @<p>The price is high.</p> ElseIf price>20 And price<30 then @<p>The price is OK.</p> Else @<p>The price is low.</p> End If </body> </html>
Output Result:
The price is OK.
Source: @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>
Output Result:
Today is Sunday
Source: @{ var db = Database.Open("SmallBakery"); var query = "SELECT * FROM Product"; } <html> <body> <h1>Small Bakery Products</h1> <table border="1" width="100%"> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> @foreach(var row in db.Query(query)) { <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td align="right">@row.Price</td> </tr> } </table> </body> </html>
Output Result:
Small Bakery Products

Id Product Description 1 Bread Baked fresh every day 2 Strawberry Cake Made with organic strawberries 3 Apple Pie Second only to your mom's pie 4 Pecan Pie 5 Lemon Pie 6 Cupcakes Price 2.99 9.99 12.99
If you like pecans, this is for you 10.99 Made with the best lemons in the world 11.99 Your kids will love these 9.99
Source: @{ 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> <h1>Small Bakery Products</h1> <div id="grid"> @grid.GetHtml() </div> </body> </html>
Output Result:

Id 1 3 2 4 5 Name Description Price Bread Baked fresh every day 2,99 Pecan Pie If you like pecans, this is for you 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: @Code Dim db = Database.Open("SmallBakery") Dim query = "SELECT * FROM Product" End Code <html> <body> <h1>Small Bakery Products</h1> <table border="1" width="100%"> <tr> <th>Id</th> <th>Product</th> <th>Description</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> <td>@row.Description</td> <td align="right">@row.Price</td> </tr> @Code next End Code </table> </body> </html>
Output Result:

Id Product Description 1 Bread Baked fresh every day 2 Strawberry Cake Made with organic strawberries 3 Apple Pie Second only to your mom's pie 4 Pecan Pie 5 Lemon Pie 6 Cupcakes Price 2.99 9.99 12.99
If you like pecans, this is for you 10.99 Made with the best lemons in the world 11.99 Your kids will love these 9.99
Source: @Code Dim db = Database.Open("SmallBakery") 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> <h1>Small Bakery Products</h1> <div id="grid"> @grid.GetHtml() </div> </body> </html>
Output Result:

Id 1 3 2 4 5 Name Description Price Bread Baked fresh every day 2,99 Pecan Pie If you like pecans, this is for you 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: @{ 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(); }
Output Result:
Source: @{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Name, Price FROM Product"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Product Sales") .DataBindTable(dataSource: dbdata, xField: "Name") .Write(); }
Output Result:
Source: @{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Name, Price FROM Product"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Product Sales") .AddSeries(chartType: "Pie", xValue: dbdata, xField: "Name", yValues: dbdata, yFields: "Price") .Write(); }
Output Result:
Source: @using System.Data; @{ var dataSet = new DataSet(); dataSet.ReadXmlSchema(Server.MapPath("data.xsd")); dataSet.ReadXml(Server.MapPath("data.xml")); var dataView = new DataView(dataSet.Tables[0]); var myChart = new Chart(width: 600, height: 400) .AddTitle("Sales Per Employee") .AddSeries("Default", chartType: "Pie", xValue: dataView, xField: "Name", yValues: dataView, yFields: "Sales") .Write(); }
Output Result:
Source: @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
Output Result:
Source: @Code Dim db = Database.Open("SmallBakery") 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
Output Result:
Source: @Code Dim db = Database.Open("SmallBakery") Dim dbdata = db.Query("SELECT Name, Price FROM Product") Dim myChart = new Chart(600,400) myChart.AddTitle("Product Sales") myChart.AddSeries("Employees","column",,,,,dbdata,"Name myChart.Write() End Code
Output Result:
Source: @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)) Dim myChart = new Chart(600,400) myChart.AddTitle("Sales Per Employee") myChart.AddSeries("Default","Pie",,,,,dataView,"Name",d myChart.Write() End Code
Output Result:
ASP.NET Web Pages - Classes

ASP.NET Classes Reference

Method AsBool(), AsBool(true|false) AsDateTime(), AsDateTime(value) AsDecimal(), AsDecimal(value) AsFloat(), AsFloat(value) AsInt(), AsInt(value) Href(path [, param1 [, param2]]) Html.Raw(value) IsBool(), IsDateTime(), IsDecimal(), IsFloat(), IsInt() IsEmpty() IsPost Layout PageData[key], PageData[index], Page Description Converts a string value to a Boolean value (true/false). Returns false or the specified value if the string does not represent true/false. Converts a string value to date/time. Returns DateTime. MinValue or the specified value if the string does not represent a date/time. Converts a string value to a decimal value. Returns 0.0 or the specified value if the string does not represent a decimal value. Converts a string value to a float. Returns 0.0 or the specified value if the string does not represent a decimal value. Converts a string value to an integer. Returns 0 or the specified value if the string does not represent an integer. Creates a browser-compatible URL from a local file path, with optional additional path parts. Renders value as HTML markup instead of rendering it as HTML-encoded output. Returns true if the value can be converted from a string to the specified type. Returns true if the object or variable has no value. Returns true if the request is a POST. (Initial requests are usually a GET.) Specifies the path of a layout page to apply to this page. Contains data shared between the page, layout pages, and partial pages in the current request. You can use the dynamic Page property to access the same data, as in the following example: (Layout pages) Renders the content of a content page that is not in any named sections. Renders a content page using the specified path and optional extra data. You can get the values of the extra parameters from PageData by position (example 1) or key (example 2). (Layout pages) Renders a content section that has a name. Set required to false to make a section optional. Gets or sets the value of an HTTP cookie. Gets the files that were uploaded in the current request. Gets data that was posted in a form (as strings). Request[key] checks both the Request.Form and the Request.QueryString collections. Gets data that was specified in the URL query string. Request[key] checks both the Request.Form and the Request.QueryString collections. 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. Adds an HTTP server header to the response. 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. Redirects the browser request to a new location. Sets the HTTP status code sent to the browser. Writes the contents of data to the response with an optional MIME type. Writes the contents of a file to the response. (Layout pages) Defines a content section that has a name. Decodes a string that is HTML encoded. Encodes a string for rendering in HTML markup. Returns the server physical path for the specified virtual path. Decodes text from a URL. Encodes text to put in a URL. Gets or sets a value that exists until the user closes the browser. Displays a string representation of the object's value. Gets additional data from the URL (for example, /MyPage/ExtraData).
RenderBody() RenderPage(path, values) RenderPage(path[, param1 [, param2]]) RenderSection(sectionName [, required = true|false]) Request.Cookies[key] Request.Files[key] Request.Form[key] Request.QueryString[key] Request.Unvalidated(key) Request.Unvalidated().QueryString|Form|Cookies|Headers[key] Response.AddHeader(name, value) Response.OutputCache(seconds [, sliding] [, varyByParams])
Response.Redirect(path) Response.SetStatus(httpStatusCode) Response.WriteBinary(data [, mimetype]) Response.WriteFile(file) @section(sectionName) { content } Server.HtmlDecode(htmlText) Server.HtmlEncode(text) Server.MapPath(virtualPath) Server.UrlDecode(urlText) Server.UrlEncode(text) Session[key] ToString() UrlData[index]
Previous
Next Chapter
ASP.NET Web Pages - Database Object

ASP.NET Database Object Reference

Method Database.Execute(SQLstatement [, parameters] Database.GetLastInsertId() Database.Open(filename) Database.Open(connectionStringName) Database.OpenConnectionString(connectionString) Database.Query(SQLstatement[, parameters]) Database.QuerySingle(SQLstatement [, parameters]) Database.QueryValue(SQLstatement [, parameters]) Description Executes SQLstatement (with optional parameters) such as INSERT, DELETE, or UPDATE and returns a count of affected records. Returns the identity column from the most recently inserted row. Opens either the specified database file or the database specified using a named connection string from the Web.config file. Opens a database using the connection string. (This contrasts with Database.Open, which uses a connection string name.) Queries the database using SQLstatement (optionally passing parameters) and returns the results as a collection. Executes SQLstatement (with optional parameters) and returns a single record. Executes SQLstatement (with optional parameters) and returns a single value.
Previous
Next Chapter
ASP.NET Web Pages - WebMail Object

Previous
With the WebMail object you can easily send emails from a web page.
Next Chapter
Description
The WebMail Object provides email for ASP.NET Web Pages using SMTP (Simple Mail Transfer Protocol).
Example
See an example in the chapter: Web Pages Email.
WebMail Object Reference - Properties

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

Method Send() Description Sends an email message to an SMTP server for delivery
The Send() method has the following parameters: Parameter to subject body And the following optional parameters: Parameter from cc filesToAttach isBodyHtml additionalHeaders Type String String Collection Boolean Collection Description The email of the sender The cc emails (separated by semicolon) Filenames True if the email body is in HTML Additional headers Type String String String Description The Email recipients (separated by semicolon) The subject line The body of the message
Technical Data
Name Class Namespace Assembly Value System.Web.Helpers.WebMail System.Web.Helpers System.Web.Helpers.dll
Initializing the WebMail Helper

To use the WebMail helper, you need access to an SMTP server. SMTP is the "output" part of email. If you use a web host, you probably already know the name of the SMTP server. If you work in a corporate network, your IT department can give you the name. If you are working at home, you might be able to use your ordinary email provider. In order to send an email you will need: The name of the SMTP server The port number (most often 25) An email user name An email password In the root of your web, create a page (or edit the page ) named _AppStart.cshtml. Put the following code inside the file:
_AppStart.cshtml
@} WebMail.SmtpServer = "smtp.example.com"; WebMail.SmtpPort = 25; WebMail.EnableSsl = false; WebMail.UserName = "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

ASP.NET Helpers - Objects References Analytics Object Reference (Google)

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

Helper Bing.SearchBox([boxWidth]) Description Passes a search to Bing. To specify the site to search and a title for the search box, you can set the Bing.SiteUrl and Bing.SiteTitle properties. Normally you set these properties in the _AppStart page. Displays Bing search results in the page with optional formatting. To specify the site to search and a title for the search box, you can set the Bing.SiteUrl and Bing.SiteTitle properties. Normally you set these properties in the _AppStart page.
Bing.AdvancedSearchBox([, boxWidth] [, resultWidth] [, resultHeight] [, themeColor] [, locale])
Chart Object Reference

Helper Chart(width, height [, template] [, templatePath]) Chart.AddLegend([title] [, name]) Chart.AddSeries([name] [, chartType] [, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) Description Initializes a chart. Adds a legend to a chart. Adds a series of values to the chart.
Crypto Object Reference

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Method ChangePassword() ConfirmAccount() CreateAccount() CreateUserAndAccount() GeneratePasswordResetToken() GetCreateDate() GetPasswordChangeDate() GetUserId() InitializeDatabaseConnection() IsConfirmed() IsCurrentUser() Login() Logout() RequireAuthenticatedUser() RequireRoles() RequireUser() ResetPassword() UserExists() Description Changes the password for a user Confirms an account using a confirmation token Creates a new user account Creates a new user account Generates a token that can be sent to as user by email Gets the time the specified membership was created Gets the date and time when password was changed Gets a user ID from a user name Initializes the WebSecurity system (database) Checks if a user is confirmed Checks if the current user matches a user name Logs the user in by setting a token in the cookie Logs the user out by removing the token cookie Exits the page if the user is not an authenticated user Exits the page if the user is not a part of the specified roles Exits the page if the user is not the specified user Changes a user's password using a token Checks if a given user exists
Technical Data
Name Class Namespace Assembly Value WebMatrix.WebData.WebSecurity WebMatrix.WebData WebMatrix.WebData.dll
Initializing the WebSecurity Database

You must create or initialize an WebSecurity database before you can use the WebSecurity object in your code. In the root of your web, create a page (or edit the page ) named _AppStart.cshtml. Put the following code inside the file:
_AppStart.cshtml
The code above will run each time the web site (application) starts. It initializes the WebSecurity database. "Users" is the name of the WebSecurity database (Users.sdf).
"UserProfile" is the name of the database table that contains the user profile information. "UserId" is the name of the column that contains the user IDs (primary key). "Email" is the name of the column that contains user names. The last parameter true is a boolean value indicating that the user profile and membership tables should be created automatically if they don't exist, otherwise false. Although true indicates automatic creation of the database tables, the database itself will not be created automatically. It must exist.
The WebSecurity Database

The UserProfile table contains one record for each user, with a user ID (primary key) and the user's name (email): UserId 1 2 3 Email 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 1 12.04.2012 16:12:17 Confirmation Is Last Password Token Confirmed Password Failure NULL 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 Namespace Assembly Value WebMatrix.WebData WebMatrix.WebData.dll
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.

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
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
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#
if (!WebSecurity.IsAuthenticated) { Response.Redirect("~/Account/Login"); }
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
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 userName oldPassword newPassword Type String String String Description The user name The user's old password The new password
Return Value
Type Boolean Description true if the password is changed, otherwise false

Technical Data
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 Description The confirmation tokene accountConfirmationToken String
Return Value
Type Boolean Description 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
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 userName password requireConfirmation Type String String Boolean Description The user name The user password true if the account must be confirmed using the token return value, default is false.
Return Value
Type String Description A token that can be sent to the user to confirm the account.

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) 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
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 userName password propertyValues requireConfirmation Type String String Object Boolean Description The user name The user password A dictionary that contains additional user attributes true if the account must be confirmed using the token return value, default is false.
Return Value
Type String Description 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.

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) 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
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 userName expiration Type String Integer Description The user name The time in minutes until the token expires. Default is 1440 (24 hours)
Return Value
Type String Description 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> <form method="post" action=""> <label for="newPassword">New Password:</label> <input type="password" id="newPassword" name="newPassword" title="New password" /> <label for="confirmPassword">Confirm Password:</label> <input type="password" id="confirmPassword" name="confirmPassword" 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 Assembly WebMatrix.WebData WebMatrix.WebData.dll
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 userName Type String Description The user name
Return Value
Type DateTime Description The date and time the membership account was created

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) 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
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
Return Value
Type DateTime Description 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
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
Return Value
Type Integer Description 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
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 connectionString userTableName userIdColumn userNameColumn autoCreateTables Type String String String String Boolean Description The name of your WebSecurity database (se remarks) The database table that contains the user profile information The database column that contains the user IDs (primary keys) The database column that contains the user names 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: SimpleMembership is not initialized (or disabled in the website configuration)
Technical Data
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
Return Value
Type Boolean Description 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
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 userName password persistCookie Type String String String Description The user name The user password 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 Boolean Description 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
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
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
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 roles Type String Description 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
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 userID userName Type Integer String Description The user ID 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
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 passwordResetToken newpassword Type String String Description The password token The new password
Return Value
Type Boolean Description 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> <form method="post" action=""> <label for="newPassword">New Password:</label> <input type="password" id="newPassword" name="newPassword" title="New password" /> <label for="confirmPassword">Confirm Password:</label> <input type="password" id="confirmPassword" name="confirmPassword" 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
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
Return Value
Type Boolean Description 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
WebSecurity Object
ASP.NET Razor - Markup

Previous
Razor is not a programming language. It's a server side markup language.
Next Chapter
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
Razor supports both C# (C sharp) and VB (Visual Basic).
Next Chapter
Main Razor Syntax Rules for C#

Razor code blocks are enclosed in @{ ... } Inline expressions (variables and functions) start with @ Code statements end with semicolon Variables are declared with the var keyword Strings are enclosed with quotation marks C# code is case sensitive C# files have the extension .cshtml
C# Example
 @{ var myMessage = "Hello World"; }  <p>The value of myMessage is: @myMessage</p>  @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Today is: " + weekDay; } <p>The greeting is: @greetingMessage</p>
Run example
Main Razor Syntax Rules for VB

Razor code blocks are enclosed in @Code ... End Code Inline expressions (variables and functions) start with @ Variables are declared with the Dim keyword Strings are enclosed with quotation marks VB code is not case sensitive VB files have the extension .vbhtml
Example
 @Code dim myMessage = "Hello World" End Code  <p>The value of myMessage is: @myMessage</p>  @Code dim greeting = "Welcome to our site!" dim weekDay = DateTime.Now.DayOfWeek dim greetingMessage = greeting & " Today is: " & weekDay End Code <p>The greeting is: @greetingMessage</p>
Run example
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
Variables are named entities used to store data.
Next Chapter
Variables
Variables are used to store data. The name of a variable must begin with an alphabetic character and cannot contain whitespace or reserved characters. A variable can be of a specific type, indicating the kind of data it stores. String variables store string values ("Welcome to W3Schools"), integer variables store number values (103), date variables store date values, etc. Variables are declared using the var keyword, or by using the type (if you want to declare the type), but ASP.NET can usually determine data types automatically.
Examples
// Using the var keyword: var greeting = "Welcome to W3Schools"; var counter = 103; var today = DateTime.Today; // Using data types: string greeting = "Welcome to W3Schools"; int counter = 103; DateTime today = DateTime.Today;
Data Types
Below is a list of common data types: Type int float decimal bool string Description Integer (whole numbers) Floating-point number Decimal number (higher precision) Boolean String Examples 103, 12, 5168 3.14, 3.4e38 1037.196543 true, false "Hello W3Schools", "John"
Operators
An operator tells ASP.NET what kind of command to perform in an expression. The C# language supports many operators. Below is a list of common operators: Operator = + * / += -= == != < > <= >= + . () () [] ! && || Description Assigns a value to a variable. Adds a value or variable. Subtracts a value or variable. Multiplies a value or variable. Divides a value or variable. Increments a variable. Decrements a variable. Equality. Returns true if values are equal. Inequality. Returns true if values are not equal. Less than. Greater than. Less than or equal. Greater than or equal. Adding strings (concatenation). Dot. Separate objects and methods. Parenthesis. Groups values. Parenthesis. Passes parameters. Brackets. Accesses values in arrays or collections. Not. Reverses true or false. Logical AND. Logical OR. Example i=6 i=5+5 i=5-5 i=5*5 i=5/5 i += 1 i -= 1 if (i==10) if (i!=10) if if if if (i<10) (i>10) (i<=10) (i>=10)
"w3" + "schools" DateTime.Hour (i+5) x=Add(i,5) name[3] if (!ready) if (ready && clear) if (ready || clear)
Converting Data Types

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

Previous
Statements can be executed repeatedly in loops.
Next Chapter
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> } <p>The number of names in Members are @len</p> <p>The person at position 2 is @x</p> <p>Kai is now in position @i</p> </body> </html>
Run example
Previous
Next Chapter
ASP.NET Razor - C# Logic Conditions

Previous
Programming Logic: Execute code based on conditions.
Next Chapter
The If Condition
C# lets you execute code based on conditions. To test a condition you use an if statement. The if statement returns true or false, based on your test: The if statement starts a code block The condition is written inside parenthesis The code inside the braces is executed if the test is true
Example
@{var price=50;} <html> <body> @if (price>30) { <p>The price is too high.</p> } </body> </html>
Run example
The Else Condition

An if statement can include an else condition. The else condition defines the code to be executed if the condition is false.
Example
@{var price=20;} <html> <body> @if (price>30) { <p>The price is too high.</p> } else { <p>The price is OK.</p> } </body> </html>
Run example
Note: In the example above, if the first condition is true, it will be executed. The else condition covers "everything else".
The Else If Condition

Multiple conditions can be tested with an else if condition:
Example
@{var price=25;} <html> <body> @if (price>=30) { <p>The price is } else if (price>20 { <p>The price is } else { <p>The price is } </body> </html>
Run example
high.</p> && price<30) OK.</p>
low.</p>
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
Variables are named entities used to store data.
Next Chapter
Variables
Variables are used to store data. The name of a variable must begin with an alphabetic character and cannot contain whitespace or reserved characters. A variable can be of a specific type, indicating the kind of data it stores. String variables store string values ("Welcome to W3Schools"), integer variables store number values (103), date variables store date values, etc. Variables are declared using the Dim keyword, or by using the type (if you want to declare the type), but ASP.NET can usually determine data types automatically.
Examples
// Using the Dim keyword: Dim greeting = "Welcome to W3Schools"; Dim counter = 103; Dim today = DateTime.Today; // Using data types: Dim greeting As String = "Welcome to W3Schools"; Dim counter As Integer = 103; Dim today As DateTime = DateTime.Today;
Data Types
Below is a list of common data types: Type integer double decimal boolean string Description Integer (whole numbers) 64 bit floating-point number Decimal number (higher precision) Boolean String Examples 103, 12, 5168 3.14, 3.4e38 1037.196543 true, false "Hello W3Schools", "John"
Operators
An operator tells ASP.NET what kind of command to perform in an expression. The VB language supports many operators. Below is a list of common operators: Operator = + * / += -= = <> < > <= >= & . () () () Not And OR AndAlso orElse Description Assigns a value to a variable. Adds a value or variable. Subtracts a value or variable. Multiplies a value or variable. Divides a value or variable. Increments a variable. Decrements a variable. Equality. Returns true if values are equal. Inequality. Returns true if values are not equal. Less than. Greater than. Less than or equal. Greater than or equal. Adding strings (concatenation). Dot. Separate objects and methods. Parenthesis. Groups values. Parenthesis. Passes parameters. Parenthesis. Accesses values in arrays or collections. Not. Reverses true or false. Logical AND. Logical OR. Extended Logical AND. Extended Logical OR. Example i=6 i=5+5 i=5-5 i=5*5 i=5/5 i += 1 i -= 1 if i=10 if <>10 if if if if i<10 i>10 i<=10 i>=10
"w3" & "schools" DateTime.Hour (i+5) x=Add(i,5) name(3) if Not ready if ready And clear if ready Or clear if ready AndAlso clear if ready OrElse clear
Converting Data Types

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

Previous
Statements can be executed repeatedly in loops.
Next Chapter
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 <p>The number of names in Members are @len</p> <p>The person at position 2 is @x</p> <p>Kai is now in position @i</p> </body> </html>
Run example
Previous
Next Chapter
ASP.NET Razor - VB Logic Conditions

Previous
Programming Logic: Execute code based on conditions.
Next Chapter
The If Condition
VB lets you execute code based on conditions. To test a condition you use the if statement. The if statement returns true or false, based on your test: The if statement starts a code block The condition is written between if and then The code between if ... then and end if is executed if the test is true
Example
@Code Dim price=50 End Code <html> <body> @If price>30 Then @<p>The price is too high.</p> End If </body> </html>
Run example
The Else Condition

An if statement can include an else condition. The else condition defines the code to be executed if the condition is false.
Example
@Code Dim price=20 End Code <html> <body> @if price>30 then @<p>The price is too high.</p> Else @<p>The price is OK.</p> End If </body> </htmlV>
Run example
Note: In the example above, if the first condition is true, it will be executed. The else condition covers "everything else".
The ElseIf Condition

Multiple conditions can be tested with an else if condition:
Example
@Code Dim price=25 End Code <html> <body> @If price>=30 Then @<p>The price is high.</p> ElseIf price>20 And price<30 @<p>The price is OK.</p> Else @<p>The price is low.</p> End If </body> </html>
Run example
In the example above, if the first condition is true, it will be executed.
If not, then if the next condition is true, this condition will be executed. You can have any number of else if conditions. If none of the if or else if conditions are true, the last else block (without a condition) covers "everything else".
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

ASP.NET is a development framework for building web pages and web sites with HTML, CSS, JavaScript and server scripting. ASP.NET supports three different development models: Web Pages, MVC (Model View Controller), and Web Forms. 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#) A web server (IIS Express) A database server (SQL Server Compact) A full web development framework (ASP.NET) If you install Visual Web Developer, you will get more benefits from this tutorial. If you want to install Visual Web Developer, click on this link: http://www.microsoft.com/web/gallery/install.aspx?appid=VWDorVS2010SP1Pack After you have installed Visual Web Developer the first time, it pays to run the installation one more time, to install fixes and service packs. Just click on the link once more.
ASP.NET MVC References

At the end of this tutorial you will find a complete ASP.NET MVC reference.
Previous
Next Chapter
ASP.NET MVC - Internet Application

Previous
To learn ASP.NET MVC, we will Build an Internet Application Part I: Creating the Application
Next Chapter
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
To learn ASP.NET MVC, we are Building an Internet application Part II: Exploring the Application Folders
Next Chapter
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
To learn ASP.NET MVC, we are Building an Internet Application. Part III: Adding Styles and a Consistent Look (Layout).
Next Chapter
Adding a Layout
The file _Layout.cshtml represent the layout of each page in the application. It is located in the Shared folder inside the Views folder. Open the file and swap the content with this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 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 { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } a { color: #034af3; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px;
position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ table.data { background-color:#ffffff; border:1px solid #c3c3c3; border-collapse:collapse; width:100%; } table.data th { background-color:#e8eef4; border:1px solid #c3c3c3; padding:3px; } table.data td { border:1px solid #c3c3c3; padding:3px; }
The _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
To learn ASP.NET MVC, we are Building an Internet Application. Part IV: Adding a Controller.
Next Chapter
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
To learn ASP.NET MVC, we are Building an Internet Application. Part V: Adding Views for Displaying the Application.
Next Chapter
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 Plain HTML Classic ASP Classic ASP.NET ASP.NET Razor C# ASP.NET Razor VB Extention .htm or .html .asp .aspx .cshtml .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";} <h1>Welcome to W3Schools</h1> <p>Put Home Page content here</p>
The About File

The file About.cshtml represent the About page of the application. Put the following content in the file:
@{ViewBag.Title = "About Us";} <h1>About Us</h1> <p>Put About Us content here</p>
Run the Application

Select Debug, Start Debugging (or F5) from the Visual Web Developer menu. Your application will look like this:
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
To learn ASP.NET MVC, we are Building an Internet Application. Part VI: Adding a Database.
Next Chapter
Creating the Database

Visual Web Developer comes with a free SQL database called SQL Server Compact. The database needed for this tutorial can be created with these simple steps: Right-click the App_Data folder in the Solution Explorer window Select Add, New Item Select SQL Server Compact Local Database * Name the database Movies.sdf. Click the Add button * If SQL Server Compact Local Database is not an option, you have not installed SQL Server Compact on your computer. Install it from this link: SQL Server Compact Visual Web Developer automatically creates the database in the App_Data folder. Note: In this tutorial it is expected that you have some knowledge about SQL databases. If you want to study this topic first, please visit our SQL Tutorial.
Adding a Database Table

Double-clicking the Movies.sdf file in the App_Data folder will open a Database Explorer window. To create a new table in the database, right-click the Tables folder, and select Create Table. Create the following columns: Column ID Title Director Date 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: Type int (primary key) nvarchar(100) nvarchar(100) datetime Allow Nulls No No No No
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 1 2 Title Psycho La Dolce Vita Director Alfred Hitchcock Federico Fellini Date 01.01.1960 01.01.1960
Note: The ID column is updated automatically. You should not edit it.
Adding a Connection String

Add the following element to the <connectionStrings> element in your Web.config file:
<add name="MovieDBContext" connectionString="Data Source=|DataDirectory|Movies.sdf" providerName="System.Data.SqlServerCe.4.0"/>
Previous
Next Chapter
ASP.NET MVC - Models

Previous
To learn ASP.NET MVC, we are Building an Internet Application. Part VII: Adding a Data Model.
Next Chapter
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
To learn ASP.NET MVC, we are Building an Internet Application. Part VIII: Adding Security.
Next Chapter
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)] [DataType(DataType.Password)] [Display(Name = "New password")] public string NewPassword { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm new password")] [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")] public string ConfirmPassword { get; set; } }
The Logon Model

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

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

Previous
HTML Helpers are used to modify HTML output
Next Chapter
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 .linkText .actionName .routeValues .controllerName .htmlAttributes .protocol .hostname .fragment Description The link text (label) The target action The values passed to the action The target controller The set of attributes to the link The link protocol The host name for the link The anchor target for the link
Note: You can pass values to a controller action. For example, you can pass the id of a database record to a database edit action: Razor Syntax C#:
@Html.ActionLink("Edit Record", "Edit", new {Id=3})

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

The Html.ActionLink() helper above, outputs the following HTML:
<a href="/Home/Edit/3">Edit Record</a>
HTML Form Elements

There following HTML helpers can be used to render (modify and output) HTML form elements: BeginForm() EndForm() TextArea() TextBox() CheckBox()
RadioButton() ListBox() 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
Learn how to publish an MVC application without using Visual Web Developer.
Next Chapter
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 to your application's bin folder on the remote server.
4. Copy the SQL Server Compact DLL Files

If your application has a SQL Server Compact database (an .sdf file in App_Data folder), you must copy the SQL Server Compact DLL files: Copy everything from your folder: C:\Program Files (x86)\Microsoft SQL Server Compact Edition\v4.0\Private to your application's bin folder on the remote server. Create (or edit) the Web.config file for your application:
Example C#
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.data> <DbProviderFactories> <remove invariant="System.Data.SqlServerCe.4.0" /> <add invariant="System.Data.SqlServerCe.4.0" name="Microsoft SQL Server Compact 4.0" description=".NET Framework Data Provider for Microsoft SQL Server Compact" type="System.Data.SqlServerCe.SqlCeProviderFactory, System.Data.SqlServerCe, Version=4.0.0.1,Culture=neutral, PublicKeyToken=89845dcd8080cc91" /> </DbProviderFactories> </system.data> </configuration>
5. Copy SQL Server Compact Data

Do you have .sdf files in your App_Data folder that contains test data? Do you want to publish the test data to the remote server? Most likely not. If you have to copy the SQL data files (.sdf files), you should delete everything in the database, and then copy the empty .sdf file from your development computer to the server.
THAT'S IT. GOOD LUCK !
Previous
Next Chapter
ASP.NET MVC - Reference

Classes
Class AcceptVerbsAttribute ActionDescriptor ActionExecutedContext ActionExecutingContext ActionFilterAttribute ActionMethodSelectorAttribute ActionNameAttribute ActionNameSelectorAttribute ActionResult Description Represents an attribute that specifies which HTTP verbs an action method will respond to. Provides information about an action method, such as its name, controller, parameters, attributes, and filters. Provides the context for the ActionExecuted method of the ActionFilterAttribute class. Provides the context for the ActionExecuting method of the ActionFilterAttribute class. Represents the base class for filter attributes. Represents an attribute that is used to influence the selection of an action method. Represents an attribute that is used for the name of an action. Represents an attribute that affects the selection of an action method. Encapsulates the result of an action method and is used to perform a framework-level operation on behalf of the action method. Provides a class that implements the IMetadataAware interface in order to support additional metadata. Represents support for rendering HTML in AJAX scenarios within a view. Represents support for rendering HTML in AJAX scenarios within a strongly typed view. Represents a class that extends the HttpRequestBase class by adding the ability to determine whether an HTTP request is an AJAX request. Allows a request to include HTML markup during model binding by skipping request validation for the property. (It is strongly recommended that your application explicitly check all models where you disable request validation in order to prevent script exploits.) Provides a way to register one or more areas in an ASP.NET MVC application. Encapsulates the information that is required in order to register an area within an ASP.NET MVC application. Provides an abstract class to implement a metadata provider. Provides an abstract class for classes that implement a validation provider. Provides the base class for asynchronous controllers. Represents an attribute that is used to set the timeout value, in milliseconds, for an asynchronous method. Encapsulates the information that is required for using an AuthorizeAttribute attribute. Represents an attribute that is used to restrict access by callers to an action method. Represents an attribute that is used to provide details about how model binding to a parameter should occur. Represents the base class for views that are compiled by the BuildManager class before being rendered by a view engine. Provides a base class for view engines. Maps a browser request to a byte array. Represents an attribute that is used to indicate that an action method should be called only as a child action. Represents a value provider for values from child actions. Represents a factory for creating value provider objects for child actions. Returns the client data-type model validators. Provides an attribute that compares two properties of a model. Represents a user-defined content type that is the result of an action method. Provides methods that respond to HTTP requests that are made to an ASP.NET MVC Web site. Represents a class that is responsible for invoking the action
AdditionalMetadataAttribute AjaxHelper AjaxHelper(Of TModel) AjaxRequestExtensions
AllowHtmlAttribute
AreaRegistration AreaRegistrationContext AssociatedMetadataProvider AssociatedValidatorProvider AsyncController AsyncTimeoutAttribute AuthorizationContext AuthorizeAttribute BindAttribute BuildManagerCompiledView BuildManagerViewEngine ByteArrayModelBinder ChildActionOnlyAttribute ChildActionValueProvider ChildActionValueProviderFactory ClientDataTypeModelValidatorProvider CompareAttribute ContentResult Controller ControllerActionInvoker
methods of a controller. ControllerBase ControllerBuilder ControllerContext ControllerDescriptor ControllerInstanceFilterProvider CustomModelBinderAttribute DataAnnotationsModelMetadata Represents the base class for all MVC controllers. Represents a class that is responsible for dynamically building a controller. Encapsulates information about an HTTP request that matches specified RouteBase and ControllerBase instances. Encapsulates information that describes a controller, such as its name, type, and actions. Adds the controller to the FilterProviderCollection instance. Represents an attribute that invokes a custom model binder. Provides a container for common metadata, for the DataAnnotationsModelMetadataProvider class, and for the DataAnnotationsModelValidator class for a data model.
DataAnnotationsModelMetadataProvider Implements the default model metadata provider for ASP.NET MVC. DataAnnotationsModelValidator DataAnnotationsModelValidator(Of TAttribute) DataErrorInfoModelValidatorProvider DefaultControllerFactory DefaultModelBinder DefaultViewLocationCache DependencyResolver Provides a model validator. Provides a model validator for a specified validation type.
DataAnnotationsModelValidatorProvider Implements the default validation provider for ASP.NET MVC. Provides a container for the error-information model validator. Represents the controller factory that is registered by default. Maps a browser request to a data object. This class provides a concrete implementation of a model binder. Represents a memory cache for view locations. Provides a registration point for dependency resolvers that implement IDependencyResolver or the Common Service Locator IServiceLocator interface. Provides a type-safe implementation of GetService and GetServices. Represents the base class for value providers whose values come from a collection that implements the IDictionary(Of TKey, TValue) interface. Provides an empty metadata provider for data models that do not require metadata. Provides an empty validation provider for models that do not require a validator. Represents a result that does nothing, such as a controller action method that returns nothing. Provides the context for using the HandleErrorAttribute class. Provides a helper class to get the model name from an expression. Provides a container for client-side field validation metadata. Sends the contents of a binary file to the response. Sends the contents of a file to the response. Represents a base class that is used to send binary file content to the response. Sends binary content to the response by using a Stream instance. Represents a metadata class that contains a reference to the implementation of one or more of the filter interfaces, the filter's order, and the filter's scope. Represents the base class for action and result filter attributes. Defines a filter provider for filter attributes. Encapsulates information about the available action filters. Represents the collection of filter providers for the application. Provides a registration point for filters. Contains the form value providers for the application. Encapsulates information that is required in order to validate and process the input data from an HTML form. Represents a value provider for form values that are contained in a NameValueCollection object. Represents a class that is responsible for creating a new instance of a form-value provider object. Represents a class that contains all the global filters. Represents the global filter collection. Represents an attribute that is used to handle an exception that is thrown by an action method.
DependencyResolverExtensions DictionaryValueProvider(Of TValue)
EmptyModelMetadataProvider EmptyModelValidatorProvider EmptyResult ExceptionContext ExpressionHelper FieldValidationMetadata FileContentResult FilePathResult FileResult FileStreamResult Filter
FilterAttribute FilterAttributeFilterProvider FilterInfo FilterProviderCollection FilterProviders FormCollection FormContext FormValueProvider FormValueProviderFactory GlobalFilterCollection GlobalFilters HandleErrorAttribute
HandleErrorInfo HiddenInputAttribute Encapsulates information for handling an error that was thrown by an action method. Represents an attribute that is used to indicate whether a property or field value should be rendered as a hidden input element. Represents support for rendering HTML controls in a view. Represents support for rendering HTML controls in a strongly typed view. Represents an attribute that is used to restrict an action method so that the method handles only HTTP DELETE requests. Represents a value provider to use with values that come from a collection of HTTP files. Represents a class that is responsible for creating a new instance of an HTTP file collection value provider object. Represents an attribute that is used to restrict an action method so that the method handles only HTTP GET requests. Defines an object that is used to indicate that the requested resource was not found. Represents an attribute that is used to restrict an action method so that the method handles only HTTP POST requests. Binds a model to a posted file. Represents an attribute that is used to restrict an action method so that the method handles only HTTP PUT requests. Extends the HttpRequestBase class that contains the HTTP values that were sent by a client during a Web request. Provides a way to return an action result with a specific HTTP response status code and description. Represents the result of an unauthorized HTTP request. Sends JavaScript content to the response. Represents a class that is used to send JSON-formatted content to the response. Enables action methods to send and receive JSON-formatted text and to model-bind the JSON text to parameters of action methods. Maps a browser request to a LINQ Binary object. Represents an attribute that is used to associate a model type to a model-builder type. Represents a class that contains all model binders for the application, listed by binder type. Provides a container for model binder providers. Provides a container for model binder providers. Provides global access to the model binders for the application. Provides the context in which a model binder functions. Provides a container for an equality validation rule that is sent to the browser. Provides a container for a range-validation rule that is sent to the browser. Provides a container for a regular-expression client validation rule that is sent to the browser. Provides a container for a remote validation rule that is sent to the browser. Provides a container for client validation for required field. Provides a base class container for a client validation rule that is sent to the browser. Provides a container for a string-length validation rule that is sent to the browser. Represents an error that occurs during model binding. A collection of ModelError instances. Provides a container for common metadata, for the ModelMetadataProvider class, and for the ModelValidator class for a data model. Provides an abstract base class for a custom metadata provider. Provides a container for the current ModelMetadataProvider instance. Encapsulates the state of model binding to a property of an action-method argument, or to the argument itself. Represents the state of an attempt to bind a posted form to an action method, which includes validation information. Provides a container for a validation result.
HtmlHelper HtmlHelper(Of TModel) HttpDeleteAttribute
HttpFileCollectionValueProvider HttpFileCollectionValueProviderFactory HttpGetAttribute HttpNotFoundResult HttpPostAttribute
HttpPostedFileBaseModelBinder HttpPutAttribute HttpRequestExtensions HttpStatusCodeResult HttpUnauthorizedResult JavaScriptResult JsonResult JsonValueProviderFactory
LinqBinaryModelBinder ModelBinderAttribute ModelBinderDictionary ModelBinderProviderCollection ModelBinderProviders ModelBinders ModelBindingContext ModelClientValidationEqualToRule ModelClientValidationRangeRule ModelClientValidationRegexRule ModelClientValidationRemoteRule ModelClientValidationRequiredRule ModelClientValidationRule ModelClientValidationStringLengthRule ModelError ModelErrorCollection ModelMetadata
ModelMetadataProvider ModelMetadataProviders ModelState ModelStateDictionary ModelValidationResult
ModelValidator ModelValidatorProvider ModelValidatorProviderCollection ModelValidatorProviders MultiSelectList MvcFilter Provides a base class for implementing validation logic. Provides a list of validators for a model. Provides a container for a list of validation providers. Provides a container for the current validation provider. Represents a list of items that users can select more than one item from. When implemented in a derived class, provides a metadata class that contains a reference to the implementation of one or more of the filter interfaces, the filter's order, and the filter's scope. Selects the controller that will handle an HTTP request. Represents an HTML-encoded string that should not be encoded again. Verifies and processes an HTTP request. Creates an object that implements the IHttpHandler interface and passes the request context to it. Creates instances of MvcWebPageRazorHost files. Extends a NameValueCollection object so that the collection can be copied to a specified dictionary. Represents the base class for value providers whose values come from a NameValueCollection object. Provides a convenience wrapper for the AsyncTimeoutAttribute attribute. Represents an attribute that is used to indicate that a controller method is not an action method. Represents an attribute that is used to mark an action method whose output will be cached. Encapsulates information for binding action-method parameters to a data model. Contains information that describes a parameter. Represents a base class that is used to send a partial view to the response. Provides a registration point for ASP.NET Razor preapplication start code. Represents a value provider for query strings that are contained in a NameValueCollection object. Represents a class that is responsible for creating a new instance of a query-string value-provider object. Provides an adapter for the RangeAttribute attribute. Represents the class used to create views that have Razor syntax. Represents a view engine that is used to render a Web page that uses the ASP.NET Razor syntax. Controls the processing of application actions by redirecting to a specified URI. Represents a result that performs a redirection by using the specified route values dictionary. Contains information that describes a reflected action method. Contains information that describes a reflected controller. Contains information that describes a reflected actionmethod parameter. Provides an adapter for the RegularExpressionAttribute attribute. Provides an attribute that uses the jQuery validation plug-in remote validator. Provides an adapter for the RequiredAttributeAttribute attribute. Represents an attribute that forces an unsecured HTTP request to be re-sent over HTTPS. Provides the context for the OnResultExecuted method of the ActionFilterAttribute class. Provides the context for the OnResultExecuting method of the ActionFilterAttribute class. Extends a RouteCollection object for MVC routing. Represents a value provider for route data that is contained in an object that implements the IDictionary(Of TKey, TValue) interface. Represents a factory for creating route-data value provider objects. Represents a list that lets users select one item. Represents the selected item in an instance of the SelectList
MvcHandler MvcHtmlString MvcHttpHandler MvcRouteHandler MvcWebRazorHostFactory NameValueCollectionExtensions NameValueCollectionValueProvider NoAsyncTimeoutAttribute NonActionAttribute OutputCacheAttribute ParameterBindingInfo ParameterDescriptor PartialViewResult PreApplicationStartCode QueryStringValueProvider QueryStringValueProviderFactory RangeAttributeAdapter RazorView RazorViewEngine RedirectResult RedirectToRouteResult ReflectedActionDescriptor ReflectedControllerDescriptor ReflectedParameterDescriptor RegularExpressionAttributeAdapter RemoteAttribute RequiredAttributeAdapter RequireHttpsAttribute ResultExecutedContext ResultExecutingContext RouteCollectionExtensions RouteDataValueProvider
RouteDataValueProviderFactory SelectList SelectListItem
class. SessionStateAttribute SessionStateTempDataProvider StringLengthAttributeAdapter TempDataDictionary TemplateInfo UrlHelper UrlParameter ValidatableObjectAdapter ValidateAntiForgeryTokenAttribute ValidateInputAttribute ValueProviderCollection ValueProviderDictionary ValueProviderFactories ValueProviderFactory ValueProviderFactoryCollection ValueProviderResult Specifies the session state of the controller. Provides session-state data to the current TempDataDictionary object. Provides an adapter for the StringLengthAttribute attribute. Represents a set of data that persists only from one request to the next. Encapsulates information about the current template context. Contains methods to build URLs for ASP.NET MVC within an application. Represents an optional parameter that is used by the MvcHandler class during routing. Provides an object adapter that can be validated. Represents an attribute that is used to prevent forgery of a request. Represents an attribute that is used to mark action methods whose input must be validated. Represents the collection of value-provider objects for the application. Obsolete. Represents a dictionary of value providers for the application. Represents a container for value-provider factory objects. Represents a factory for creating value-provider objects. Represents the collection of value-provider factories for the application. Represents the result of binding a value (such as from a form post or query string) to an action-method argument property, or to the argument itself. Encapsulates information that is related to rendering a view. Represents a container that is used to pass data between a controller and a view. Represents a container that is used to pass strongly typed data between a controller and a view. Encapsulates information about the current template content that is used to develop templates and about HTML helpers that interact with templates. Represents a collection of view engines that are available to the application. Represents the result of locating a view engine. Represents a collection of view engines that are available to the application. Represents the information that is needed to build a master view page. Represents the information that is required in order to build a strongly typed master view page. Represents the properties and methods that are needed to render a view as a Web Forms page. Represents the information that is required in order to render a strongly typed view as a Web Forms page. Represents a class that is used to render a view by using an IView instance that is returned by an IViewEngine object. Represents a base class that is used to provide the model to the view and then render the view to the response. Provides an abstract class that can be used to implement a view start (master) page. Provides a container for TemplateInfo objects. Provides a container for TemplateInfo objects. Represents the type of a view. Represents the information that is needed to build a user control. Represents the information that is required in order to build a strongly typed user control. Represents an abstract base-class implementation of the IViewEngine interface. Represents the information that is needed to build a Web Forms page in ASP.NET MVC. Represents a view engine that is used to render a Web Forms page to the response. Represents the properties and methods that are needed in order to render a view that uses ASP.NET Razor syntax. Represents the properties and methods that are needed in order to render a view that uses ASP.NET Razor syntax.
ViewContext ViewDataDictionary ViewDataDictionary(Of TModel) ViewDataInfo
ViewEngineCollection ViewEngineResult ViewEngines ViewMasterPage ViewMasterPage(Of TModel) ViewPage ViewPage(Of TModel) ViewResult ViewResultBase ViewStartPage ViewTemplateUserControl ViewTemplateUserControl(Of TModel) ViewType ViewUserControl ViewUserControl(Of TModel) VirtualPathProviderViewEngine WebFormView WebFormViewEngine WebViewPage WebViewPage(Of TModel)
Interfaces
Interface IActionFilter IActionInvoker IAuthorizationFilter IClientValidatable IController IControllerActivator IControllerFactory IDependencyResolver IExceptionFilter IFilterProvider IMetadataAware IModelBinder IModelBinderProvider IMvcFilter IResultFilter IRouteWithArea ITempDataProvider Description Defines the methods that are used in an action filter. Defines the contract for an action invoker, which is used to invoke an action in response to an HTTP request. Defines the methods that are required for an authorization filter. Provides a way for the ASP.NET MVC validation framework to discover at run time whether a validator has support for client validation. Defines the methods that are required for a controller. Provides fine-grained control over how controllers are instantiated using dependency injection. Defines the methods that are required for a controller factory. Defines the methods that simplify service location and dependency resolution. Defines the methods that are required for an exception filter. Provides an interface for finding filters. Provides an interface for exposing attributes to the AssociatedMetadataProvider class. Defines the methods that are required for a model binder. Defines methods that enable dynamic implementations of model binding for classes that implement the IModelBinder interface. Defines members that specify the order of filters and whether multiple filters are allowed. Defines the methods that are required for a result filter. Associates a route with an area in an ASP.NET MVC application. Defines the contract for temporary-data providers that store data that is viewed on the next request. Defines the methods that are required for a value provider in ASP.NET MVC. Defines the methods that are required for a view. Defines the methods that are required for a view data dictionary. Defines the methods that are required for a view engine. Defines the methods that are required in order to cache view locations in memory. Provides fine-grained control
IUnvalidatedValueProvider Represents an IValueProvider interface that can skip request validation. IValueProvider IView IViewDataContainer IViewEngine IViewLocationCache IViewPageActivator
Previous
Next Chapter
ASP.NET Web Forms - Demo

This is a Web Forms Demonstration

Web Forms is one of the 3 programming models for creating ASP.NET web sites and web applications. The other two programming models are Web Pages and MVC (Model, View, Controller). This demonstration will teach you ASP.NET Web Forms by building a web site: Create a web site Add files and folders Add a consistent look Add navigation Add a database
Like to Read a Tutorial First?

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

Visual Web Developer is a free development tool, tailor made for Web Forms (and MVC). Visual Web Developer contains: A web server markup language (Razor using VB or C#) A web server (IIS Express) A database server (SQL Server Compact) ASP.NET web controls and web components A full web development framework (ASP.NET) You should install Visual Web Developer, to get the full benefits from this demo. If you want to install Visual Web Developer, click on this picture:
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
Learn ASP.NET Web Forms by building a web site from scratch. Part I: Creating standard folders and a consistent style.
Next Chapter
What We Will Do
In this chapter we will: Create Create Create Create Create a new empty web site the necessary folders a standard style sheet for the site a standard layout for the site a home page for the site
1. Start With an Empty Web Site

If you have followed this tutorial, you have already created a web site called DemoWF. If not, you can create an empty web site with Visual Web Developer: Start Visual Web Developer Click on "New Web Site..." Choose "Visual Basic (or Visual C#) Select the template "ASP.NET Empty Web Site" Set the file location to something like c:\w3schools_demo\DemoWF
2. Create Folders
In the folder named "DemoWF" (your website), create 5 folders: Account - for storing login and membership files App_Data - for storing databases and data files Images - for storing images Scripts - for storing browser scripts Styles - for storing css styles
To create a new folder, right-click the root folder and select "New Folder..."
3. Create a Style Sheet

In the "Styles" folder, create a new style sheet (CSS file) named "Site.css". Put the following code inside the CSS file:
Site.css
body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { color: #ffffff; } h2 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0px 4px 4px 4px;
}
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> <p>A Style Sheet (Site.css)</p> </asp:Content>
Run example
The file starts with a reference to the master file. Inside an <asp:Content> element it contains normal HTML markup.
Congratulations
You have created your first (ASP.NET Web Forms) web site, with a main page (the Default page), a common template for all your pages (the Master page), and a common style sheet (the CSS file). In the next chapters of this tutorial, we will add navigation to the web site. Then we will add a database, and finally we will add login and security.
Web Forms File Types

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

Previous
Learn ASP.NET Web Forms by building a web site from scratch. Part II: Adding Navigation.
Next Chapter
What We Will Do
In this chapter we will: Add an about page Add a navigation menu
Add an About Page

In the "DemoWF" folder, create a new Web Form named "About.aspx". Put the following code inside the file:
About.aspx
<%@ Page Title="About" Language="VB" MasterPageFile="Site.master" %> <asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="Server"> <h2>About Us</h2> <p>Lorem Ipsum Porem Lorem Ipsum Porem</p> </asp:Content>
The about file above contains a heading and a paragraph. Please feel free to edit the content.
Add a Navigation Menu

In the master file named "Site.master" and, edit the content. Put the following code inside the master file:
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): Put the following code inside the file:
Site.css
body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 { color: #ffffff; }
h2 { border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 4px 4px 0 0; } ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; color: #034af3; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; }
The style sheet above, is a copy of the style sheet from the previous chapter, with added styles for an unordered list (marked red).
Edit the Home Page

In your "DemoWF" folder, edit the page (file) named "Default.aspx". Put the following code inside the file:
Default.aspx
<%@ Page Title="Home" Language="VB" MasterPageFile="Site.master" %> <asp:Content ID="Content" ContentPlaceHolderID="MainContent" Runat="Server"> <h1>Welcome</h1> <p>Lorem Ipsum Porem Lorem Ipsum Porem</p> </asp:Content>
Run example
Feel free to edit the content.
Congratulations
You have added navigation to your website. In the next chapter we will add a database.
Previous
Next Chapter
ASP.NET Web Forms - Databases

Previous
Learn ASP.NET Web Forms by building a web site from scratch. Part III: Adding a Database.
Next Chapter
What We Will Do
In this chapter we will: Create a database Add data to the database Create a page to list the database
Creating the Database

Visual Web Developer comes with a free SQL database called SQL Server Compact. The database needed for this tutorial can be created with these simple steps: Right-click the App_Data folder in the Solution Explorer window Select Add, New Item Select SQL Server Compact Local Database * Name the database Movies.sdf. Click the Add button * If SQL Server Compact Local Database is not an option, you have not installed SQL Server Compact on your computer. Install it from this link: SQL Server Compact Visual Web Developer automatically creates the database in the App_Data folder. Note: In this tutorial it is expected that you have some knowledge about SQL databases. If you want to study this topic first, please visit our SQL Tutorial.
Adding a Database Table

Double-clicking the Movies.sdf file in the App_Data folder will open a Database Explorer window. To create a new table in the database, right-click the Tables folder, and select Create Table. Create the following columns: Column ID Title Director Date 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: Type int (primary key) nvarchar(100) nvarchar(100) datetime Allow Nulls No No No No
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 1 2 Title Psycho La Dolce Vita Director Alfred Hitchcock Federico Fellini Date 01.01.1960 01.01.1960
Note: The ID column is updated automatically. You should not edit it.
Adding Products Page

In the "DemoWF" folder, create a new Web Form named "Movies.aspx". Put the following code inside the file:
Movies.aspx
<%@ Page Title="" Language="VB" MasterPageFile="Site.master" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server"> <h2>Products</h2> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="Movies"> <Columns> <asp:BoundField <asp:BoundField <asp:BoundField <asp:BoundField </Columns> </asp:GridView> <asp:SqlDataSource ID="Movies" runat="server" ConnectionString="Data Source=|DataDirectory|\Movies.sdf" ProviderName="System.Data.SqlServerCe.4.0" SelectCommand="SELECT [ID], [Title], [Director], [Date] FROM [Movies]"> </asp:SqlDataSource> </asp:Content> DataField="ID" HeaderText="ID" /> DataField="Title" HeaderText="Title" /> DataField="Director" HeaderText="Director" /> DataField="Date" HeaderText="Date" />
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
ASP.NET is a development framework for building web pages and web sites with HTML, CSS, JavaScript and server scripting. ASP.NET supports three different development models: Web Pages, MVC (Model View Controller), and Web Forms. THIS TUTORIAL COVERS WEB FORMS
Next Chapter
Web Pages
MVC ASP.NET Framework
Web Forms
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). Visual Web Developer contains: A web server markup language (Razor using VB or C#) A web server (IIS Express) A database server (SQL Server Compact) ASP.NET web controls and web components A full web development framework (ASP.NET) You should install Visual Web Developer, to get the full benefits from this 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
A simple ASP.NET page looks just like an ordinary HTML page.
Next Chapter
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> <body bgcolor="yellow"> <center> <h2>Hello W3Schools!</h2> </center> </body> </html>

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

Fundamentally an ASP.NET page is just the same as an HTML page. An HTML page has the extension .htm. If a browser requests an HTML page from the server, the server sends the page to the browser without any modifications. An ASP.NET page has the extension .aspx. If a browser requests an ASP.NET page, the server processes any executable code in the page, before the result is sent back to the browser. The ASP.NET page above does not contain any executable code, so nothing is executed. In the next examples we will add some executable code to the page to demonstrate the difference between static HTML pages and dynamic ASP pages.
Classic ASP
Active Server Pages (ASP) has been around for several years. With ASP, executable code can be placed inside HTML pages. Previous versions of ASP (before ASP .NET) are often called Classic ASP. ASP.NET is not fully compatible with Classic ASP, but most Classic ASP pages will work fine as ASP.NET pages, with only minor changes. If you want to learn more about Classic ASP, please visit our ASP Tutorial.
Dynamic Page in Classic ASP

To demonstrate how ASP can display pages with dynamic content, we have added some executable code (in red) to the previous example:
<html> <body bgcolor="yellow"> <center> <h2>Hello W3Schools!</h2> <p><%Response.Write(now())%></p> </center> </body> </html>
The code inside the <% --%> tags is executed on the server. Response.Write is ASP code for writing something to the HTML output stream. Now() is a function returning the servers current date and time. If you want to try it yourself, save the code in a file called "dynpage.asp", and create a link to the file like this: dynpage.asp
Dynamic Page in ASP .NET

This following code displays our example as an ASP.NET page:
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
Server controls are tags that are understood by the server.
Next Chapter
Limitations in Classic ASP

The listing below was copied from the previous chapter:
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:
<script runat="server"> Sub submit(Source As Object, e As EventArgs) button1.Text="You clicked me!" End Sub
</script> <html> <body> <form runat="server"> <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> <form runat="server"> <p>Enter a number from 1 to 100: <asp:TextBox id="tbox1" runat="server" /> <br /><br /> <asp:Button Text="Submit" runat="server" /> </p> <p> <asp:RangeValidator ControlToValidate="tbox1" MinimumValue="1" MaximumValue="100" Type="Integer" Text="The value must be from 1 to 100!" runat="server" /> </p> </form> </body> </html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - Events

Previous
An Event Handler is a subroutine that executes code for a given event.
Next Chapter
ASP.NET - Event Handlers

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

The Page_Load event is one of many events that ASP.NET understands. The Page_Load event is triggered when a page loads, and ASP.NET will automatically call the subroutine Page_Load, and execute the code inside it:
Example
<script runat="server"> Sub Page_Load lbl1.Text="The date and time is " & now() End Sub </script> <html> <body> <form runat="server"> <h3><asp:label id="lbl1" runat="server" /></h3> </form> </body> </html>
Show example
Note: The Page_Load event contains no object references or event arguments!
The Page.IsPostBack Property

The Page_Load subroutine runs EVERY time the page is loaded. If you want to execute the code in the Page_Load subroutine only the FIRST time the page is loaded, you can use the Page.IsPostBack property. If the Page.IsPostBack property is false, the page is loaded for the first time, if it is true, the page is posted back to the server (i.e. from a button click on a form):
Example
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then lbl1.Text="The date and time is " & now() end if End Sub Sub submit(s As Object, e As EventArgs) lbl2.Text="Hello World!" End Sub </script> <html> <body> <form runat="server"> <h3><asp:label id="lbl1" runat="server" /></h3> <h3><asp:label id="lbl2" runat="server" /></h3> <asp:button text="Submit" onclick="submit" runat="server" /> </form> </body> </html>
Show example
The example above will write the "The date and time is...." message only the first time the page is loaded. When a user clicks on the Submit button, the submit subroutine will write "Hello World!" to the second label, but the date and time in the first label will not change.
Previous
Next Chapter
ASP.NET Web Forms - HTML Forms

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

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

Note: The form is always submitted to the page itself. If you specify an action attribute, it is ignored. If you omit the method attribute, it will be set to method="post" by default. Also, if you do not specify the name and id attributes, they are automatically assigned by ASP.NET. Note: An .aspx page can only contain ONE <form runat="server"> control! If you select view source in an .aspx page containing a form with no name, method, action, or id attribute specified, you will see that ASP.NET has added these attributes to the form. It looks something like this:
<form name="_ctl0" method="post" action="page.aspx" id="_ctl0"> ...some code </form>
Submitting a Form
A form is most often submitted by clicking on a button. The Button server control in ASP.NET has the following format:
<asp:Button id="id" text="label" OnClick="sub" runat="server" />

The id attribute defines a unique name for the button and the text attribute assigns a label to the button. The onClick event handler specifies a named subroutine to execute. In the following example we declare a Button control in an .aspx file. A button click runs a subroutine which changes the text on the button: Example
Previous
Next Chapter
ASP.NET Web Forms - Maintaining the ViewState

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

When a form is submitted in classic ASP, all form values are cleared. Suppose you have submitted a form with a lot of information and the server comes back with an error. You will have to go back to the form and correct the information. You click the back button, and what happens.......ALL form values are CLEARED, and you will have to start all over again! The site did not maintain your ViewState. When a form is submitted in ASP .NET, the form reappears in the browser window together with all form values. How come? This is because ASP .NET maintains your ViewState. The ViewState indicates the status of the page when submitted to the server. The status is defined through a hidden field placed on each page with a <form runat="server"> control. The source could look something like this:
<form name="_ctl0" method="post" action="page.aspx" id="_ctl0"> <input type="hidden" name="__VIEWSTATE" value="dDwtNTI0ODU5MDE1Ozs+ZBCF2ryjMpeVgUrY2eTj79HNl4Q=" /> .....some code </form>
Maintaining the ViewState is the default setting for ASP.NET Web Forms. If you want to NOT maintain the ViewState, include the directive <%@ Page EnableViewState="false" %> at the top of an .aspx page or add the attribute EnableViewState="false" to any control. Look at the following .aspx file. It demonstrates the "old" way to do it. When you click on the submit button, the form value will disappear:
Example
<html> <body> <form action="demo_classicasp.aspx" method="post"> Your name: <input type="text" name="fname" size="20"> <input type="submit" value="Submit"> </form> <% dim fname fname=Request.Form("fname") If fname<>"" Then Response.Write("Hello " & fname & "!") 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
<script runat="server"> Sub submit(sender As Object, e As EventArgs) lbl1.Text="Hello " & txt1.Text & "!" End Sub </script> <html> <body> <form runat="server"> 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
The TextBox control is used to create a text box where the user can input text.
Next Chapter
The TextBox Control

The TextBox control is used to create a text box where the user can input text. The TextBox control's attributes and properties are listed in our web controls reference page. The example below demonstrates some of the attributes you may use with the TextBox control:
Example
<html> <body> <form runat="server"> A basic TextBox: <asp:TextBox id="tb1" runat="server" /> <br /><br /> A password TextBox: <asp:TextBox id="tb2" TextMode="password" runat="server" /> <br /><br /> A TextBox with text: <asp:TextBox id="tb4" Text="Hello World!" runat="server" /> <br /><br /> A multiline TextBox: <asp:TextBox id="tb3" TextMode="multiline" runat="server" /> <br /><br /> A TextBox with height: <asp:TextBox id="tb6" rows="5" TextMode="multiline" runat="server" /> <br /><br /> A TextBox with width: <asp:TextBox id="tb5" columns="30" runat="server" /> </form> </body> </html>
Show example
Add a Script
The contents and settings of a TextBox control may be changed by server scripts when a form is submitted. A form can be submitted by clicking on a button or when a user changes the value in the TextBox control. In the following example we declare one TextBox control, one Button control, and one Label control in an .aspx file. When the submit button is triggered, the submit subroutine is executed. The submit subroutine writes a text to the Label control:
Example
<script runat="server"> Sub submit(sender As Object, e As EventArgs) lbl1.Text="Your name is " & txt1.Text End Sub </script> <html> <body> <form runat="server"> Enter your name: <asp:TextBox id="txt1" runat="server" /> <asp:Button OnClick="submit" Text="Submit" runat="server" /> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>
Show example
In the following example we declare one TextBox control and one Label control in an .aspx file. When you change the value in the TextBox and either click outside the TextBox or press the Tab key, the change subroutine is executed. The submit subroutine writes a text to the Label control:
Example
<script runat="server"> Sub change(sender As Object, e As EventArgs) lbl1.Text="You changed text to " & txt1.Text
End Sub </script> <html> <body> <form runat="server"> Enter your name: <asp:TextBox id="txt1" runat="server" text="Hello World!" ontextchanged="change" autopostback="true"/> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - The Button Control

Previous
The Button control is used to display a push button.
Next Chapter
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> <form runat="server"> <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
<script runat="server"> Sub submit(sender As Object, e As EventArgs) lbl1.Text="Your name is " & txt1.Text End Sub </script> <html> <body> <form runat="server"> Enter your name: <asp:TextBox id="txt1" runat="server" /> <asp:Button OnClick="submit" Text="Submit" runat="server" /> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - Data Binding

We may use data binding to fill lists with selectable items from an imported data source, like a database, an XML file, or a script.
Data Binding
The following controls are list controls which support data binding: asp:RadioButtonList asp:CheckBoxList asp:DropDownList asp:Listbox The selectable items in each of the above controls are usually defined by one or more asp:ListItem controls, like this:
<html> <body> <form runat="server"> <asp:RadioButtonList id="countrylist" runat="server"> <asp:ListItem value="N" text="Norway" /> <asp:ListItem value="S" text="Sweden" /> <asp:ListItem value="F" text="France" /> <asp:ListItem value="I" text="Italy" /> </asp:RadioButtonList> </form> </body> </html>
However, with data binding we may use a separate source, like a database, an XML file, or a script to fill the list with selectable items. By using an imported source, the data is separated from the HTML, and any changes to the items are made in the separate data source. In the next three chapters, we will describe how to bind data from a scripted data source.
Previous
Next Chapter
ASP.NET Web Forms - The ArrayList Object

The ArrayList object is a collection of items containing a single data value.
Try it Yourself - Examples

ArrayList DropDownList ArrayList RadioButtonList
Create an ArrayList
The ArrayList object is a collection of items containing a single data value. Items are added to the ArrayList with the Add() method. The following code creates a new ArrayList object named mycountries and four items are added:
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then dim mycountries=New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") 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:
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then dim mycountries=New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() end if end sub </script>
An ArrayList can also be sorted alphabetically or numerically with the Sort() method:
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then dim mycountries=New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() mycountries.Sort() end if end sub </script>
To sort in reverse order, apply the Reverse() method after the Sort() method:
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then dim mycountries=New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() mycountries.Sort() 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> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" /> </form> </body> </html>
Then add the script that builds the list and binds the values in the list to the RadioButtonList control:
Example
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then dim mycountries=New ArrayList mycountries.Add("Norway") mycountries.Add("Sweden") mycountries.Add("France") mycountries.Add("Italy") mycountries.TrimToSize() mycountries.Sort() rb.DataSource=mycountries rb.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" /> </form> </body> </html>
Show example
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
The Hashtable object contains items in key/value pairs.
Next Chapter

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:
<script runat="server"> Sub Page_Load if Not Page.IsPostBack then dim mycountries=New Hashtable mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") 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> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" /> </form> </body> </html>
Then add the script that builds the list:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New Hashtable mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" /> </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
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New Hashtable mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>
Show example
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:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then 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 sub navigate(s as Object, e As EventArgs) response.redirect(rb.SelectedItem.Value) end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="navigate" /> </form> </body> </html>
Output Result:
CheckBoxList DropDownList RadioButtonList ListBox
ASP Source:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New Hashtable mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") dd.DataSource=mycountries dd.DataValueField="Key" dd.DataTextField="Value" dd.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & dd.SelectedItem.Text end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:DropDownList id="dd" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>
Output Result:
Norway Norway
ASP Source:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New Hashtable mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>
Output Result:
Norway France Italy Sweden
ASP.NET Web Forms - The SortedList Object

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

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:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New SortedList mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") 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:
Then add the script that builds the list:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New SortedList mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" /> </form> </body> </html>
Example
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New SortedList mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>
Show example
Previous
Next Chapter
ASP Source:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New SortedList mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") rb.DataSource=mycountries rb.DataValueField="Key" rb.DataTextField="Value" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>
Output Result:
France Italy Norway Sweden
ASP Source:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then 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 sub navigate(s as Object, e As EventArgs) response.redirect(rb.SelectedItem.Value) end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="navigate" /> </form> </body> </html>
Output Result:
CheckBoxList DropDownList ListBox RadioButtonList
ASP Source:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New SortedList mycountries.Add("N","Norway") mycountries.Add("S","Sweden") mycountries.Add("F","France") mycountries.Add("I","Italy") dd.DataSource=mycountries dd.DataValueField="Key" dd.DataTextField="Value" dd.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & dd.SelectedItem.Text end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:DropDownList id="dd" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>
Output Result:
France France
ASP.NET Web Forms - XML Files

Previous
We can bind an XML file to a list control.
Next Chapter
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:
<script runat="server"> sub Page_Load if Not Page.IsPostBack then 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:
Then add the script that builds the XML DataSet:
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New DataSet mycountries.ReadXml(MapPath("countries.xml")) rb.DataSource=mycountries rb.DataValueField="value" rb.DataTextField="text" rb.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> </form>
</body> </html>
Example
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycountries=New DataSet mycountries.ReadXml(MapPath("countries.xml")) rb.DataSource=mycountries rb.DataValueField="value" rb.DataTextField="text" rb.DataBind() end if end sub sub displayMessage(s as Object,e As EventArgs) lbl1.text="Your favorite country is: " & rb.SelectedItem.Text end sub </script> <html> <body> <form runat="server"> <asp:RadioButtonList id="rb" runat="server" AutoPostBack="True" onSelectedIndexChanged="displayMessage" /> <p><asp:label id="lbl1" runat="server" /></p> </form> </body> </html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - The Repeater Control

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

The Repeater control is used to display a repeated list of items that are bound to the control. The Repeater control may be bound to a database table, an XML file, or another list of items. Here we will show how to bind an XML file to a Repeater control. We will use the following XML file in our examples ("cdcatalog.xml"):
<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> <cd> <title>Hide your heart</title> <artist>Bonnie Tyler</artist> <country>UK</country> <company>CBS Records</company> <price>9.90</price> <year>1988</year> </cd> <cd> <title>Greatest Hits</title> <artist>Dolly Parton</artist> <country>USA</country> <company>RCA</company> <price>9.90</price> <year>1982</year> </cd> <cd> <title>Still got the blues</title> <artist>Gary Moore</artist> <country>UK</country> <company>Virgin records</company> <price>10.20</price> <year>1990</year> </cd> <cd> <title>Eros</title> <artist>Eros Ramazzotti</artist> <country>EU</country> <company>BMG</company> <price>9.90</price> <year>1997</year> </cd> </catalog>
Take a look at the XML file: cdcatalog.xml First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

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

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"):
<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> <cd> <title>Hide your heart</title> <artist>Bonnie Tyler</artist> <country>UK</country> <company>CBS Records</company> <price>9.90</price> <year>1988</year> </cd> <cd> <title>Greatest Hits</title> <artist>Dolly Parton</artist> <country>USA</country> <company>RCA</company> <price>9.90</price> <year>1982</year> </cd> <cd> <title>Still got the blues</title> <artist>Gary Moore</artist> <country>UK</country> <company>Virgin records</company> <price>10.20</price> <year>1990</year> </cd> <cd> <title>Eros</title> <artist>Eros Ramazzotti</artist> <country>EU</country> <company>BMG</company> <price>9.90</price> <year>1997</year> </cd> </catalog>
Take a look at the XML file: cdcatalog.xml First, import the "System.Data" namespace. We need this namespace to work with DataSet objects. Include the following directive at the top of an .aspx page:

<script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycdcatalog=New DataSet mycdcatalog.ReadXml(MapPath("cdcatalog.xml")) 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> <form runat="server"> <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
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycdcatalog=New DataSet mycdcatalog.ReadXml(MapPath("cdcatalog.xml")) cdcatalog.DataSource=mycdcatalog cdcatalog.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp: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
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycdcatalog=New DataSet mycdcatalog.ReadXml(MapPath("cdcatalog.xml")) cdcatalog.DataSource=mycdcatalog cdcatalog.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:DataList id="cdcatalog" runat="server" cellpadding="2" cellspacing="2" borderstyle="inset" backcolor="#e8e8e8" width="100%" headerstyle-font-name="Verdana" headerstyle-font-size="12pt" headerstyle-horizontalalign="center" headerstyle-font-bold="true" itemstyle-backcolor="#778899" itemstyle-forecolor="#ffffff" footerstyle-font-size="9pt" footerstyle-font-italic="true"> <HeaderTemplate> My CD Catalog
</HeaderTemplate> <ItemTemplate> "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> </ItemTemplate> <FooterTemplate> Copyright Hege Refsnes </FooterTemplate> </asp:DataList> </form> </body> </html>
Show example
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
<%@ Import Namespace="System.Data" %> <script runat="server"> sub Page_Load if Not Page.IsPostBack then dim mycdcatalog=New DataSet mycdcatalog.ReadXml(MapPath("cdcatalog.xml")) cdcatalog.DataSource=mycdcatalog cdcatalog.DataBind() end if end sub </script> <html> <body> <form runat="server"> <asp:DataList id="cdcatalog" runat="server" cellpadding="2" cellspacing="2" borderstyle="inset" backcolor="#e8e8e8" width="100%" headerstyle-font-name="Verdana" headerstyle-font-size="12pt" headerstyle-horizontalalign="center" headerstyle-font-bold="True" itemstyle-backcolor="#778899" itemstyle-forecolor="#ffffff" alternatingitemstyle-backcolor="#e8e8e8" alternatingitemstyle-forecolor="#000000" footerstyle-font-size="9pt" footerstyle-font-italic="True"> <HeaderTemplate> My CD Catalog </HeaderTemplate> <ItemTemplate> "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> </ItemTemplate> <AlternatingItemTemplate> "<%#Container.DataItem("title")%>" of <%#Container.DataItem("artist")%> $<%#Container.DataItem("price")%> </AlternatingItemTemplate> <FooterTemplate> © Hege Refsnes </FooterTemplate> </asp:DataList> </form> </body> </html>
Show example
Previous
Next Chapter
ASP.NET Web Forms - Database Connection

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

Database connection - Bind to a DataList control Database connection - Bind to a Repeater control
What is ADO.NET?
ADO.NET ADO.NET ADO.NET ADO.NET is a part of the .NET Framework consists of a set of classes used to handle data access is entirely based on XML has, unlike ADO, no Recordset object
Create a Database Connection

We are going to use the Northwind database in our examples. First, import the "System.Data.OleDb" namespace. We need this namespace to work with Microsoft Access and other OLE DB database providers. We will create the connection to the database in the Page_Load subroutine. We create a dbconn variable as a new OleDbConnection class with a connection string which identifies the OLE DB provider and the location of the database. Then we open the database connection:
<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open() end sub </script>
Note: The connection string must be a continuous string without a line break!
Create a Database Command

To specify the records to retrieve from the database, we will create a dbcomm variable as a new OleDbCommand class. The OleDbCommand class is for issuing SQL queries against database tables:
<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) end sub </script>
Create a DataReader
The OleDbDataReader class is used to read a stream of records from a data source. A DataReader is created by calling the ExecuteReader method of the OleDbCommand object:
<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm,dbread dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) dbread=dbcomm.ExecuteReader() end sub </script>
Bind to a Repeater Control

Then we bind the DataReader to a Repeater control:
Example
<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm,dbread dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; data source=" & server.mappath("northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) dbread=dbcomm.ExecuteReader() customers.DataSource=dbread customers.DataBind() dbread.Close() dbconn.Close() end sub </script> <html> <body> <form runat="server"> <asp:Repeater id="customers" runat="server"> <HeaderTemplate> <table border="1" width="100%"> <tr> <th>Companyname</th> <th>Contactname</th> <th>Address</th> <th>City</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Container.DataItem("companyname")%></td> <td><%#Container.DataItem("contactname")%></td> <td><%#Container.DataItem("address")%></td> <td><%#Container.DataItem("city")%></td> </tr> </ItemTemplate> <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:
<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm,dbread dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("/db/northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) dbread=dbcomm.ExecuteReader() customers.DataSource=dbread customers.DataBind() dbread.Close() dbconn.Close() end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:Repeater id="customers" runat="server"> <HeaderTemplate> <table border="1" width="100%"> <tr bgcolor="#b0c4de"> <th>Companyname</th> <th>Contactname</th> <th>Address</th> <th>City</th> </tr> </HeaderTemplate> <ItemTemplate>
Output Result:
Companyname Alfreds Futterkiste Berglunds snabbkp Centro comercial Moctezuma Ernst Handel FISSA Fabrica Inter. Salchichas S.A. Galera del gastrnomo Island Trading
Contactname Maria Anders Christina Berglund
Address Obere Str. 57
City Berlin
Berguvsvgen Lule 8 Mxico D.F. Graz
Francisco Sierras de Chang Granada 9993 Roland Mendel Kirchgasse 6 Diego Roel Eduardo Saavedra Helen Bennett
C/ Moralzarzal, Madrid 86 Rambla de Catalua, 23 Barcelona
Garden House Cowes Crowther Way Maubelstr. 90 1900 Oak St. Brandenburg Vancouver
Kniglich Essen Philip Cramer Laughing Bacchus Yoshi Wine Cellars Tannamuri Magazzini Giovanni Alimentari Riuniti Rovelli North/South Paris spcialits Rattlesnake Canyon Grocery Simons bistro Simon Crowther
Via Ludovico il Bergamo Moro 22
South House London 300 Queensbridge 265, boulevard Marie Bertrand Paris Charonne Paula Wilson Jytte Petersen 2817 Milton Dr. Vinbltet 34 Albuquerque Kbenhavn
ASP Source:
<%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> sub Page_Load dim dbconn,sql,dbcomm,dbread dbconn=New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("/db/northwind.mdb")) dbconn.Open() sql="SELECT * FROM customers" dbcomm=New OleDbCommand(sql,dbconn) dbread=dbcomm.ExecuteReader() customers.DataSource=dbread customers.DataBind() dbread.Close() dbconn.Close() end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:DataList id="customers" 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"
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 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 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
Master pages provide templates for other pages on your web site.
Next Chapter
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> <form runat="server"> <asp:TextBox id="textbox1" runat="server" /> <asp:Button id="button1" runat="server" text="Button" /> </form> </asp:Content>
The content page above demonstrates how .NET controls can be inserted into the content page just like an into an ordinary page. Click to display mypage2.aspx.
Previous
Next Chapter
ASP.NET Web Forms - Navigation

Previous
ASP.NET has built-in navigation controls
Next Chapter
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" /> <form runat="server"> <asp:Menu runat="server" DataSourceId="nav1" /> </form>
The <asp:Menu> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:SiteMapDataSource> control. The <asp:SiteMapDataSource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath
TreeView
The <asp:TreeView> control displays a multi level navigation menu. The menu looks like a tree with branches that can be opened or closed with + or - symbol. Code Example:
<asp:SiteMapDataSource id="nav1" runat="server" /> <form runat="server"> <asp:TreeView runat="server" DataSourceId="nav1" /> </form>
The <asp:TreeView> control in the example above is a placeholder for a server created navigation menu. The data source of the control is defined by the DataSourceId attribute. The id="nav1" connects it to the <asp:SiteMapDataSource> control. The <asp:SiteMapDataSource> control automatically connects to the default sitemap file (web.sitemap). Click here to see a demo of Menu, TreeView, and SiteMapPath
SiteMapPath
The SiteMapPath control displays the trail (navigation path) to the current page. The path acts as clickable links to previous pages. Unlike the TreeView and Menu control the SiteMapPath control does NOT use a SiteMapDataSource. The SiteMapPath control uses the web.sitemap file by default. Tips: If the SiteMapPath displays incorrectly, most likely there is an URL error (typo) in the web.sitemap file. Code Example:
<form runat="server"> <asp:SiteMapPath runat="server" /> </form>

The <asp:SiteMapPath> control in the example above is a placeholder for a server created site path display. Click here to see a demo of Menu, TreeView, and SiteMapPath
Previous
Next Chapter
ASP.NET Web Forms - HTML Controls

Previous
HTML server controls are HTML tags understood by the server.
Next Chapter
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 HtmlAnchor HtmlButton HtmlForm HtmlGeneric HtmlImage HtmlInputButton HtmlInputCheckBox HtmlInputFile HtmlInputHidden HtmlInputImage HtmlInputRadioButton HtmlInputText HtmlSelect HtmlTable HtmlTableCell HtmlTableRow HtmlTextArea Description Controls an <a> HTML element Controls a <button> HTML element Controls a <form> HTML element Controls other HTML element not specified by a specific HTML server control, like <body>, <div>, <span>, etc. Controls an <image> HTML element Controls <input type="button">, <input type="submit">, and <input type="reset"> HTML elements Controls an <input type="checkbox"> HTML element Controls an <input type="file"> HTML element Controls an <input type="hidden"> HTML element Controls an <input type="image"> HTML element Controls an <input type="radio"> HTML element Controls <input type="text"> and <input type="password"> HTML elements Controls a <select> HTML element Controls a <table> HTML element Controls <td>and <th> HTML elements Controls a <tr> HTML element 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 Attributes Disabled HRef id InnerHtml Description Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false The URL target of the link A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities The name of the anchor The name of the function to be executed when the link is clicked Specifies that the control is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The target window to open A title to be displayed by the browser (like the title attribute of the img element) A Boolean value that indicates whether or not the control should be visible
InnerText Name OnServerClick runat Style TagName Target Title 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. HTML Server Controls
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 Attributes Disabled id InnerHtml InnerText OnServerClick runat Style TagName Visible Description Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities The name of the function to be executed when the button is clicked Specifies that the control is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name A Boolean value that indicates whether or not the control should be 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. HTML Server Controls
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 Action Description A URL that defines where to send the data when the form is submitted. Note: This attribute is always set to the URL of the page itself! Attributes Disabled EncType id InnerHtml Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false The mime type used to encode the content of the form A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities How the form posts data to the server. Legal values are: "post" and "get". Default is "post" The name of the form Specifies that the control is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The target window to load the URL A Boolean value that indicates whether or not the control should be visible
InnerText Method Name runat Style TagName Target Visible
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. HTML Server Controls
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 Attributes Disabled id InnerHtml InnerText runat Style TagName Visible Description Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities Specifies that the control is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name A Boolean value that indicates whether or not the control should be 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. HTML Server Controls
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 Align Description How to align the image according to surrounding elements. Legal values are: top middle bottom left right Alt Attributes Border Disabled Height id runat Src Style TagName Visible Width A short description of the image Returns all attribute name and value pairs of the element The width of the borders around the image A Boolean value that indicates whether or not the control should be disabled. Default is false The height of the image A unique id for the control Specifies that the control is a server control. Must be set to "server" The URL of the image to display Sets or returns the CSS properties that are applied to the control Returns the element tag name A Boolean value that indicates whether or not the control should be visible 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. HTML Server Controls
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 Attributes Disabled id Name OnServerClick runat Style TagName Type Value Visible Description Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the element The name of the element The name of the function to be executed when the button is clicked Specifies that the element is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The type of the element The value of the element A Boolean value that indicates whether or not the control should be 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. HTML Server Controls
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 Attributes Checked Disabled id Name runat Style TagName Type Value Visible Event ServerChange Description Returns all attribute name and value pairs of the element A Boolean value that specifies whether or not the element is to be checked A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the control The name of the element Specifies that the element is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The type of the element The value of the element A Boolean value that indicates whether or not the control should be visible Description Occurs when the state of the control has changed
Example
HTMLInputCheckbox Declare two HtmlInputCheckBox controls, one HtmlInputButton control, and one HtmlGeneric 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 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. HTML Server Controls
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 Accept Attributes Disabled id MaxLength Name PostedFile runat Size Style TagName Type Value Visible Description List of acceptable MIME types Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the element The maximum number of characters allowed in this element The name of the element Gets access to the posted file Specifies that the element is a server control. Must be set to "server" The width of the element Sets or returns the CSS properties that are applied to the control Returns the element tag name The type of the element The value of the element A Boolean value that indicates whether or not the control should be visible
Example
Declare one HtmlInputFile control, one HtmlInputButton control, and three HtmlGeneric controls 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 file name and file type are displayed on the page, while the file itself is uploaded to the c directory on the server:
<script runat="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 Attributes Disabled id Name runat Style TagName Type Value Visible Event ServerChange Description Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the element The name of the element Specifies that the element is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The type of the element The value of the hidden field A Boolean value that indicates whether or not the control should be visible Description 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. HTML Server Controls
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 Align Alt Attributes Border Disabled id Name OnServerClick runat Src Style TagName Type Value Visible Description The alignment of the image An alternate text to display for the image Returns all attribute name and value pairs of the element The width of the borders around the element A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the control The name of the element The name of the function to be executed when the image is clicked Specifies that the element is a server control. Must be set to "server" The source of the image Sets or returns the CSS properties that are applied to the control Returns the element tag name The type of the element The value of the element A Boolean value that indicates whether or not the control should be 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. HTML Server Controls
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 Attributes Checked Disabled id Name runat Style TagName Type Value Visible Description Returns all attribute name and value pairs of the element A Boolean value that specifies whether or not the element is to be selected A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the element The name of the radio button group Specifies that the element is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The type of the element The value of the element A Boolean value that indicates whether or not the control should be 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. HTML Server Controls
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 Attributes Disabled id MaxLength Name runat Size Style TagName Type Value Visible Description Returns all attribute name and value pairs of the element A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the element The maximum number of characters allowed in this element The name of the element Specifies that the element is a server control. Must be set to "server" The width of the element Sets or returns the CSS properties that are applied to the control Returns the element tag name The type of the element The value of the element A Boolean value that indicates whether or not the control should be 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. HTML Server Controls
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 Attributes DataMember DataSource DataTextField DataValueField Disabled id InnerHtml Description Returns all attribute name and value pairs of the element A name of a data table to use A data source to use A field in the data source to be displayed in the drop-down list A field in the data source that specifies the value of each selectable item in the drop-down list A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities The list of items in the drop-down list Whether multiple items can be selected at a time The name of the function to be executed when the selected item has changed Specifies that the control is a server control. Must be set to "server" The index of the currently selected item The number of visible items in the drop-down list Sets or returns the CSS properties that are applied to the control Returns the element tag name The value of the currently selected item A Boolean value that indicates whether or not the control should be visible
InnerText Items Multiple OnServerChange runat SelectedIndex Size Style TagName Value 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. HTML Server Controls
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 Align Attributes BGColor Border Description Specifies the alignment of the table Returns all attribute name and value pairs of the element Specifies the background color of the table Specifies the width of the borders Tip: Set border="0" to display tables with no borders! BorderColor CellPadding CellSpacing Disabled Height id InnerHtml Specifies the color of the borders Specifies the space between the cell walls and contents Specifies the space between cells A Boolean value that indicates whether or not the control should be disabled. Default is false Specifies the height of the table A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities Returns an HtmlRowCollection object which represents all rows in the table Specifies that the control is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name A Boolean value that indicates whether or not the control should be visible Specifies the width of the table
InnerText Rows runat Style TagName Visible Width
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. HTML Server Controls
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 Align Attributes BGColor BorderColor ColSpan Disabled Height id InnerHtml Description The horizontal alignment of cell content Returns all attribute name and value pairs of the element The background color of the cell The color of the borders The number of columns this cell should span A Boolean value that indicates whether or not the control should be disabled. Default is false The height of the cell A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities A Boolean value that specifies whether or not the text within this control should wrap The number of rows this cell should span Specifies that the control is a server control. Must be set to "server" Gets the CSS properties that are applied to the control Returns the element tag name The vertical alignment of cell content A Boolean value that indicates whether or not the control should be visible The width of the cell
InnerText Nowrap RowSpan runat Style TagName VAlign Visible Width
Examples
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 Align Attributes BGColor BorderColor Cells Disabled Height id InnerHtml InnerText runat Style TagName VAlign Visible Description The alignment of the row Returns all attribute name and value pairs of the element The background color of the row The color of the borders Returns the cells in this row A Boolean value that indicates whether or not the control should be disabled. Default is false The height of the row A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities Specifies that the control is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The vertical alignment of cells in the row A Boolean value that indicates whether or not the control should be visible
Examples
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 Attributes Cols Disabled id InnerHtml Description Returns all attribute name and value pairs of the element The number of columns of the text area A Boolean value that indicates whether or not the control should be disabled. Default is false A unique id for the control Sets or returns the content between the opening and closing tags of the HTML element. Special characters are not automatically converted to HTML entities Sets or returns all text between the opening and closing tags of the HTML element. Special characters are automatically converted to HTML entities The unique name for the text area The name of the function to be executed when the contents of the textarea is changed The number of visible rows of the text area Specifies that the control is a server control. Must be set to "server" Sets or returns the CSS properties that are applied to the control Returns the element tag name The content of the textarea A Boolean value that indicates whether or not the control should be visible
InnerText Name OnServerChange Rows runat Style TagName Value 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. HTML Server Controls
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 <ImageUrl> <NavigateUrl> <AlternateText> <Keyword> <Impressions> Description Optional. The path to the image file Optional. The URL to link to if the user clicks the ad Optional. An alternate text for the image Optional. A category for the ad Optional. The display rates in percent of the hits
Properties
Property AdvertisementFile AlternateTextField ImageUrlField KeywordFilter NavigateUrlField runat Target Description Specifies the path to the XML file that contains ad information Specifies a data field to be used instead of the Alt text for an ad Specifies a data field to be used instead of the ImageURL attribute for an ad Specifies a filter to limit ads after categories Specifies a data field to be used instead of the NavigateUrl attribute for an ad Specifies that the control is a server control. Must be set to "server" Specifies where to open the URL .NET 1.0 2.0 2.0 1.0 2.0 1.0 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 CausesValidation CommandArgument CommandName OnClientClick PostBackUrl runat Text UseSubmitBehavior ValidationGroup Description Specifies if a page is validated when a button is clicked Specifies additional information about the command to perform Specifies the command associated with the Command event Specifies the name of the function to be executed when a button is clicked .NET 1.0 1.0 1.0 2.0
Specifies the URL of the page to post to from the current page when 2.0 a button is clicked Specifies that the control is a server control. Must be set to "server" 1.0 Specifies the text on a button Specifies whether or not a button uses the browser's submit mechanism or the ASP.NET postback mechanism Specifies the group of controls a button causes validation, when it posts back to the server 1.0 2.0 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:
<script runat="server"> Sub submit(Source As Object, e As EventArgs) button1.Text="You clicked me!" End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" /> </form> </body> </html>
Output Result:
Click me!
ASP Source:
<script runat="server"> Sub submit(Source As Object, e As EventArgs) 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" button1.Text="You clicked me!" End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:Button id="button1" Text="Click me!" runat="server" OnClick="submit" /> </form> </body> </html>
Output Result:
Click me!
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 Caption CaptionAlign CellPadding CellSpacing DayHeaderStyle DayNameFormat DayStyle FirstDayOfWeek NextMonthText NextPrevFormat NextPrevStyle OtherMonthDayStyle PrevMonthText runat SelectedDate SelectedDates SelectedDayStyle SelectionMode SelectMonthText SelectorStyle SelectWeekText ShowDayHeader ShowGridLines ShowNextPrevMonth ShowTitle TitleFormat TitleStyle TodayDayStyle TodaysDate UseAccessibleHeader VisibleDate WeekendDayStyle OnDayRender OnSelectionChanged OnVisibleMonthChanged Description The caption of the calendar The alignment of the caption text The space, in pixels, between the cell walls and contents The space, in pixels, between cells The style for displaying the names of the days The format for displaying the names of the days The style for displaying days What should be the first day of week The text displayed for the next month link The format of the next and previous month links The style for displaying next and previous month links The style for displaying days that are not in the current month The text displayed for the previous month link Specifies that the control is a server control. Must be set to "server" The selected date The selected dates The style for selected days How a user is allowed to select dates The text displayed for the month selection link The style for the month and weeks selection links The text displayed for the week selection link A Boolean value that specifies whether the days of the week header should be shown A Boolean value that specifies whether the grid lines between days should be shown A Boolean value that specifies whether the next and previous month links should be shown A Boolean value that specifies whether the title of the calendar should be shown The format for the title of the calendar The style of the title of the calendar The style for today's date Today's date Specifying whether to use the <th> element for the day headers instead of the <td> element .NET 2.0 2.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 2.0
The date that specifies the month that is currently visible in the 1.0 calendar The style for weekends The name of the function to be executed when when each day cell is created The name of the function to be executed when the user selects a day, week, or month The name of the function to be executed when the user navigates to a different month 1.0



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:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:Calendar runat="server" /> </form> </body> </html>
Output Result:
< Sun 24 1 8 15 22 29
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:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:Calendar DayNameFormat="Full" runat="server"> <WeekendDayStyle BackColor="#fafad2" ForeColor="#ff0000" /> <DayHeaderStyle ForeColor="#0000ff" /> <TodayDayStyle BackColor="#00ff00" /> </asp:Calendar> </form> </body> </html>
Output Result:
< 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 Source:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:Calendar DayNameFormat="Full" runat="server" SelectionMode="DayWeekMonth" SelectMonthText="<*>" SelectWeekText="<->"/> <SelectorStyle BackColor="#f5f5f5" /> </asp:Calendar> </form> </body> </html>
Output Result:
< 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.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 text Description The text to be shown as the calendars caption
Example
The following example sets the Caption property in a calendar:
<form runat="server"> <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 align Description 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:
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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 pixels Description 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:
<form runat="server"> <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 pixels Description Specifies the space (in pixels) between calendar cells
Example
The following example shows a calendar with CellSpacing 15:
<form runat="server"> <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 style value Description Specifies the style to set. See the Style Control to see the possible styles and their values Specifies the value of the specified style
Example 1
The following example shows one way to set the DayHeaderStyle in a calendar:
<form runat="server"> <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) Complete Calendar Control Reference
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 format Description 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:
<form runat="server"> <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
<asp:Calendar runat="server"> <DayStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" DayStyle-style="value" />
Example 1
The following example shows one way to set the DayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <DayStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the DayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" DayStyle-ForeColor="#FF0000" /> </form>
Set DayStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
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 day Description 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:
<form runat="server"> <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 string Description 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":
<form runat="server"> <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 format Description 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":
<form runat="server"> <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
<asp:Calendar runat="server"> <NextPrevStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" NextPrevStyle-style="value" />
Example 1
The following example shows one way to set the NextPrevStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <NextPrevStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the NextPrevStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" NextPrevStyle-ForeColor="#FF0000" /> </form>
Set NextPrevStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
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
<asp:Calendar runat="server"> <OtherMonthDayStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" OtherMonthDayStyle-style="value" />
Example 1
The following example shows one way to set the OtherMonthDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <OtherMonthDayStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the OtherMonthDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" OtherMonthDayStyle-ForeColor="#FF0000" /> </form>
Set OtherMonthDayStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
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 string Description 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":
<form runat="server"> <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> <form runat="server"> <asp:Calendar id="cal1" runat="server" 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:
<script language="VB" runat="server"> 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> <form runat="server"> <asp:Calendar id="cal1" runat="server" 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
<asp:Calendar runat="server"> <SelectedDayStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" SelectedDayStyle-style="value" />
Example 1
The following example shows one way to set the SelectedDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <SelectedDayStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the SelectedDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" SelectedDayStyle-ForeColor="#FF0000" /> </form>
Set SelectedDayStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
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 mode Description 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:
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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 string Description 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 "->":
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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
<asp:Calendar runat="server"> <SelectorStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" SelectorStyle-style="value" />
Example 1
The following example shows one way to set the SelectorStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <SelectorStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the SelectorStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" SelectorStyle-ForeColor="#FF0000" /> </form>
Set SelectorStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
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 string Description 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 "->":
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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:
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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:
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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:
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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:
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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 mode Description Specifies how the calendar title is shown Possible values: Month MonthYear (Default)
Example
The following example sets the TitleFormat to display month:
<form runat="server"> <asp:Calendar id="cal1" runat="server" 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
<asp:Calendar runat="server"> <TitleStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" TitleStyle-style="value" />
Example 1
The following example shows one way to set the TitleStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <TitleStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the TitleStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" TitleStyle-ForeColor="#FF0000" /> </form>
Set TitleStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
ASP.NET TodayDayStyle Property


The TodayDayStyle property is used to set or return the style of the current date in a calendar.
Syntax
<asp:Calendar runat="server"> <TodayDayStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" TodayDayStyle-style="value" />
Example 1
The following example shows one way to set the TodayDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <TodayDayStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the TodayDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" TodayDayStyle-ForeColor="#FF0000" /> </form>
Set TodayDayStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
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:
<script language="VB" runat="server"> Sub Page_Load Response.Write("Today is: ") Response.Write(cal1.TodaysDate.ToShortDateString()) End Sub </script> <form runat="server"> <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:
<script runat="server"> Sub Page_Load cal1.VisibleDate = DateValue("01-Oct-07") End Sub </script> <form runat="server"> <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
<asp:Calendar runat="server"> <WeekendDayStyle style="value" /> </asp:Calendar> or <asp:Calendar runat="server" WeekendDayStyle-style="value" />
Example 1
The following example shows one way to set the WeekendDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal1" runat="server"> <WeekendDayStyle ForeColor="#FF0000" /> </asp:Calendar> </form>
Show example
Example 2
The following example shows another way to set the WeekendDayStyle in a calendar:
<form runat="server"> <asp:Calendar id="cal2" runat="server" WeekendDayStyle-ForeColor="#FF0000" /> </form>
Set WeekendDayStyle of a Calendar control (with declaration and script) Complete Calendar Control Reference
ASP.NET CalendarDay Control

Web Server Controls

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


For a full description, go to Control Standard Attributes. 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:
<script runat="server"> Sub DaySelect(obj As Object, e As DayRenderEventArgs) If e.Day.IsSelected Then Label1.Text = e.Day.Date End If End Sub </script> <form runat="server"> <asp:Calendar id="cal1" runat="server" 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:
<script runat="server"> Sub DaySelect(obj As Object, e As DayRenderEventArgs) If e.Day.IsSelected Then Label1.Text = e.Day.DayNumberText End If End Sub </script> <form runat="server"> <asp:Calendar id="cal1" runat="server" OnDayRender="DaySelect" /> The selected date is: <asp:Label id="Label1" runat="server"/> </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:
<script runat="server"> Sub DaySelect(obj As Object, e As DayRenderEventArgs) If e.Day.IsSelected Then If e.Day.IsOtherMonth = "TRUE" Then Label1.Text = "NO" Else Label1.Text = "YES" End If End If End Subv </script> <form runat="server"> <asp:Calendar id="cal1" runat="server" OnDayRender="DaySelect"/> The selected date is in the current month: <asp:Label id="Label1" runat="server"/> </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:
<script runat="server"> Sub DaySelect(obj As Object, e As DayRenderEventArgs) If e.Day.IsWeekend Then e.Day.IsSelectable = False End If End Sub </script> <form runat="server"> <form runat="server"> The weekends are not selectable <asp:Calendar id="cal1" runat="server" OnDayRender="DaySelect" /> </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:
<script runat="server"> Sub DaySelect(obj As Object, e As DayRenderEventArgs) If e.Day.IsSelected Then If e.Day.IsOtherMonth = "TRUE" Then Label1.Text = "NO" Else Label1.Text = "YES" End If End If End Sub </script> <form runat="server"> <asp:Calendar id="cal1" runat="server" OnDayRender="DaySelect"/> The selected date is in the current month: <asp:Label id="Label1" runat="server"/> </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:
<script runat="server"> Sub DaySelect(obj As Object, e As DayRenderEventArgs) If e.Day.IsSelected Then If e.Day.IsToday = "TRUE" Then Label1.Text = "YES" Else Label1.Text = "NO" End If End If End Sub </script> <form runat="server"> <asp:Calendar id="cal1" runat="server" OnDayRender="DaySelect" /> The selected date is in the current month: <asp:Label id="Label1" runat="server"/> </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:
<script runat="server"> Sub DaySelect(obj As Object, e As DayRenderEventArgs) If e.Day.IsSelected Then If e.Day.IsWeekend = "TRUE" Then Label1.Text = "YES" Else Label1.Text = "NO" End If End If End Sub </script> <form runat="server"> <asp:Calendar id="cal1" runat="server" OnDayRender="DaySelect"/> The selected date is in a weekend: <asp:Label id="Label1" runat="server"/> </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 SelectedIndex OnSelectedIndexChanged runat Description The index of a selected item The name of the function to be executed when the index of the selected item has changed Specifies that the control is a server control. Must be set to "server" .NET 1.0 1.0 1.0
ListControl Standard Properties

AppendDataBoundItems, AutoPostBack, CausesValidation, DataTextField, DataTextFormatString, DataValueField, Items, runat, SelectedIndex, SelectedItem, SelectedValue, TagKey, Text, ValidationGroup, OnSelectedIndexChanged
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:
<script runat="server"> Sub submit(sender As Object, e As EventArgs) mess.Text="You selected " & drop1.SelectedItem.Text End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:DropDownList id="drop1" runat="server"> <asp:ListItem>Item 1</asp:ListItem> <asp:ListItem>Item 2</asp:ListItem> <asp:ListItem>Item 3</asp:ListItem> <asp:ListItem>Item 4</asp:ListItem> <asp:ListItem>Item 5</asp:ListItem> <asp:ListItem>Item 6</asp:ListItem> </asp:DropDownList> <asp:Button Text="Submit" OnClick="submit" runat="server"/> <p><asp:label id="mess" runat="server"/></p> </form> </body> </html>
Output Result:
Item Item 11
Submit
ASP.NET HyperLink Control

Web Server Controls

The HyperLink control is used to create a hyperlink.
Properties
Property ImageUrl NavigateUrl runat Target Text Description The URL of the image to display for the link The target URL of the link Specifies that the control is a server control. Must be set to "server" The target frame of the URL The text to display for the link .NET 1.0 1.0 1.0 1.0 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 URL Description The URL of the image to use
Example
The following example sets the ImageUrl on a HyperLink control:
<form runat="server"> <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 URL Description A string that specifies the URL of the hyperlink control
Example
The following example sets the URL of a HyperLink control:
<form runat="server"> <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 target Description 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:
<form runat="server"> <asp:HyperLink id="link1" runat="server" Text="W3Schools" 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 string Description A string that specifies the text on the hyperlink control
Example
The following example sets the text on a HyperLink control:
<form runat="server"> <asp:HyperLink id="link1" runat="server" Text="W3Schools" NavigateUrl="http://www.w3schools.com" /> </form>

Show example
ASP Source:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:HyperLink ImageUrl="/banners/w6.gif" NavigateUrl="http://www.w3schools.com" Text="Visit W3Schools!" Target="_blank" runat="server" /> </form> </body> </html>
Output Result:
ASP.NET Image Control

Web Server Controls
WEB HOSTING Best Web Hosting PHP MySQL Hosting Best Hosting Coupons

The Image control is used to display an image.
UK Reseller Hosting Cloud Hosting Top Web Hosting $3.98 Unlimited Hosting Premium Website Design .NET 1.0 2.0 2.0 1.0 1.0 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 New Books: HTML, CSS JavaScript, and Ajax STATISTICS Browser Statistics Browser OS Browser Display SHARE THIS PAGE Share with
Properties
Property AlternateText DescriptionUrl GenerateEmptyAlternateText ImageAlign ImageUrl runat Description An alternate text for the image The location to a detailed description for the image Specifies whether or not the control creates an empty string as an alternate text Specifies the alignment of the image The URL of the image to display for the link
Specifies that the control is a server control. Must be set to "server" 1.0


Example
Image Declare an Image control in an .aspx file. Web Server Controls
REPORT
ERROR
HOME
TOP
PRINT
FORUM
ABOUT
W3Schools is optimized for learning, testing,
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 text Description Specifies an alternate text for the image
Example
The following example sets the AlternateText for an Image control (image file does not exist):
<form runat="server"> <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 align Description 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:
<form runat="server"> <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" />
Example
The following example sets the ImageUrl for an Image control:
<form runat="server"> <asp:Image id="Img1" runat="server" ImageUrl="img.gif" /> </form>

Show example
ASP Source:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:Image runat="server" AlternateText="W3Schools" ImageUrl="/banners/w6.gif"/> </form> </body> </html>
Output Result:
ASP.NET ImageButton Control

Web Server Controls

The ImageButton control is used to display a clickable image.
Properties
Property CausesValidation CommandArgument CommandName GenerateEmptyAlternateText OnClientClick PostBackUrl runat TagKey ValidationGroup Description Specifies if a page is validated when an ImageButton control is clicked Additional information about the command to perform The command associated with the Command event Specifies whether or not the control creates an empty string as an alternate text The name of the function to be executed when the image is clicked .NET 1.0 1.0 1.0 2.0 2.0
The URL of the page to post to from the current page when the 2.0 ImageButton control is clicked Specifies that the control is a server control. Must be set to "server" 1.0 1.0 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:
<form runat="server"> <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 func Description Client side script to be run when ImageButton is clicked
Example
The following example runs two scripts when the ImageButton control is clicked:
<script runat="server"> Sub script1(obj As Object, e As ImageClickEventArgs) lblMsg.Text="Hello!" End Sub </script> <form runat="server"> <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 string Description 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:
<form runat="server"> 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 group Description 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:
<script runat="server"> Sub getCoordinates(sender As Object, e As ImageClickEventArgs) mess.Text="Coordinates: " & e.x & ", " & e.y End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <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>
Output Result:
Click on the image:
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 runat Text Description Specifies that the control is a server control. Must be set to "server" 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:
<script runat="server"> Sub submit(Sender As Object, e As EventArgs) label1.Text=txt1.Text End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> 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>
Output Result:
Write some text:
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 CausesValidation CommandArgument CommandName OnClientClick PostBackUrl runat Text ValidationGroup Description Specifies if a page is validated when a LinkButton control is clicked Additional information about the command to perform The command associated with the Command event The name of the function to be executed when the LinkButton is clicked The URL of the page to post to from the current page when the LinkButton control is clicked Specifies that the control is a server control. Must be set to "server" The text on the LinkButton .NET 1.0 1.0 1.0 2.0 2.0 1.0 1.0
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 func Description Client side script to be run when LinkButton is clicked
Example
The following example runs two scripts when the LinkButton control is clicked:
<script runat="server"> Sub script1(obj As Object, e As EventArgs) lblMsg.Text="Hello!" End Sub </script> <html> <body> <form runat="server"> <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 string Description 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:
<form runat="server"> 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 string Description A string that specifies the text on the LinkButton control
Example
The following example sets the text on a LinkButton control:
<form runat="server"> <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 group Description 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:
<script runat="server"> Sub lblClick(sender As Object, e As EventArgs) Label1.Text="You clicked the LinkButton control" End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:LinkButton Text="Click me!" OnClick="lblClick" runat="server" /> <p><asp:Label id="Label1" runat="server" /></p> </form> </body> </html>
Output Result:
Click me!
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! Tip: This control supports data binding!
Properties
Property Rows SelectionMode Description The number of rows displayed in the list Allows single or multiple selections .NET 1.0 1.0



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 num Description Specifies the number of rows visible (without scrolling) in the ListBox.
Example
The following example sets the Rows property of a ListBox control:
<form runat="server"> <asp:ListBox id="lb1" Rows="5" runat="server"> <asp:ListItem Value="Item1" /> <asp:ListItem Value="Item2" /> <asp:ListItem Value="Item3" /> <asp:ListItem Value="Item4" /> <asp:ListItem Value="Item5" /> </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 mode Description 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:
<form runat="server"> <asp:Calendar id="cal1" runat="server" SelectionMode="Multiple" /> </form>

Show example
ASP Source:
<script runat="server"> Sub submit(Sender As Object,e As EventArgs) mess.Text="You selected " & drop1.SelectedItem.Text End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:ListBox id="drop1" rows="3" runat="server"> <asp:ListItem selected="true">Item 1</asp:ListItem> <asp:ListItem>Item 2</asp:ListItem> <asp:ListItem>Item 3</asp:ListItem> <asp:ListItem>Item 4</asp:ListItem> <asp:ListItem>Item 5</asp:ListItem> <asp:ListItem>Item 6</asp:ListItem> </asp:ListBox> <asp:Button Text="Submit" OnClick="submit" runat="server" /> <p><asp:label id="mess" runat="server" /></p> </form> </body> </html>
Output Result:
Item 11 Item Item 2 Item 2 Item 3 Item Item 43 Item Item 54
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 Attributes Enabled Selected Text Value Description Optional. A collection of attribute name and value pairs for the ListItem that are not directly supported by the class Optional. Specifies if the item is enabled or disabled Optional. Specifies whether or not the item is selected Optional. The text displayed in the ListItem Optional. The value of the the ListItem. .NET 1.0 2.0 1.0 1.0 1.0


For a full description, go to Control Standard Attributes. 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 Set Set Set Set Not set Not set Not set Not set Text Property Set Set Not set Not set Set Set Not set Not set Value Property Set Not set Set Not set Set Not set Set Not set Text Shown Inner HTML Inner HTML Inner HTML Inner HTML Text Property Text Property Value Property Not set Value Used Value Property Inner HTML Value Property Inner HTML Value Property Text Property Value Property 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:
<form runat="server"> <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:
<form runat="server"> <asp:ListBox runat="server"> <asp:ListItem Text="Item1" Selected="True"/> <asp:ListItem Text="Item2" /> </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 string Description A string that specifies the text of the ListItem control
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
Tips and Notes

Example
The following example sets the text of a ListItem in a ListBox control:
<form runat="server"> <asp:ListBox runat="server"> <asp:ListItem Text="Item1" /> <asp:ListItem Text="Item2" /> </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 string Description A string that specifies the value of the ListItem control
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
Tips and Notes

Example
The following example sets the Value of a ListItem in a ListBox control:
<form runat="server"> <asp:ListBox runat="server"> <asp:ListItem Value="Item1" /> <asp:ListItem Value="Item2" /> </asp:ListBox> </form>
Show example
ASP Source:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:BulletedList runat="server"> <asp:ListItem Text="Item1" /> <asp:ListItem Text="Item2" /> </asp:BulletedList> </form> </body> </html>
Output Result:
Item1 Item2
ASP Source:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:ListBox runat="server"> <asp:ListItem Text="Text1" /> <asp:ListItem Value="Text3" Text="Text1">Text2</asp:ListItem> <asp:ListItem Value="Text3" /> </asp:ListBox> </form> </body> </html>
Output Result:
Text1 Text1 Text2 Text2 Text3
Text3
ASP Source:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:ListBox runat="server"> <asp:ListItem Text="Item1" /> <asp:ListItem Text="Item2" /> <asp:ListItem Text="Item3" /> <asp:ListItem Text="Item4" enabled="False"/> </asp:ListBox> </form> </body> </html>
Output Result:
Item1 Item1 Item2 Item2 Item3
Item3
ASP Source:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:RadioButtonList runat="server"> <asp:ListItem Text="Item1" /> <asp:ListItem Text="Item2" /> <asp:ListItem Text="Item3" /> <asp:ListItem Text="Item4" selected="True"/> </asp:RadioButtonList> </form> </body> </html>
Output Result:
Item1 Item2 Item3 Item4
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 Mode runat Text Specifies that the control is a server control. Must be set to "server" Specifies the text to display Description .NET 2.0 1.0 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 string Description A string that specifies the text in the literal control
Example
The following example sets the text for the Literal control:
<form runat="server"> <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 BackImageUrl DefaultButton Direction GroupingText HorizontalAlign runat ScrollBars Wrap Description Specifies a URL to an image file to display as a background for this control Specifies the ID of the default button in the Panel Specifies the content display direction of the Panel Specifies the caption for the group of controls in the Panel Specifies the horizontal alignment of the content Specifies that the control is a server control. Must be set to "server" Specifies the position and visibility of scroll bars in the Panel Specifies whether the content should wrap or not .NET 1.0 2.0 2.0 2.0 1.0 1.0 2.0 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>
Example
The following example sets the BackImageUrl for a Panel control:
<form runat="server"> <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 button_id Description The id of the button to use as default button
Example
The following example sets the DefaultButton for a Panel control:
<form runat="server"> <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 direction Description 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:
<form runat="server"> <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 string Description The string to display as caption text for the Panel
Example
The following example sets the GroupingText for a Panel control:
<form runat="server"> <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 align Description 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:
<form runat="server"> <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 value Description 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:
<form runat="server"> <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:
<form runat="server"> <asp:Panel ID="Pan1" Width="250px" Wrap="FALSE" runat="server"> Some content </asp:Panel> </form>
Show example
ASP Source:
<script runat="server"> 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> <!DOCTYPE html> <html> <body> <form runat="server"> <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>
Output Result:
Hello World!
Hide Panel control

Reload
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 runat Description Specifies that the control is a server control. Must be set to "server"


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 AutoPostBack Checked id GroupName OnCheckedChanged runat Text TextAlign Description A Boolean value that specifies whether the form should be posted immediately after the Checked property has changed or not. Default is false A Boolean value that specifies whether the radio button is checked or not A unique id for the control The name of the group to which this radio button belongs The name of the function to be executed when the Checked property has changed Specifies that the control is a server control. Must be set to "server" The text next to the radio button 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:
<script runat="server"> Sub submit(Sender As Object, if red.Checked then Label1.Text="You selected " elseIf green.Checked then Label1.Text="You selected " elseIf blue.Checked then Label1.Text="You selected " end if End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> Select your favorite color: <br /> <asp:RadioButton id="red" Text="Red" Checked="True" GroupName="colors" runat="server"/> <br /> <asp:RadioButton id="green" Text="Green" GroupName="colors" runat="server"/> <br /> <asp:RadioButton id="blue" Text="Blue" GroupName="colors" runat="server"/> <br /> <asp:Button text="Submit" OnClick="submit" runat="server"/> <p><asp:Label id="Label1" runat="server"/></p> </form> </body> </html> e As EventArgs) & red.Text & green.Text & blue.Text
Output Result:
Select your favorite color: Red Green Blue

Submit
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! Tip: This control supports data binding!
Properties
Property CellPadding CellSpacing RepeatColumns RepeatDirection RepeatLayout runat TextAlign Description The amount of pixels between the border and the contents of the table cell The amount of pixels between table cells The number of columns to use when displaying the radio button group Specifies whether the radio button group should be repeated horizontally or vertically The layout of the radio button group On which side of the radio button the text should appear .NET 1.0 1.0 1.0 1.0 1.0 1.0
Specifies that the control is a server control. Must be set to "server" 1.0



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 pixels Description 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:
<form runat="server"> <asp:RadioButtonList id="rb1" runat="server" CellPadding="15"> Some content </asp:RadioButtonList> </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 </asp:RadioButtonList >
Attribute pixels Description Specifies the amount of pixels between the table cells.
Example
The following example sets the CellSpacing property of a RadioButtonList control:
<form runat="server"> <asp:RadioButtonList id="rb1" runat="server" CellSpacing="15"> Some content </asp:RadioButtonList> </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 </asp:RadioButtonList >
Attribute num Description Specifies the number of columns to display. Default is "1"
Example
The following example sets the RepeatColumns property to "2" in a RadioButtonList control:
<form runat="server"> <asp:RadioButtonList id="rb1" runat="server" RepeatColumns="2"> Some content </asp:RadioButtonList> </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 </asp:RadioButtonList >
Attribute mode Description 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:
<form runat="server"> <asp:RadioButtonList id="rb1" runat="server" RepeatDirection="Horizontal"> Some content </asp:RadioButtonList> </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 </asp:RadioButtonList >
Attribute mode Description 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:
<form runat="server"> <asp:RadioButtonList id="rb1" runat="server" RepeatLayout="Flow"> Some content </asp:RadioButtonList> </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 </asp:RadioButtonList >
Attribute align Description 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:
<form runat="server"> <asp:RadioButtonList id="rb1" runat="server" TextAlign="Left"> Some content </asp:RadioButtonList> </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 BulletImageUrl BulletStyle DisplayMode FirstBulletNumber runat Target Description Specifies the URL of a custom bullet list image. Used if "BulletStyle" is "CustomImage" Specifies the style of the bullet list Specifies the type of list displayed Specify the start number of list items in an ordered list Required. Specifies that the control is a server control. Must be set to "server" Specifies where to open the target URL .NET 2.0 2.0 2.0 2.0 1.0 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. For a full description, go to ListControl Standard Attributes.


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 url Description String specifying the URL of image to use as bullet marker
Example
The following example sets the BulletImageUrl of a BulletedList control:
<form runat="server"> <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 style Description 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:
<form runat="server"> <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 mode Description 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:
<form runat="server"> <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 num Description Specifies the number of the first list item in an ordered list.
Example
The following example sets the FirstBulletNumber of a BulletedList control:
<form runat="server"> <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 target Description 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:
<form runat="server"> <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 BackColor BorderColor BorderStyle BorderWidth CssClass Font ForeColor Height RegisteredCssClass Width Description The background color of the control The border color of the control The border style of the control The border width of the control The CSS class rendered by the control on the client The font properties of the control The foreground color (typically the color of the text) of the control The height of the control The CSS class that is registered with the control The width of the control .NET 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 2.0 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 color Description 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:
<form runat="server"> <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) Complete Style Control Reference
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 color Description 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:
<form runat="server"> <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 None Dotted Solid Description Defines no border Defines a dotted border Defines a solid border NotSet Border style is not set
Dashed Defines a dashed 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 Inset Outset Defines a 3D ridged border. The effect depends on the border-color value Defines a 3D inset border. The effect depends on the border-color value Defines a 3D outset border. The effect depends on the border-color value
Example
The following example sets the border style of a table:
<form runat="server"> <asp:Table runat="server" BorderStyle="dotted" 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 Reference
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 length Description 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>Hello</asp:TableCell> <asp:TableCell>World</asp:TableCell> </asp:TableRow> </asp:Table> </form>
Show example
Set the border width of a Button control (with declaration and script) Complete Style Control Reference
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 style Description 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> <form runat="server"> <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 Bold Italic Name Names Description Bold sub property. Possible values are TRUE or FALSE Italic sub property. Possible values are TRUE or FALSE 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 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:
<form runat="server"> <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) Complete Style Control Reference
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 color Description 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:
<form runat="server"> <asp:Button id="button1" Text="Submit" ForeColor="#FF0000" runat="server" /> </form>

Show example
Set the text color of a Button control (with declaration and script) Complete Style Control Reference
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 value Description 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:
<form runat="server"> <asp:Button id="button1" Text="Submit" 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 value Description 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:
<form runat="server"> <asp:Button id="button1" Text="Submit" 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 BackImageUrl Caption CaptionAlign CellPadding CellSpacing GridLines HorizontalAlign Rows runat Description A URL to an image to use as an background for the table The caption of the table The alignment of the caption text The space between the cell walls and contents The space between cells The gridline format in the table The horizontal alignment of the table in the page A collection of rows in the Table Specifies that the control is a server control. Must be set to "server" .NET 1.0 2.0 2.0 1.0 1.0 1.0 1.0 1.0 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>
Example
The following example sets the BackImageUrl for a Table control:
<form runat="server"> <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 string Description The text to be shown as the table caption
Example
The following example sets the Caption for a Table control:
<form runat="server"> <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 align Description 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:
<form runat="server"> <asp:Table id="tab1" runat="server" 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 px Description 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:
<form runat="server"> <asp:Table id="tab1" runat="server" 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 px Description Specifies how many pixels of space there is between the cells
Example
The following example sets the CellSpacing property of the Table control:
<form runat="server"> <asp:Table id="tab1" runat="server" 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 mode Description Specifies the grid line style for the table Possible Values: None Horizontal Vertical Both
Example
The following example sets the GridLines property to "Both":
<form runat="server"> <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>
Example
The following example sets the HorizontalAlign property of a Table control:
<form runat="server"> <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 AssociatedHeaderCellID ColumnSpan HorizontalAlign RowSpan runat Text VerticalAlign Wrap Description A list of table header cells associated with the TableCell control The number of columns this cell should span The horizontal alignment of the contents in the table cell The number of rows this cell should span Specifies that the control is a server control. Must be set to "server" Specifies the text of the table cell The vertical alignment of the contents in the table cell Specifies whether the cell's contents should wrap or not .NET 2.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0


Example
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 num Description Specifies the number of columns the TableCell spans
Example
The following example sets the ColumnSpan mode to "2":
<form runat="server"> <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>
Example
The following example sets the HorizontalAlign property of a TableCell control:
<form runat="server"> <asp:Table id="tab1" runat="server"> <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 num Description Specifies the number of rows the TableCell spans
Example
The following example sets the RowSpan mode to "2":
<form runat="server"> <asp:Table id="tab1" runat="server"> <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 string Description A string that specifies the text of the Table cell
Example
The following example sets the text of a TableCell control:
<form runat="server"> <asp:Table id="tab1" runat="server"> <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 align Description 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:
<form runat="server"> <asp:Table id="tab1" runat="server"> <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":
<form runat="server"> <asp:Table id="tab1" runat="server"> <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 Cells HorizontalAlign TableSection VerticalAlign The horizontal alignment of the contents in the table row The location of a TableRow object in a Table control The vertical alignment of the contents in the table row 1.0 2.0 1.0 Description .NET


Examples

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>
Example
The following example sets the HorizontalAlign property of a TableRow control:
<form runat="server"> <asp:Table id="tab1" runat="server"> <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 section Description 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:
<form runat="server"> <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 align Description 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:
<form runat="server"> <asp:Table id="tab1" runat="server"> <asp:TableRow VerticalAlign="Middle"> <asp:TableCell> Hello! </asp:TableCell> <asp:TableCell> Hello! </asp:TableCell> </asp:TableRow> </asp:Table> </form>
Show example
ASP Source:
<!DOCTYPE html> <html> <body> <form runat=server> <asp:Table runat="server" CellPadding="5" GridLines="horizontal" HorizontalAlign="Center"> <asp:TableRow> <asp:TableCell>1</asp:TableCell> <asp:TableCell>2</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>3</asp:TableCell> <asp:TableCell>4</asp:TableCell> </asp:TableRow> </asp:Table> <br /> <asp:Table runat="server" CellPadding="5" GridLines="vertical" HorizontalAlign="Center"> <asp:TableRow> <asp:TableCell>1</asp:TableCell> <asp:TableCell>2</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>3</asp:TableCell> <asp:TableCell>4</asp:TableCell> </asp:TableRow> </asp:Table> </form> </body> </html>
Output Result:
1 2 3 4 1 2 3 4
ASP Source:
<script runat="server"> 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> <!DOCTYPE html> <html> <body> <form runat="server"> <asp:Table id="Table1" BorderWidth="1" GridLines="Both" runat="server" /> </form> </body> </html>
Output Result:
row 0, cell 0 row 0, cell 1 row 1, cell 0 row 1, cell 1 row 2, cell 0 row 2, cell 1
ASP.NET TextBox Control

Web Server Controls

The TextBox control is used to create a text box where the user can input text.
Properties
Property AutoCompleteType AutoPostBack Description Specifies the AutoComplete behavior of a TextBox A Boolean value that specifies whether the control is automatically posted back to the server when the contents change or not. Default is false Specifies if a page is validated when a Postback occurs The width of the textbox The maximum number of characters allowed in the textbox Specifies whether or not the text in the text box can be changed The height of the textbox (only used if TextMode="Multiline") Specifies that the control is a server control. Must be set to "server" The contents of the textbox Specifies the behavior mode of a TextBox control (SingleLine, MultiLine or Password) The group of controls that is validated when a Postback occurs A Boolean value that indicates whether the contents of the textbox should wrap or not The name of the function to be executed when the text in the textbox has changed 1.0 1.0 1.0 .NET 2.0 1.0
CausesValidation Columns MaxLength ReadOnly Rows runat TagKey Text TextMode ValidationGroup Wrap OnTextChanged
2.0 1.0 1.0 1.0 1.0


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 cat
Description 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":
<form runat="server"> <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":
<form runat="server"> <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 num Description A number specifying the width, in characters, of the text box
Example
The following example sets the width of a TextBox control:
<form runat="server"> <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 num Description 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:
<form runat="server"> <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":
<form runat="server"> <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 num Description A number specifying the height, in rows, of the text box
Example
The following example sets the height of a TextBox control:
<form runat="server"> <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 string Description A string that specifies the text of the TextBox control
Example
The following example sets the text of a TextBox control:
<form runat="server"> <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 mode Description 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":
<form runat="server"> <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":
<form runat="server"> <asp:TextBox id="tb1" runat="server" TextMode="MultiLine" Wrap="False" /> </form>

Show example
ASP Source:
<script runat="server"> Sub submit(sender As Object, e As EventArgs) lbl1.Text="Your name is " & txt1.Text End Sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> Enter your name: <asp:TextBox id="txt1" runat="server" /> <asp:Button OnClick="submit" Text="Submit" runat="server" /> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>
Output Result:
Enter your name:
Submit
ASP Source:
<script runat="server"> sub submit(sender As Object, e As EventArgs) lbl1.Text=txt1.Text end sub </script> <!DOCTYPE html> <html> <body> <form runat="server"> <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" /> <p><asp:Label id="lbl1" runat="server" /></p> </form> </body> </html>
Output Result:
Hello World!
Copy Text to Label
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 ClientID Controls Document DocumentContent DocumentSource EnableTheming runat SkinID Transform TransformArgumentList TransformSource XPathNavigator Specifies a path to an XSL Transform file Formats the XML document using a System.Xml.Xsl.XslTransform object 1.0 Specifies that the control is a server control. Must be set to "server" 1.0 Deprecated. Specifies an XML document using a System.Xml.XmlDocument object Specifies an XML string Specifies a path to an XML file to display 1.0 1.0 1.0 Description .NET

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 path Description 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:
<form runat="server"> <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:
<!DOCTYPE html> <html> <body> <form runat="server"> <asp:Xml DocumentSource="cdcatalog.xml" TransformSource="cdcatalog.xsl" runat="server" /> </form> <p><a href="cdcatalog.xml" target="_blank">View XML file</a></p> <p><a href="cdcatalog.xsl" target="_blank">View XSL file</a></p> </body> </html>
Output Result:
My CD Collection
Title Empire Burlesque Hide your heart Greatest Hits Artist Bob Dylan Bonnie Tyler Dolly Parton
Still got the blues Gary Moore Eros Eros Ramazzotti View XML file View XSL file
ASP.NET Web Forms - Validation Controls

Previous
Validation server controls are used to validate user-input.
Next Chapter
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 CompareValidator CustomValidator RangeValidator RegularExpressionValidator RequiredFieldValidator ValidationSummary Description Compares the value of one input control to the value of another input control or to a fixed value Allows you to write a method to handle the validation of the value entered Checks that the user enters a value that falls between two values Ensures that the value of an input control matches a specified pattern Makes an input control a required field 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 BackColor ControlToCompare ControlToValidate Display Description The background color of the CompareValidator control The name of the control to compare with The id of the control to validate 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 Enabled ErrorMessage A Boolean value that specifies whether client-side validation is enabled or not A Boolean value that specifies whether the validation control is enabled or not 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 The foreground color of the control A unique id for the control A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid The type of comparison to perform. The operators are: Equal GreaterThan GreaterThanEqual LessThan LessThanEqual NotEqual DataTypeCheck runat Text Type Specifies that the control is a server control. Must be set to "server" The message to display when validation fails Specifies the data type of the values to compare. The types are: Currency Date Double Integer String ValueToCompare A specified value to compare with
ForeColor id IsValid Operator
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. Validation Server Controls
ASP.NET CustomValidator Control


The CustomValidator control allows you to write a method to handle the validation of the value entered.
Properties
Property BackColor ClientValidationFunction Description The background color of the CustomValidator control 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 The id of the control to validate 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 Enabled ErrorMessage A Boolean value that specifies whether client-side validation is enabled or not A Boolean value that specifies whether the validation control is enabled or not 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 The foreground color of the control A unique id for the control A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid Specifies the name of the server-side validation script function to be executed Specifies that the control is a server control. Must be set to "server" The message to display when validation fails
ForeColor id IsValid OnServerValidate 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. Validation Server Controls
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 BackColor ControlToValidate Display Description The background color of the RangeValidator control The id of the control to validate 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 Enabled ErrorMessage A Boolean value that specifies whether client-side validation is enabled or not A Boolean value that specifies whether the validation control is enabled or not 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 The foreground color of the control A unique id for the control A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid Specifies the maximum value of the input control Specifies the minimum value of the input control Specifies that the control is a server control. Must be set to "server" Specifies the data type of the value to check. The types are: Currency Date Double Integer String Text The message to display when validation fails
ForeColor id IsValid MaximumValue MinimumValue runat Type
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. Validation Server Controls
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 BackColor ControlToValidate Display Description The background color of the RegularExpressionValidator control The id of the control to validate 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 Enabled ErrorMessage A Boolean value that specifies whether client-side validation is enabled or not A Boolean value that specifies whether the validation control is enabled or not 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 The foreground color of the control A unique id for the control A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid Specifies that the control is a server control. Must be set to "server" The background color of the RegularExpressionValidator control The message to display when validation fails 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
ForeColor id IsValid runat BackColor Text ValidationExpression
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. Validation Server Controls
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 BackColor ControlToValidate Display Description The background color of the RequiredFieldValidator control The id of the control to validate 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 Enabled ErrorMessage A Boolean value that specifies whether client-side validation is enabled or not A Boolean value that specifies whether the validation control is enabled or not 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 The foreground color of the control A unique id for the control Specifies the starting value of the input control. Default value is "" A Boolean value that indicates whether the control specified by ControlToValidate is determined to be valid Specifies that the control is a server control. Must be set to "server" The message to display when validation fails
ForeColor id InitialValue 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. Validation Server Controls
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 DisplayMode Description How to display the summary. Legal values are: BulletList List SingleParagraph EnableClientScript Enabled ForeColor HeaderText id runat ShowMessageBox ShowSummary A Boolean value that specifies whether client-side validation is enabled or not A Boolean value that specifies whether the validation control is enabled or not The fore color of the control A header in the ValidationSummary control A unique id for the control Specifies that the control is a server control. Must be set to "server" A Boolean value that specifies whether the summary should be displayed in a message box or not 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. Validation Server Controls

ASP.Net

Uploaded by

Document Information

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.

ASP.Net Full Tutorial

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

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

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

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

Displaying Data from Database

Content Downloaded from www.w3schools.com

Adding Data to the Database

Content Downloaded from www.w3schools.com

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

The WebSecurity Object

Create a WebSecurity Database

Create an AppStart Page

Edit The Style Sheet

Content Downloaded from www.w3schools.com

Add a Registration Page

Add a Login Page

Content Downloaded from www.w3schools.com

Edit the Navigation Menu

Content Downloaded from www.w3schools.com

ASP.NET Web Pages - Security

Membership, Login, and Security

Adding Security to Pages