NET Classic ASP - Active Server Pages Active Server Pages (ASP), also known as Classic ASP, was introduced in 1998 as Microsoft's first server side scripting engine. ASP is a technology that enables scripts in web pages to be executed by an Inter net 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 com ponents, and integrated user authentication. ASP.NET pages have the extension .aspx, and are normally written in VB (Visual B asic) or C# (C sharp). User controls in ASP.NET can be written in different languages, including C++ an d Java. When a browser requests an ASP.NET file, the ASP.NET engine reads the file, comp iles 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 w eb pages, much like Classic ASP. Razor has the power of traditional ASP.NET, but is easier to use and easier to l earn. ________________________________________ ASP.NET Programming Languages This tutorial covers the following programming languages: • Visual Basic (VB.NET) • C# (Pronounced C sharp) ________________________________________ ASP.NET Server Technologies This tutorial covers the following server technologies: • Web Pages (with Razor syntax) • MVC (Model View Controller) • Web Forms (traditional ASP.NET) ________________________________________ ASP.NET Development Tools ASP.NET supports the following development tools: • WebMatrix • Visual Web Developer • Visual Studio This tutorial uses WebMatrix for Web Pages, and Visual Web Developer for MVC and Web Forms. ________________________________________ ASP.NET File Extensions • Classic ASP files have the file extension .asp • ASP.NET files have the file extension .aspx • ASP.NET files with Razor C# syntax have the file extension .cshtml • ASP.NET files with Razor VB syntax have the file extension .vbhtml ASP.NET Web Pages - Demonstration « Previous Next Chapter » ________________________________________ This is a Web Pages Demonstration Web Pages is one of the 3 programming models for creating ASP.NET web sites and web applications.

NET applications. Both P HP and ASP.NET development tool from Microsoft. WebMatrix is tailor made for Web Pages.The other two programming models are Web Forms and MVC (Model. Controller) . WebMatrix also has built-in tools for security. and the ASP. DotNetNuke. content management and more with a built-in Windows Web App lication Gallery.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 demonstr ation. and web publishing. 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. ________________________________________ How to Install WebMatrix Follow the link below to install WebMatrix: http://www. ________________________________________ Easy Learning with "Run Example" Our "Run Example" tool makes it easy to learn Web Pages. The skills and code you develop with WebMatrix can seamlessly be transformed to fully professional ASP.NET W eb Pages Tutorial. including WebMatrix.aspx?appid=WebMatrix Microsoft's Web Platform Installer will install the free components of the Micro soft Web Platform. Drupal. WordPress and many more. It runs examples and displays the ASP. 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 View. or build on open source applications from a "Web Application Gallery". go to the ASP. you will get the full benefits from this tutorial. This demonstration will teach you ASP.NET applications are available. . Joomla. Internet Information Services (IIS).NET Framework: The Web Platform Installer also makes it easy to install popular free web applic ations for code and the HTML output simultaneousl y.NET) If you install WebMatrix. such as Umbraco. search engine optimization. but if you want to read the Web Pages tutorial first. With WebMatrix you can start from scratch with an empty web site and a blank pag e.Now</p> </body> </html> Run Example » ________________________________________ We Will Use WebMatrix WebMatrix is a simple but powerful free ASP. SQL Server Express.

