7

Other Categories

Install WebMatrix

Create an ASP.NET website from scratch

This walkthrough shows you how to install WebMatrix and use it to build a simple site from scratch.

Along the way, you'll become familiar with many features of WebMatrix.

What you'll do

Become familiar with the WebMatrix user interface.

Use a site template to create a blank site, then add files and code to customize it.

Get started with ASP.NET Razor syntax.

Install the ASP.NET Web Helpers Library 1.1 and create a dynamic web page that displays a live

Twitter feed.

Analyze requests to your website and find errors.

Add a database with a table and data to your website, then use a WebGrid helper to display the

data in a web page.

Run an analysis of your website to enhance its visibility to search engines.

Learn how to find web hosting and publish your site to the web.

What you'll need

To run the steps in this walkthrough, you must be running Windows XP SP3 or a later version of Windows.

Introducing WebMatrix

Seamless, simple, small, and best of all, free, WebMatrix includes a complete collection of web development tools that installs in minutes. It

elegantly integrates a web server with database and programming frameworks to create a single, integrated experience. Use WebMatrix to

streamline the way you code, test, and publish your own ASP.NET or PHP website. Or start a new site using the world's most popular open source

apps, like DotNetNuke, Umbraco, WordPress, or Joomla. With WebMatrix on your desktop, you're using the same powerful web server, database

engine, and frameworks that will run your website on the internet, which makes the transition from development to production smooth and

seamless.

Getting WebMatrix

To install WebMatrix, you can use Microsoft's Web Platform Installer (Web PI 3.0), which is a free application that makes it easy to install and

configure web-related technologies. You can install the Web Platform Installer from the WebMatrix download page.

On the download page, click Install Now. At the security warnings, click Run. On the Web Platform Installer page, click Install.

Join us on:Sign In|Microsoft Home

BlogEngine.NET DotNetNuke Drupal Joomla Orchard Razor ScrewTurn Wiki Umbraco WordPress

Like 78 people like this.

Learn

How To's

Walkthroughs

Documentation

Home

Platform

Get Started

Get Web Apps

Get Hosting

Join Programs

Downloads

On the Web Platform Installation screen, WebMatrix displays a list of additional required components. Click I Accept. The install begins.

Creating Your First Website

Right out of the box, WebMatrix gives you a number of options for how to create sites. You can create a site from a template or from a folder

that already contains ASP.NET web pages. Or you can download an open-source application from the gallery as the basis for your site.

For this walkthrough, click Site From Template to see a list of available templates.

Select the Empty Site template to create a new site from scratch, and name it WebMatrixDemo. Click OK.

Before moving on, let's take a quick look around the WebMatrix user interface. In the lower-left part of the page you see that you can select one

of four workspaces. When you open WebMatrix and select a site, you start off in the Site workspace, which lets you perform tasks like specifying

site settings (for example, designating a default web page) and monitoring HTTP requests.

To create, delete, and update files such as web pages, select the Files workspace. The site's folder structure appears in the left pane, and when

you select a file, you can edit it in the content pane on the right.

To add a database to your site and then add tables and data to it, select the Databases workspace. You get a list of databases in the left pane,

and the content pane changes depending on what you want to do with a selected database.

Finally, to get information about how to help your site rank high in search engine results, select the Reports workspace. Once you've run some

reports, you'll see them listed on the left, and when you select one, you'll see the reports contents on the right.

reports, you'll see them listed on the left, and when you select one, you'll see the reports contents on the right.

You might have noticed that across the top of the page is a Quick Access Toolbar and a ribbon, like in Microsoft Office 2010. Some of the

buttons on the ribbon's Home tab are different in each workspace, but the buttons in the Site group are always the same.

You use My Sites to choose a site to work on, Publish to make the site publicly available, Run to test the site in a browser, and

Start/Stop/Restart to work with the web server that you'll use in WebMatrix to test your website (IIS Express). You'll learn more about IIS

Express in a minute.

Adding an ASP.NET Web Page to Your Site

To get a feel for how to work in WebMatrix and what you can do with it, begin by creating a web page. Select the Files workspace and then click

New. You get a list of templates to choose from for various file types.

Select the CSHTML template and call the new page Default.cshtml. The extension .cshtml indicates that this is an ASP.NET Web page. It can

contain HTML, JavaScript, and CSS, just like a normal HTML page, and you can make the page dynamic by adding special code that runs on the

server.

Click OK.

The CSHTML template creates a new page with some basic HTML.

As you can see, this is ordinary HTML markup. Add some simple "Hello World" HTML to it.

Now click the Default.cshtml file in the navigation pane and then click the Run button to see this page in the browser.

Creating Dynamic Web Pages

You can use helpers in ASP.NET Web pages to create dynamic web pages with a minimum of code. A helper packages commonly used functionality

in a way that's easy to write code for. (In other words, helpers package functionality that it would be a lot more trouble to implement if you had

