This set of tutorials gives you an overview of ASP.NET Web Pages (version 2) and Razor syntax, a lightweight framework for creating dynamic websites. It also introduces WebMatrix, a tool for creating pages and sites.
- What ASP.NET Web Pages technology is and what it's for.
- What WebMatrix is.
- How to install everything.
- How to create a website by using WebMatrix.
- Microsoft Web Platform Installer.
- WebMatrix.
- .cshtml pages
What Should You Know?
We're assuming that you're familiar with:
- HTML. No in-depth expertise is required. We won't explain HTML, but we also don't use anything complex. We'll provide links to HTML tutorials where we think they're useful.
- Cascading style sheets (CSS). Same as with HTML.
- Basic database ideas. If you've used a spreadsheet for data and sorted and filtered the data, that's the level of expertise we're generally assuming for this tutorial set.
We're also assuming that you're interested in learning basic programming. ASP.NET Web Pages use a programming language called C#. You don't have to have any background in programming, just an interest in it. If you've ever written any JavaScript in a web page before, you've got plenty of background.
Note that if you are familiar with programming, you might find that this tutorial set initially moves slowly while we bring new programmers up to speed. As we get past the first few tutorials, though, there will be less basic programming to explain and things will move along at a faster clip.
What Do You Need?
Here's what you'll need:
- A computer that is running Windows 7, Windows Vista SP2, Windows XP SP3, Windows Server 2003 SP2, Windows Server 2008, or Windows Server 2008 R2.
- A live internet connection.
- Administrator privileges (required for the installation process).
What Is ASP.NET Web Pages?
ASP.NET Web Pages is a framework that you can use to create dynamic web pages. A simple HTML web page is static; its content is determined by the fixed HTML markup that's in the page. Dynamic pages like those you create with ASP.NET Web Pages let you create the page content on the fly, by using code.
Dynamic pages let you do all sorts of things. You can ask a user for input by using a form and then change what the page displays or how it looks. You can take information from a user, save it in a database, and then list it later. You can send email from your site. You can interact with other services on the web (for example, a mapping service) and produce pages that integrate information from those sources.
What is WebMatrix?
WebMatrix is a tool that integrates a web page editor, a database utility, a web server for testing pages, and features for publishing your website to the Internet. WebMatrix is free, and it's easy to install and easy to use. (It also works for just plain HTML pages, as well as for other technologies like PHP.)
You don't actually have to use WebMatrix to work with ASP.NET Web Pages. You can create pages by using a text editor, for example, and test pages by using a web server that you have access to. However, WebMatrix makes it all very easy, so these tutorials will use WebMatrix throughout.
About These Tutorials
This tutorial set is an introduction to how to use ASP.NET Web Pages. There are 9 tutorials total in this introductory tutorial set. It's part of a series of tutorial sets that takes you from ASP.NET Web Pages novice to creating real, professional-looking websites.
This first tutorial set concentrates on showing you the basics of how to work with ASP.NET Web Pages. When you're done, you can work with additional tutorial sets that pick up where this one ends and that explore Web Pages in more depth.
We deliberately go easy on the in-depth explanations. And whenever we show something, for this tutorial set we always chose the way that we think is easiest to understand. Later tutorial sets go into more depth and show you more efficient or more flexible approaches (also more fun). But those tutorials require you to understand the basics first.
The tutorial set you've just started covers these features of ASP.NET Web Pages:
- Introduction and getting everything installed. (That's in the tutorial you're reading.)
- The basics of ASP.NET Web Pages programming.
- Creating a database.
- Creating and processing a user input form.
- Adding, updating, and deleting data in the database.
At any point you can publish (deploy) your site to a hosting provider. We'll talk about that at the end of this tutorial set and link you to a tutorial on how to do that.
What Will You Create?
This tutorial set and subsequent ones revolve around a website where you can list movies that you like. You'll be able to enter movies, edit them, and list them. Here are a couple of the pages you'll create in this tutorial set. The first one shows the movie listing page that you'll create:
And here's the page that lets you add new movie information to your site:
Subsequent tutorial sets build on this set and add more functionality, like uploading pictures, letting people log in, sending email, and integrating with social media.
Ok, let's get started.
Note You can download a finished version of the website that's described in these tutorials.
Installing Everything
You can install everything by using the Web Platform Installer from Microsoft. In effect, you install the installer, and then use it to install everything else.
To use Web Pages, you have to be have at least Windows XP with SP3 installed, or Windows Server 2008 or later.
On the Web Pages page of the ASP.NET website, click Install WebMatrix.
This button takes you to the Web Platform Installer page on the Microsoft.com site.
If the download doesn't start automatically, click the Install Now button. Then click Run. (If you want to save the installer, click Save and then run the installer from the folder where you saved it.)
The Web Platform Installer appears, ready to install WebMatrix. Click Install.
The installation process figures out what it has to install on your computer and starts the process. Depending on what exactly has to be installed, the process can take anywhere from a few moments to several minutes.
Hello, WebMatrix
When it's done, the installation process can launch WebMatrix automatically. If it doesn't, in Windows, from theStart menu, launch Microsoft WebMatrix.
In Windows, start Microsoft WebMatrix.
To begin, you'll create a blank website and add a page. In a later tutorial in this set you'll play with one of the built-in website templates.
In the start window, click Templates. Templates are prebuilt files and pages for different types of websites.
In the Quick Start window, select Empty Site and name the new site "WebPagesMovies".
Click Next.
WebMatrix creates and opens the site:
At the top, there's a Quick Access Toolbar and a ribbon, like in Microsoft Office 2010. At the bottom left, you see the workspace selector where you switch between tasks (Site, Files, Databases, Reports). On the right is the content pane for the editor and for reports. And across the bottom you'll occasionally see a notification bar for messages.
You'll learn more about WebMatrix and its features as you go through these tutorials.
Creating a Web Page
To become familiar with WebMatrix and ASP.NET Web Pages, you'll create a simple page.
In the workspace selector, select the Files workspace. This workspace lets you work with files and folders. The left pane shows the file structure of your site. The ribbon changes to show file-related tasks.
In the ribbon, click the arrow under New and then click New File.
WebMatrix displays a list of file types. Select CSHTML, and in the Name box, type "HelloWorld". A CSHTML page is an ASP.NET Web Pages page.
Click OK.
WebMatrix creates the page and opens it in the editor.
As you can see, the page contains mostly ordinary HTML markup, except for a block at the top that looks like this:
@{
}
That's for adding code, as you'll see shortly.
Notice that the different parts of the page — the element names, attributes, and text, plus the block at the top — are all in different colors. This is called syntax highlighting, and it makes it easier to keep everything clear. It's one of the features that makes it easy to work with web pages in WebMatrix.
Add content for the
Add content for the
<head> and <body> elements like in the following example. (If you want, you can just copy the following block and replace the entire existing page with this code.)@{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Hello World Page</title> </head> <body> <h1>Hello World Page</h1> <p>Hello World!</p> </body> </html>
In the Quick Access Toolbar or in the File menu, click Save.
Testing the Page
In the Files workspace, right-click the HelloWorld.cshtml page and then click Launch in browser.
WebMatrix starts a built-in web server (IIS Express) that you can use to test pages on your computer. (Without IIS Express in WebMatrix, you'd have to publish your page to a web server somewhere before you could test it.) The page is displayed in your default browser.
Adding Some Server-Side Code
Close the browser and go back to the page in WebMatrix.
Add a line to the code block so that it looks like the following code:
@{
var currentDateTime = DateTime.Now;
}
This is a little bit of Razor code. It's probably clear that it gets the current date and time and puts that value into avariable named
currentDateTime. You'll read more about Razor syntax in the next tutorial.
In the body of the page, after the
<p>Hello World!</p> element, add the following:<p>Right now it's @currentDateTime</p>
This code gets the value that you put into the
currentDateTime variable at the top and inserts it into the markup of the page. The @ character marks the ASP.NET Web Pages code in the page.
Run the page again (WebMatrix saves the changes for you before it runs the page). This time you see the date and time in the page.
Wait a few moments and then refresh the page in the browser. The date and time display is updated.
In the browser, look at the page source. It looks like the following markup:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Hello World Page</title> </head> <body> <h1>Hello World Page</h1> <p>Hello World!</p> <p>Right now it's 1/18/2012 2:49:50 PM</p> </body> </html>
Notice that the
@{ } block at the top isn't there. Also notice that the date and time display shows an actual string of characters (1/18/2012 2:49:50 PM or whatever), not @currentDateTime like you had in the .cshtml page. What happened here is that when you ran the page, ASP.NET processed all the code (very little in this case) that was marked with @. The code produces output, and that output was inserted into the page.This Is What ASP.NET Web Pages Are About
When you read that ASP.NET Web Pages produces dynamic web content, what you've seen here is the idea. The page you just created contains the same HTML markup that you've seen before. It can also contain code that can perform all sorts of tasks. In this example, it did the trivial task of getting the current date and time. As you saw, you can intersperse code with the HTML to produce output in the page. When someone requests a .cshtml page in the browser, ASP.NET processes the page while it's still in the hands of the web server. ASP.NET inserts the output of the code (if any) into the page as HTML. When the code processing is done, ASP.NET sends the resulting page to the browser. All the browser ever gets is HTML. Here's a diagram:
The idea is simple, but there are many interesting tasks that the code can perform, and there are many interesting ways in which you can dynamically add HTML content to the page. And ASP.NET .cshtml pages, like any HTML page, can also include code that runs in the browser itself (JavaScript and jQuery code). You'll explore all of these things in this tutorial set and in subsequent ones.
Coming Up Next
In the next tutorial in this series, you explore ASP.NET Web Pages programming a little more.