________________________________________ Create a Web Page with WebMatrix In the ribbon bar.ASP. 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.NET Web Pages . or stop your web site): In the left pane there is a list of your web folders and workspace selector to s elect working with the site.NET Web Pages by building a web site from scratch.cshtml: When you click OK. Part I: Creating a Web Site with WebMatrix. or reports.WebMatrix « Previous Next Chapter » ________________________________________ Learn ASP. start. click New: Choose file type CSHTML. (You will learn more about CSHTML files later) and in t he Name box. name the new site Demo. This workspace lets you work with files and folders. click Save: In the ribbon bar. ________________________________________ Create a Web Site with WebMatrix Start WebMatrix. type default. run. and click Site From Template: Select Empty Site.Files and Folders « Previous Next Chapter » ________________________________________ .NET Web Pages . The page is displayed in your default browser: Hello Web Pages ASP. click Run: WebMatrix starts a web server (IIS Express) and runs the page on your computer. Select the Files workspace. databases. and click OK: WebMatrix creates a new site and displays a workspace window with a menu at the top (to publish. files.

} body { font: "Trebuchet MS".for storing shared style and layout files ________________________________________ 3. create a new file named "Layout. border-radius: 0 4px 4px 4px.for storing databases and data files • Images . Create Folders In the folder named "Demo" (your website). create 5 folders: • Account .css h1 { border-bottom: 3px solid #cc9900.Learn ASP. color: #996600.NET Web Pages by building a web site from scratch. Start With an Empty Web Site If you have followed this tutorial.for storing browser scripts • Shared . color: #696969. ________________________________________ What We Will Do In this chapter we will: • Create a new empty web site • Create the necessary folders • Create a standard style sheet for the site • Create a standard layout for the site • Create a home page for the site ________________________________________ 1. Verdana. 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 a Layout Page In the "Shared" folder.for storing images • Scripts . font: Georgia. Put the following code inside the layout file: Layout. create a new style sheet (CSS file) named "Site.cshtml <!DOCTYPE html> . background-color: #5c87b2. Create a Style Sheet In the "Shared" folder. sans-serif.css". background-color: #ffffff. Part II: Creating standard folders and a consistent style. } #main { padding: 30px. you already have a web site called Demo.cshtml". Put the following code inside the CSS file: Site. serif.for storing login and membership files • App_Data . } 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.

<html> <head> <link rel="stylesheet" type="text/css" href="/Shared/Site. If you created a file with this name earlier. create a new file.css)</p> Run example » The file starts with a reference to the layout file.} <h1>Welcome to W3Schools</h1> <h2>Web Site Main Ingredients</h2> <p>A Home Page (Default.NET Web Pages . create a new file named "_PageStart. and a common style sheet (the CSS file). or create a new file with a new name (like Default2. named "Default. and a call to the @RenderBody() function. ASP. otherwise it contains norma l HTML markup.Adding Navigation « Previous Next Chapter » ________________________________________ Learn ASP.cshtml @{Layout="/Shared/Layout.cshtml)</p> <p>A Style Sheet (Site. In the next chapters of this tutorial. a com mon template for all your pages (the Layout page).css).</p> </div> </body> </html> The layout file above defines the layout of your web pages. with a main page (the Default page). ________________________________________ 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)</p> <p>A Layout File (Layout. where page content should be displayed. Put the following code inside the file: Default.css" /> </head> <body> <div id="main"> @RenderBody() <p>&copy. Create a Home Page In your empty "Demo" folder. Put the following code inside the file: .NET Web Pages by building a web site from scratch. ________________________________________ Congratulations You have created your first web site. you can edit the existing file. 2012 W3Schools. ________________________________________ 5.cshtml In the root folder (the "Demo" folder).cshtml". and finally we will add login and security.cshtml". All rights reserved. T hen we will add a database. It has a link to you r style sheet file (Shared/Site. Part III: Adding Navigation.cshtml).csht ml". we will add navigation to the web site.

________________________________________ Edit The Style Sheet In the "Shared" folder. sans-serif. All rights reserved. create a new file named "About.</p> </div> </body> </html> The layout file above.css h1 { border-bottom: 3px solid #cc9900. Verdana. color: #996600._PageStart. } body { font: "Trebuchet MS". ________________________________________ Add a Navigation Menu In the "Shared" folder. edit your your style sheet (Site. edit the layout file. w ith an added unordered list (marked red).cshtml <h1>About Us</h1> <p> Lorem Ipsum Porem Lorem Ipsum Porem </p> The about file above contains a heading and a paragraph.css): Put the following code inside the file: Site. you no longer need to add the layout information to every we b page. serif. font: Georgia.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>&copy. Put the following code inside the about file: About. . ________________________________________ Add an About Page In the "Demo" folder. After adding this.cshtml <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/Shared/Site.cshtml". is a copy of the layout file from the previous chapter. Put the following code inside the layout file: Layout. } The _PageStart file above contains code to be run in every page of the web site. 2012 W3Schools. Please feel free to edi t the content.cshtml".cshtml @{ // Set the layout page for the whole site Layout = "~/Shared/Layout.

