How to Use the Starter Site Template for ASP.NET Web Pages
WebMatrix templates get you started with creating a website. Templates help you
in these ways:
- You get a professional-looking website right away that you can use either without
any changes or with just a little customizing.
- The site includes built-in features like login security.
- You can use the template as a learning tool that shows you how to use ASP.NET Web
Pages to create real-world sites.
The Starter Site template creates a general-purpose site that includes a
Home (default) page, an About page, and a Contact page. You can use this site as
a model for a small business or as the starting point for adding a blog (or anything
This article walks you through the following:
- How to create a site from the WebMatrix Starter Site template for ASP.NET
- An overview of the template contents.
- Suggestions for tasks to get started with the site that’s created by the template.
- Notes about some of the features in the site.
Create a site from the Starter Site template
In WebMatrix, select File –> New –> Site from Template Gallery.
In the ASP.NET category, select Starter Site.
In the Site Name box, enter a name and then click Next.
When you create a site based on the Starter Site template, your site includes
the following features:
- A consistent layout for all pages on the site.
- Professional look.
- A CSS-based layout using CSS Media Queries that automatically reformats pages for
devices (like phones) that have limited display are.
- jQuery libraries already in the site, and client-side validation (for example, in
the ChangePassword.cshtml page) that takes advantage of jQuery to provide
responsive input validation.
- Built-in support for security (login capability). By default, no site content is
restricted, but you can easily add folders and protect their contents so that only
logged-in users can see those pages.
- Support for logging in by using either the default membership system (where users
register directly in your site) or by using an external site like Facebook, Twitter,
- HTML5 elements, and the Modernizr library in case users visit your site but don’t
have browsers that support HTML5.
The following table lists the folders and files that are created from the Starter
This folder contains pages that are used to manage member registration and login.
This folder contains the following:
- A StarterSite.sdf database file that by default will contain the member
information (profile data and login information). You can use this database for
other site data as well.
- Data files for components (NuGet packages) that are installed by default by the
This folder contains the executable files (DLLs, assemblies) that are part of ASP.NET
Web Pages. If you install new components (NuGet packages), the executable files
for those components (if any) are installed in this folder.
This folder contains the Site.css file that’s used by the site.
This folder contains graphics that are referenced in the site layout.
This folder contains jQuery libraries. The site uses jQuery files for client-side
validation in the registration, login, and password-recovery pages.
This page contains initialization code that runs before any page in the site runs.
By default, this file is where the database for membership is initialized. The file
also contains commented-out code to support external logins and to support sending
email from the site. You can uncomment this code in order to support these features,
as described later in this document.
This page defines the layout for all the pages in the site.
This is the site’s home page, which is displayed if users go to your site and don’t
request a different page.
This page is displayed if users click the About link.
This page is displayed when users click the Contact link.
This file is used by search-engine crawlers to determine what files in the site
to index. For more information, see The Web Robots
Note Search-engine crawlers usually read and honor the robots.txt
file, but the file is not designed as a security measure. Do not use the robots.txt
file as a way to try to hide files.
Getting Started Tasks
After creating a site based on the Starter Site template, you typically perform
the tasks that are described in this section.
Adding your own logo
To use a graphical logo on the site, do this:
Add your logo graphic to the Images folder. The graphic should be approximately
about 160 by 160 pixels. (A logo that’s much larger than that will be too big for
the page layout.)
Open the _SiteLayout.cshtml page.
<p class="site-title"> element.
Inside that element, remove the text (“your logo here”).
<img> element whose
points to your new logo, like this:
<p class="site-title"><a href="~/"><img src="Images/NewLogo.png"/></a></p>
Changing the text of the Home, About, and Contact pages
The text on the site’s pages is just placeholder text. Open the Default.cshtml,
About.cshtml, and Contact.cshtml pages and replace the contents with
your own information.
Adding a page to the site
To add new pages to the site that use the site’s layout, do the following:
Create new .cshtml files in the root.
Remove all the existing content.
Add the following code block to the top of the new page:
Layout = "~/_SiteLayout.cshtml";
Page.Title = "page-name";
For page-name, substitute the page’s title, and for heading-info,
add a second-level title.
Add content to the body of the page. Use
elements (or similar) to enclose your content. Do not include
<body> elements. These elements
are already defined in the layout page (_SiteLayout.cshtml). If you’re not
certain how to add content, use the Default.cshtml or About .cshtml
pages as models.
If appropriate, add links on the Default.cshtml, About.cshtml,
or Contact.cshtml pages that point to your new page.
If you want to add your page to the menu at the top of the window, do the following:
- Open the _SiteLayout.cshtml page.
- Find the
<nav> element that contains a
- Add a new
<li> element that points to your page.
Enabling default logins
Login security is already built into a site based on the Starter Site template.
All you need to do is run the site, click the Register link, and create a
new user. The first time you do this, the site creates and configures the membership
If you want to use a specific database for membership information (and not the database
whose name matches your site name), open the _AppStart.cshtml page. In the
WebSecurity.InitializeDatabaseConnection method, change the first parameter
to the name of the database that you want to use. This database must already exist
in your site. (It can be empty.) Do not include .sdf as part of the database
name. For example, after your change, the method might look like the following line:
WebSecurity.InitializeDatabaseConnection("MyOwnDatabase", "UserProfile", "UserId", "Email", autoCreateTables:true);
Enabling external logins
By default, membership security uses the built-in membership provider that stores
user information in your site. However, you can also let people log in using their
Facebook, Twitter, or other accounts. When they do this, they associate their external
login information with your site.
For details, see Logging In
Using External Sites in an ASP.NET Web Pages (Razor) Site.
You can protect pages so that only logged-in users can see it. For details, see
the section “Creating a Members-Only Page” in
Adding Security and Membership to an ASP.NET Web Pages (Razor) Site.
Publishing the site
After you have finished customizing the site, you can publish it so that others
can see it. For details, see
Introducing ASP.NET Web Pages 2 - Publishing a Site by Using WebMatrix.
(Although that article is the last tutorial in a tutorial set, you can follow the
instructions provided there.)
Updating packages in the template
The site template includes NuGet packages that are already installed in your site.
Occasionally these packages are updated. To see if there are updates, do this:
In WebMatrix, open your site and go to the Files workspace.
In the ribbon, click the Gallery button.
In the NuGet Gallery dialog box, click Installed.
HTML5. The _SiteLayout.cshtml page uses HTML5 elements like
<nav>. Because many browsers don’t
support HTML5 yet, the site layout pages include a link to the
Modernizr library, which provides HTML5 support for older browsers.
Getting form values and values from the URL. Various pages (such as Account/Register.cshtml)
show how to process information that users enter into an HTML form.
User-input validation. The Account/Register.cshtml page validates
user input by using the
Validation helper. It also validates that a
user name is not already in use by making a query to the database; if the user name
already exists, the page sets an error using
causes the page to display an error in the
Using jQuery. Pages that let you enter information as text (for example,
Account/Register.cshtml and Account/Login.cshtml) show how to use
jQuery for “unobtrusive” client-side user input validation.