8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 1/25
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. UseWebMatrix 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, likeDotNetNuke, 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 WebPlatform Installer page, click Install.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 2/25
On t Web Pl f m Installati n screen, WebM tr i displ s a list of additional required
components. Click I Accept. The install begins.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 3/25
Creating Your First Website
R ight out of the box, WebMatr ix gi es you a number of options for how to create sites. Youcan 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.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 4/25
For this walk through, click Site From Template to see a list of available templates.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 5/25
Select the Empty Site template to create a new site from scratch, and name it WebMatri Demo. Click OK .
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 6/25
Before moving on, let s take a quick look around the WebMatr ix user interface. In the lower-lef t par t of the page you see that you can select one of four workspaces. When you open
WebMatr ix and select a site, you star t off in theSite workspace, which lets you perform taskslike specifying site settings (for example, designating a default web page) and monitor ing
HTTP requests.
To create, delete, and update f iles such as web pages, select the Files workspace. The site's
folder structure appears in the lef t pane, and when you select a f ile, you can edit it in thecontent pane on the r ight.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 7/25
To add a database to your site and then add tables and data to it, select theDatabases workspace. You get a list of databases in the lef t pane, and the content pane changes
depending on what you want to do with a selected database.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 8/25
Finally, to get information about how to hel p your site rank high in search engine results,select the R eports workspace. Once you've run some repor ts, you'll see them listed on the
lef t, and when you select one, you'll see the repor ts contents on the r ight.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 9/25
You might have noticed that across the top of the page is aQuick Access Toolbar and ar i bbon, like in Microsof t Off ice 2010. Some of the buttons on the r i bbon'sHome tab are
different in each workspace, but the buttons in theSite group are always the same.
You use My Sites to choose a site to work on, Publish to make the site publicly available,R un to test the site in a browser, and Start/Stop/R estart to work with the web server that
you'll use in WebMatr ix 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
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 10/25
To get a feel for how to work in WebMatr ix and what you can do with it, begin by creating aweb page. Select the Files workspace and then click New. You get a list of templates to
choose from for var ious f ile 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, JavaScr i pt, 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.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 11/25
As you can see, this is ordinary HTML markup. Add some simple "Hello Wor ld" HTML to
it.
Now click the Default.cshtml f ile in the navigation pane and then click theR un button to seethis page in the browser.
Creating Dynamic Web Pages
You can use hel pers in ASP.NET Web pages to create dynamic web pages with a minimum
of code. A hel per packages commonly used functionality in a way that's easy to wr ite code
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 12/25
for. (In other words, hel pers package functionality that it would be a lot more trouble toimplement if you had to code it all yourself.) To use hel pers, you have to install the
Microsof t ASP.NET Hel pers Li brary.
Click R un to run the Default.cshtml f ile again. In the address box of your browser, removethe Default.cshtml f ile name from the UR L and replace it with _Admin. The resulting UR L
will look similar to the following (it's ok if your UR L displays a por t number other than8080):
http://localhost:8080/_Admin
Press Enter to browse to a page that lets you administer your site. Because this is the f irst
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 secur ity. Af ter you do that, click Install packages
f rom an online f eed.
Next, click the Install button next to the ASP.NET Web Hel pers Li brary 1.1 package.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 13/25
On the next page, click Install to star t the installation.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 14/25
When the installation completes, the _Admin page displays the result.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 15/25
Now that you have the hel pers installed, we'll show you how simple it is to create dynamic
(programmed) web pages. Go back to WebMatr ix. In theFiles workspace, click New. Create
a new CSHTML page namedTwitter.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 "Microsof t".Twitter.Profile is an example of
how to use a hel per. This is just one of many hel pers that ASP.NET makes available. Other
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 16/25
hel pers do things like upload and crop images, play video cli ps, and display data from adatabase.
Select the Twitter.cshtml f ile in the navigation pane and then click R un, 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 simpleHTML and one ASP.NET hel per.
For more information about using WebMatr ix Hel pers and programming with Razor Syntax,see the WebMatr ix Book .
Testing Your Site
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 17/25
WebMatr ix includes IIS Express, which works much like IIS, the commercial Web server from Microsof t. However, IIS Express is integrated with WebMatr ix and runs on your local
computer, which makes it easy to test your site without having to copy your f iles to a publicserver 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 toyour site. For example, are there broken links in your pages? TheR equests tool lets you
know where there might be problems in your site, and itcan take you directly to the f ile tomake a f ix.
Select the Site workspace and then click R equests in the r i bbon to see theR equests tool, and
then click Only Errors to see only the errors.
The f irst two examples show that a 404.0 error code was issued because your site does not
have a favor ites icon. To see details about the error, you can click the line with the 404.WebMatr ix then shows you details about the error, the name of the page that contains the
broken link, and links to resources for more information.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 18/25
For more information about using WebMatr ix to analyze requests to your website, see
Analyze Requests to your Website.
Work ing with Data
Many websites need to keep information in a database. WebMatr ix includes Microsof t SQL
Server Compact 4.0, which you can use to create databases for your website without the needfor full SQL Server. With SQL Server Compact, it's easy to publish your website, becauseeverything is in f iles in your website folder. (If your website traff ic grows and you need more
database capabilities, WebMatr ix 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 WebMatr ix to create
a database, create tables and columns, and add and display data. To see how to work with adatabase, switch to the Databases workspace. Add a database by click ingNew Database.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 19/25
Next, create a table and def ine some columns for it. In the navigation pane, click Tables, andthen click New Table in the r i bbon to create the table. Click New Column to add columns in
the table designer. Add the following columns:
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 20/25
Click the Save icon in the Quick Access Tool bar and name the tableProduct.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 21/25
Next, select the new table in the navigation pane. In the r i bbon, click Data to use the built-intable data editor to add some data:
Ok, you've got some data « now how do you display it? Easily, using another ASP.NET
hel per, namely the WebGr id hel per. In theFiles 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>
<h1>Products</h1>
@grid.GetHtml() </body>
</html>
Select the ListProducts.cshtml f ile in the navigation pane and then click Run. The browser
displays a simple table with sor table columns:
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 22/25
Optimizing Your Site
WebMatr ix has a built in search-engine optimization (SEO) tool that inspects your websiteand provides suggestions that can hel p increase the rank ing for your web pages. The tool
shows you the optimizations that you can make, and points you directly to thepages that you
need to edit. To create a repor t, select theR eports workspace and click Create a report f or
the site in the content pane. The repor t lists the errors that were found.
This repor t says there's a problem with the one of the pages. Double-click the localhost UR L
to expand it and see what the problem is.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 23/25
For each error, WebMatr ix explains what the problem is, makes recommendations for f ixingit, 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 f ix the problem, or you canclick View More Details to get more information about the error. In this case, if you click
Edit this page, WebMatr ix will open the Default.cshtml f ile so that you can add the missingdescr i ption.
For more information about using theR eports feature in WebMatr ix, see Use WebMatr ix tooptimize your site for search engines.
Getting on the Web
When you're ready to show your application to the wor ld, WebMatr ix hel ps you by
introducing you to web hosting par tners so that you can f ind the one that meets your needs.
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 24/25
On the r i bbon, click Publish, and then select Find Web Hosting to see hosting offers in your browser.
To publish your site, WebMatr ix has built-in suppor t for FTP and Microsof t Web Deploy,
which is a one-click publishing solution. Once you've established an account with a hosting
provider, impor t or enter your account settings into theWebMatr ix tool. Then all you have to
do to publish your site directly from WebMatr ix is click Publish. It's as easy as that!
8/6/2019 ASP.net Website
http://slidepdf.com/reader/full/aspnet-website 25/25
For more information about publishing with WebMatr ix, seeHow to Publish a WebApplication Using WebMatr ix.