line-height: 2. } ul#menu li a:hover { background-color: #ffffff.background-color: #5c87b2. border-radius: 0 4px 4px 4px. } ul#menu li { display: inline. In the next chapter we will add a database.NET Web Pages .8em. background-color: #ffffff.Databases « Previous Next Chapter » ________________________________________ . text-decoration: none. ________________________________________ Congratulations You have added navigation to your website. } ul#menu { padding: 0px. w ith added styles for an unordered list (marked red). /*CSS3 properties*/ border-radius: 4px 4px 0 0.cshtml <h1>Welcome to Us</h1> <p> Lorem Ipsum Porem Lorem Ipsum Porem </p> Run example » Feel free to edit the content. ________________________________________ Edit the Home Page In your "Demo" folder. Put the following code inside the file: Default. } ul#menu li a { background-color: #e8eef4. color: #034af3. edit the file named "Default. margin: 0. position: relative.cshtml". ASP. padding: 10px 20px. } #main { padding: 30px. } The style sheet above. is a copy of the style sheet from the previous chapter. color: #696969.

} <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. WebMatrix will create a database with the same name as your site: "Demo. For all columns. Open the Databases workspace and click New Database or Add a database. Click New Column and create 4 columns named "Id".Name</td> <td>@row. set Data Type to "nvarchar". ________________________________________ 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. Is Identity to "True".Learn ASP.Open("SmallBakery").sdf". "Name".Price</td> </tr> } </table> </body> </html> Run example » ________________________________________ Creating a Database WebMatrix includes an SQL Database design tool. and Is Pr imary Key to "True". For the "Name" and "Description" columns.sdf": Rename the database to "SmallBakery. your table design will look like this: . you can easily display data from a database: Database Example @{ var db = Database. "Description".NET Web Pages by building a web site from scratch. var selectQueryString = "SELECT * FROM Product ORDER BY Name". When you are finished. set Data Type to "money". set Allows Null to "False". For the "Price" column. Set Data Type to "bigint".Query(selectQueryString)) { <tr> <td>@row. Save the table and name it "Product".Id</td> <td>@row. Click New Table. and "Pr ice".Description</td> <td aligh="right">@row. Part IV: Adding a Database. For the "Id" column. Follow the instructions below to create an SQL database called "SmallBakery".

sdf node and then click Tables. expand the SmallBakery. Replace the code in the file with the code from the example above: ListProducts.Description</td> <td aligh="right">@row.99 Pecan Pie If you like pecans. Right-click the Product table and then click Data.c shtml.99 Cupcakes Your kids will love these 7. Is Identity tells the database to assign a new ID number for every record (start ing at 1). } <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.Price</td> </tr> } </table> </body> </html> ________________________________________ Add the Test Page to Your Application Add a new line to your layout file: . this is for you 10.99 Strawberry Cake Made with organic strawberries 9. create a new web page named ListProducts.99 Apple Pie Second only to your mom's pie 12.Id</td> <td>@row.Query(selectQueryString)) { <tr> <td>@row. In the edit pane. Data Type = "nvarchar" specifies that this column is a string of variable length . enter the following records: Name Description Price Bread Baked fresh every day 2.Notes: Allow Nulls = "False" specifies that the column cannot be blank (empty). var selectQueryString = "SELECT * FROM Product ORDER BY Name".99 ________________________________________ Creating a Test Page Follow the instructions below to create a test page for your database: In the root folder (the Demo folder).99 Lemon Pie Made with the best lemons in the world 11. (The n prefix indicates that the column can hold international Unicode character s) ________________________________________ Adding Data to the Database Follow the instructions below to add some data to your database: In the left pane.Name</td> <td>@row. Is Primary Key tells the database that this will be the table's primary key.cshtml @{ var db = Database.Open("SmallBakery").

6. it looks for a connection string in the application's Web. and run the application on a web host using a connection string.NET Web Page s applications. If you are using using Web Matrix 2 beta.Layout. it searches the application's App_Data folder for a database that matches the name parameter without the file-name extension. click the Gallery button. ________________________________________ 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. is not included in the Empty Site template in WebMatrix 2. Select the Microsoft ASP. In the ribbon. This two-step search makes it possible to test the application with a local data base.NET Web Pages 2 Web Data package and then click Install.AspNet. you have to add the WebData package to your site. This is because the assembly (DLL) WebMatrix.WebPages. with full user name and password. 7. you might get this Error Message: Compiler Error Message: CS0103: The na me 'DataBase' does not exist in the current context. In the search box. A connection string contains information about how to connect to a database. Part V: Adding Membership registration.c onfig file. 4. 2. ________________________________________ Create a WebSecurity Database We will create a new WebSecurity database to store user profiles. The Gallery page displays details about the package. With the WebSecurity object you can create user accounts.WebData".Open(name) method will connect to a database in two steps: First. The NuGet Gallery is displayed.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. 5. To make this work. Click Install and WebMatrix installs the Web Data package. ________________________________________ Error in Database Connection This tutorial was written using Web Matrix 1. Follow these instructions: 1. click the Files workspace. ASP. 3. It can include a file path.NET Web Pages . enter "Microsoft. login and logout users . and Login. logins.Data.NET Web Pages by building a web site from scratch.Adding Registration and Login « Previous Next Chapter » ________________________________________ Learn ASP. If no file is found. reset or change passwords. or the name of an SQL database. and more. In the left pane. passwo .

} input[type="text"]. if it is not already initialized. Put the following code inside the file: _AppStart. and click "Add a database to your s ite" to create a new SQL Server Compact database. You don't have to create a new database. "Users" is the name of the database. create a new file named "Register. Although true indicates that the membership tables can be created automa tically. create a new page named _AppStart. } input[type="submit"] { padding:4px. Select the Databases workspace in WebMatrix. "UserProfile" is the name of the database table that contains the user profile i nformation. . ________________________________________ Edit The Style Sheet In the "Shared" folder. var password = "". with user profile tables. } The code above will be run each time your web site (application) starts. You can use your existing datab ase (SmallBakery.cshtml".sdf" The database will be created in the App_Data folder of your web.cshtml @{ WebSecurity. } ________________________________________ Add a Registration Page In the "Account" folder. Otherwise set to false.input[type="password"] { width:300px.sdf). true).cshtml @{// Initialize page var email = "".css): Add the following CSS code to the file: Site.InitializeDatabaseConnection("Users".css /* Forms --------------------*/ fieldset label { display:block. "Emai l".rds. the database itself must always exist. "UserProfile". true is a boolean value indicating that the user profile and membership tables should be created automatically if they don't exist. edit your your style sheet (Site. Name the database "Users. It init ializes the WebSecurity database (Users. "UserId" is the name of the (integer) column that contains the user IDs.sdf). Put the following code inside the file: Register. and membership information. "UserId". ________________________________________ Create an AppStart Page In the root of your web (the demo folder). "Email" is the name of the (string) column that contains user names. padding:4px.csh tml.

var confirmPassword = "". var ErrorMessage = "".".Execute("INSERT INTO UserProfile (Email) VALUES (@0)".Form["confirmPassword"].} if (password != confirmPassword) { ErrorMessage = "Password and confirmation do not match. // If this is a POST request.Open("Users").CreateAccount(email.} } } } @if (ErrorMessage!="") { <p>@ErrorMessage</p> <p>Please correct the errors and try again.". password = Request.</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> . WebSecurity.Form["password"]. false). create a new account if (ErrorMessage=="") { var db = Database.IsEmpty() || password. if (email.QuerySingle("SELECT Email FROM UserProfile WHERE LOWER(Email) = LO WER(@0)". } else {ErrorMessage = "Email address is already in use. if (user == null) { db. email).Redirect("~/"). // Navigate back to the homepage and exit Response.Form["email"].IsEmpty()) { ErrorMessage = "You must specify both email and password.} // If all information is valid. password. validate and process data if (IsPost) { email = Request. var user = db.". email). confirmPassword = Request.

password.IsEmpty() || password. password = Request.cshtml @{// Initialize page var username = "".</ol> </fieldset> </form> ________________________________________ Add a Login Page In the "Account" folder. var password = "".Form["password"].} else {ErrorMessage = "Login failed". var ErrorMessage = "".Redirect("~/").IsEmpty()) { ErrorMessage = "You must specify a username and password.Form["username"].Login(username. Navigate back to the homepage and exit if (WebSecurity. Put the following code inside the file: Login. } else { // Login.cshtml". false)) {Response.</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 .". validate and process data if (IsPost) { username = Request. create a new file named "Login.} } } } @if (ErrorMessage!="") { <p>@ErrorMessage</p> <p>Please correct the errors and try again. if (username. // If this is a POST request.

} The code above executes an if test.</p> </div> </body> </html> The layout file above. with his email address and password. and Security In the previous chapter we added a registration page and a login page to the web site. When a membership is registered. Login. user membership and login functions do not automatically restrict (or o pen) any access to the web site. Put the following code inside the layout file: Layout. is a copy of the layout file from the previous chapter. ________________________________________ Congratulations You have added membership registration and login information to your website. edit the layout file.Security « Previous Next Chapter » ________________________________________ Learn ASP.Redirect("~/Account/Login").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>&copy. w ith the Register an Login pages added to the navigation menu (marked red). the user is redirected to the login page. All rights reserved. ________________________________________ Adding Security to Pages Access restrictions (security) can easily be added to any web page. the user can login. Just put the following code inside the page: Security Code: if (!WebSecurity.In the "Shared" folder. If not. ASP. 2012 W3Schools.NET Web Pages . Part VI: Security.IsAuthenticated) { Response. However. Security (access restrictions) has to be added to each of the web pages.css" /> </head> <body> <ul id="menu"> <li><a href="/Default. asking if the user is logged in. ________________________________________ What We Will Do In this chapter we will: • Add access restriction security to a web page ________________________________________ Membership. ________________________________________ .cshtml <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/Shared/Site.NET Web Pages by building a web site from scratch.

Add the security code at the beginning of the page: ListProducts.Price</td> </tr> } </table> </body> </html> The ListProducts page above.cshtml.cshtml @{ if (!WebSecurity.Name</td> <td>@row. the page ListProducts.Open("SmallBakery").Query(selectQueryString)) { <tr> <td>@row. is a copy of the page from the previous chapter abo ut databases.Preventing Access to the Database In our example. ________________________________________ Congratulations You have added security to your web site. } var db = Database.Id</td> <td>@row. The security code is (added at the beginning) is marked red. } <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. .Description</td> <td aligh="right">@row. lists bakery products from the "Sm allBakery" database.Redirect("~/Account/Login"). var selectQueryString = "SELECT * FROM Product ORDER BY Name". using the WebSecurity object.IsAuthenticated) { Response.