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 you like).

This article walks you through the following:

  • How to create a site from the WebMatrix Starter Site template for ASP.NET Web Pages.
  • 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

  1. In WebMatrix, select File –> New –> Site from Template Gallery.

  2. In the ASP.NET category, select Starter Site.

  3. In the Site Name box, enter a name and then click Next.

    clip_image002

Site Contents

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, or Google.
  • 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 Site template.

Account folder

This folder contains pages that are used to manage member registration and login.

App_Data folder

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 template.

bin folder

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.

Content folder

This folder contains the Site.css file that’s used by the site.

Images folder

This folder contains graphics that are referenced in the site layout.

Scripts folder

This folder contains jQuery libraries. The site uses jQuery files for client-side validation in the registration, login, and password-recovery pages.

_AppStart.cshtml file

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.

_SiteLayout.cshtml file

This page defines the layout for all the pages in the site.

Default.cshtml file

This is the site’s home page, which is displayed if users go to your site and don’t request a different page.

About.cshtml file

This page is displayed if users click the About link.

Contact.cshtml file

This page is displayed when users click the Contact link.

robots.txt file

This file is used by search-engine crawlers to determine what files in the site to index. For more information, see The Web Robots Pages.

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:

  1. 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.)

  2. Open the _SiteLayout.cshtml page.

  3. Find the <p class="site-title"> element.

  4. Inside that element, remove the text (“your logo here”).

  5. Substitute an <img> element whose src attribute 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:

  1. Create new .cshtml files in the root.

  2. Remove all the existing content.

  3. Add the following code block to the top of the new page:

    @{
        Layout = "~/_SiteLayout.cshtml";
        Page.Title = "page-name";
    }
    
    <hgroup class="title">
      <h1>@Page.Title.</h1>
      <h2>heading-info</h2>
    </hgroup>

    For page-name, substitute the page’s title, and for heading-info, add a second-level title.

  4. Add content to the body of the page. Use <div> or <p> elements (or similar) to enclose your content. Do not include <html>, <head>, or <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.

  5. If appropriate, add links on the Default.cshtml, About.cshtml, or Contact.cshtml pages that point to your new page.

  6. If you want to add your page to the menu at the top of the window, do the following:

    1. Open the _SiteLayout.cshtml page.
    2. Find the <nav> element that contains a <ul> element.
    3. 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 database.

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.

Protecting content

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:

  1. In WebMatrix, open your site and go to the Files workspace.

  2. In the ribbon, click the Gallery button.

  3. In the NuGet Gallery dialog box, click Installed.

Template Notes

  • HTML5. The _SiteLayout.cshtml page uses HTML5 elements like <header> and <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 ModelState.AddError, which causes the page to display an error in the Html.ValidationSummary method.

  • 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.

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!