to code it all yourself.) To use helpers, you have to install the Microsoft ASP.NET Helpers Library.

Click Run to run the Default.cshtml file again. In the address box of your browser, remove the Default.cshtml file name from the URL and replace

it with _Admin. The resulting URL will look similar to the following (it's ok if your URL displays a port number other than 8080):

http://localhost:8080/_Admin

Press Enter to browse to a page that lets you administer your site. Because this is the first time you're logging into the _Admin page, it prompts

you to create a password and guides you through some steps to ensure your site's security. After you do that, click Install packages from an

online feed.

Next, click the Install button next to the ASP.NET Web Helpers Library 1.1 package.

On the next page, click Install to start the installation.

When the installation completes, the _Admin page displays the result.

Now that you have the helpers installed, we'll show you how simple it is to create dynamic (programmed) web pages. Go back to WebMatrix. In

the Files workspace, click New. Create a new CSHTML page named Twitter.cshtml and add some HTML and code to it:

In this example, just a single line of code displays a box of dynamically scrolling tweets from a Twitter user. The Twitter user in this case is

"Microsoft". Twitter.Profile is an example of how to use a helper. This is just one of many helpers that ASP.NET makes available. Other helpers do

things like upload and crop images, play video clips, and display data from a database.

Select the Twitter.cshtml file in the navigation pane and then click Run, and there they are -- the tweets you asked for are in your browser. (The

style of the box is fully customizable, of course; this is the default appearance.)

That's all there is to it—you've created a page that displays a Twitter feed, using simple HTML and one ASP.NET helper.

For more information about using WebMatrix Helpers and programming with Razor Syntax, see the WebMatrix Book.

Testing Your Site

WebMatrix includes IIS Express, which works much like IIS, the commercial Web server from Microsoft. However, IIS Express is integrated with

WebMatrix and runs on your local computer, which makes it easy to test your site without having to copy your files to a public server and test

them there.

Sometimes you need to do more than just see how pages look in a browser in order to test a site. You might want to know what's going on

behind the scenes when a request comes in to your site. For example, are there broken links in your pages? The Requests tool lets you know

where there might be problems in your site, and it can take you directly to the file to make a fix.

Select the Site workspace and then click Requests in the ribbon to see the Requests tool, and then click Only Errors to see only the errors.

The first two examples show that a 404.0 error code was issued because your site does not have a favorites icon. To see details about the error,

you can click the line with the 404. WebMatrix then shows you details about the error, the name of the page that contains the broken link, and

links to resources for more information.

For more information about using WebMatrix to analyze requests to your website, see Analyze Requests to your Website.

Working with Data

Many websites need to keep information in a database. WebMatrix includes Microsoft SQL Server Compact 4.0, which you can use to create

databases for your website without the need for full SQL Server. With SQL Server Compact, it's easy to publish your website, because everything

is in files in your website folder. (If your website traffic grows and you need more database capabilities, WebMatrix also can automate the process

is in files in your website folder. (If your website traffic grows and you need more database capabilities, WebMatrix also can automate the process

of migrating your data to full SQL Server.)

Whether you use SQL Server Compact or full SQL Server, you can use WebMatrix to create a database, create tables and columns, and add and

display data. To see how to work with a database, switch to the Databases workspace. Add a database by clicking New Database.

Next, create a table and define some columns for it. In the navigation pane, click Tables, and then click New Table in the ribbon to create the

table. Click New Column to add columns in the table designer. Add the following columns:

Click the Save icon in the Quick Access Toolbar and name the table Product.

Next, select the new table in the navigation pane. In the ribbon, click Data to use the built-in table data editor to add some data:

Ok, you've got some data … now how do you display it? Easily, using another ASP.NET helper, namely the WebGrid helper. In the Files

workspace, create another CSHTML page named ListProducts.cshtml and add the following code:

@{

var db=Database.Open("WebMatrixDemo");

var grid=new WebGrid(db.Query("SELECT * FROM Product ORDER BY Name"));

}

<!DOCTYPE html>

<html>

<head>

<title>Products</title>

<style type="text/css">

table {border-collapse: collapse;}

td, th {border: solid 1px; }

</style>

</head>

<body>

<body>

<h1>Products</h1>

@grid.GetHtml()

</body>

</html>

Select the ListProducts.cshtml file in the navigation pane and then click Run. The browser displays a simple table with sortable columns:

Optimizing Your Site

WebMatrix has a built in search-engine optimization (SEO) tool that inspects your website and provides suggestions that can help increase the

ranking for your web pages. The tool shows you the optimizations that you can make, and points you directly to the pages that you need to edit.

To create a report, select the Reports workspace and click Create a report for the site in the content pane. The report lists the errors that

were found.

This report says there's a problem with the one of the pages. Double-click the localhost URL to expand it and see what the problem is.

For each error, WebMatrix explains what the problem is, makes recommendations for fixing it, and provides links to more information. At this

point, you can click Edit this page, which will take you directly to the page in the editor where you can fix the problem, or you can click View

More Details to get more information about the error. In this case, if you click Edit this page, WebMatrix will open the Default.cshtml file so that

you can add the missing description.

For more information about using the Reports feature in WebMatrix, see Use WebMatrix to optimize your site for search engines.

Getting on the Web

When you're ready to show your application to the world, WebMatrix helps you by introducing you to web hosting partners so that you can find

the one that meets your needs. On the ribbon, click Publish, and then select Find Web Hosting to see hosting offers in your browser.

To publish your site, WebMatrix has built-in support for FTP and Microsoft Web Deploy, which is a one-click publishing solution. Once you've

established an account with a hosting provider, import or enter your account settings into the WebMatrix tool. Then all you have to do to publish

your site directly from WebMatrix is click Publish. It's as easy as that!

For more information about publishing with WebMatrix, see How to Publish a Web Application Using WebMatrix.

Learn More

You can discuss this article using the

adjacent Facebook talkback.

For technical questions please visit our

discussion forums, where we have a

vibrant community of developers like

you, as well as Microsoft engineers

who are ready to answer your

questions!

Learn More

There's a lot that we haven't covered here—we've barely scratched the surface. To learn more, including how you can use open source

applications, monitor your site's performance, or what other helpers are available, visit http://www.asp.net. For more information about SQL

Server Compact, see SQL Server Compact.

To learn more about WebMatrix and the Microsoft Web Platform, see the following websites:

http://www.microsoft.com/web/webmatrix/learn.aspx

http://www.microsoft.com/web/category/how-to

http://www.microsoft.com/web/category/walkthroughs

http://www.microsoft.com/web/category/all

Alternatively, you may have noticed that there is an Online Help button you can click in the top right corner in WebMatrix. Once you go to this

Learn page, you'll find more resources about all aspects of WebMatrix, you'll be able to find help in forums, or file bugs and suggestions directly

to the WebMatrix product team!

Add a comment 14 comments

Add a comment

Facebook social plugin

14 comments

University of Jordan · بشرى حمدان

can we connect our web site with a database when using webmatrix?

Reply · · Like · October 3 at 11:39pm2

Nelcy Nuñez · Instituto Tecnológico de Las Américas (ITLA)

Super!

Reply · · Like · August 25 at 11:39am2

Woodie Sayles · Works at Retired

Everything actually worked the way the demo said. I like the product and plan on using it for future sites.

Reply · · Like · July 20 at 9:19pm2

Aleem Hayat · Digital Designer at Dubai based company

cool. I like it.

Reply · Like · October 4 at 3:47am

Ganesh Naga · Works at Microsoft Student Partners

Thanks for the demo. I like it.

Reply · Like · September 12 at 3:10am

Kendrick Jing

hey guys...i;m new here...

it seems like I got a problem here...

after I login to the admin, it show this message "Too many automatic redirections were attempted.".

please guide me. thanks.

Reply · Like · July 13 at 7:48pm

Julio Timoteo González · Microsoft Learning Center

I'll invest in this my freetime, :D

Reply · · Like · April 14 at 1:18am2

Amar Dhembare · Tatyasaheb Kore Institute of Engineering and Technology

good explained

Reply · Like · May 3 at 12:42am

Heidi Bautista

Cool stuff.

Reply · Like · May 2 at 11:42am

Muugii Jagaa · CSMS

cool

Reply · Like · May 3 at 7:23am

Julio Timoteo González · Microsoft Learning Center

Si supieran lo que estoy haciendo, muajajaja xD

Reply · Like · April 14 at 2:13pm

Salomão Alves · Webmaster at Colégio Antônio Vieira

Parece ser muito bom. Vou experimentar.

Reply · · Like · May 3 at 8:07am2

Juliano Pires · Diretor at Agência Mega Way Soluções Web

Muito Bom

Reply · · Like · July 20 at 6:22pm2

Servers

Windows Server

SQL Server

IIS

Technologies

.NET Framework

ASP.NET

Tools

Visual Studio

Expression Studio

Windows Internet Explorer

Web Apps

SharePoint Server

Commerce Server

Communities

ASP.NET Community

Visual Studio Community

IIS Community

Silverlight Community

MSDN Community Center

Student Lounge

Channel 9

Blogs

Web Platform Team Blog

IIS Team Blog

Web Tools Team Blog

Silverlight Team Blog

IE Team Blog

Brian Swan's Blog

Ruslan Yakushev's Blog

Information For...

IT professionals (TechNet)

Web Developers (MSDN)

Web Designers (Expression)

Enterprise Organizations

Hosters

ASP.NET

Silverlight

PHP on Windows

Commerce Server

BizTalk Server

Web App Gallery

Channel 9

Channel 10

CodePlex

Ruslan Yakushev's Blog

Interop Team Blog

Scott Guthrie's Blog

Scott Hanselman's Blog

Privacy StatementTrademarksTerms of UseSitemap© Microsoft Corporation. All rights reserved.