Professional Documents
Culture Documents
Introducing ASP - Net Web Pages 2 - Getting Started
Introducing ASP - Net Web Pages 2 - Getting Started
Introducing ASP - Net Web Pages 2 - Getting Started
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.
Hello, WebMatrix
In Windows, start Microsoft WebMatrix.
To begin, you'll create a blank website and add a page. 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".
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.
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 <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.
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.
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.
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).