How to Use the Bakery 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 database access.
  • 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 Bakery template creates a simple business website (“Fourth Coffee Bakery”) that displays products. The site includes an order form where customers can specify a quantity and their contact information.

Note   The site does not actually process an order; it just sends a confirmation email. If you want to add payment processing to your site, you can explore installable packages that are available on the NuGet.org site. In WebMatrix, use the Gallery button in the ribbon to view available packages.

This article walks you through the following:

  • How to create a site from the WebMatrix Bakery 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 Bakery template

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

2. In the ASP.NET category, select Bakery.

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 Bakery template, your site includes the following features:

  • A consistent layout for all pages on the site and a professional look.
  • A CSS-based layout 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 Order.cshtml page) that takes advantage of jQuery to provide responsive input validation.

The following table lists the folders and files that are created from the Bakery template.

App_Data folder

This folder contains the following:

· A bakery.sdf database file that contains information about the products.

· 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 are installed in this folder.

Content folder

This folder contains the.css files that are used by the site. There are separate .css files for the default layout (Site.css) and for layout on mobile devices (Site.mobile.css).

This site also contains jQuery files that are used to render on mobile devices.

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 and processing in the Order page.

_PageStart.cshtml file

This page contains code that runs during every request before any page in the root folder runs. In this case, the code in this site sets the layout page for all the other pages in the site root.

_SiteLayout.cshtml file

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

_SiteLayout.Mobile.cshtml file

This page defines the layout for all the pages in the site when they are requested from a mobile device.

About.cshtml file

This page is displayed if users click the About link. You can customize this page to display a Twitter feed, as described later.

Default.cshtml file

This is the site’s home page. It displays the bakery products. Users can click an Order button next to a product.

Order.cshtml file

This page lets users enter an order. When they submit their order, the page goes to the OrderSuccess.cshtml page.

You must enable email in this page in order to be able to process the order, as described later.

OrderSuccess.cshtml file

This page processes the user’s order. (The process in this case just means sending an email confirmation.) It also displays error messages if there are problems with the order.

web.config file

This file contains configuration settings for the site.

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 Bakery template, you typically perform the tasks that are described in this section.

Enabling email

When customers fill out an order, the site sends them a confirmation email message. However, first you must configure email.

1. Open the Order.cshtml page.

2. Find the comment that says //SMTP Configuration for Hotmail.

3. Change the values in the following lines to match your own email provider:

WebMail.SmtpServer = "smtp.live.com";
WebMail.SmtpPort  = 25;
WebMail.EnableSsl = true;
 
WebMail.UserName = "";
WebMail.Password = "";
WebMail.From = "";

Change the value of WebMail.SmtpServer to the name of the email server you normally use to send email. Then fill in values for the user name and password. Set the From property to your email address.

4. Run the site and try sending an order to yourself.

5. Check your email and make sure you got the order confirmation. If you have difficulties sending email, see Issues with Sending Email in the ASP.NET Web Pages (Razor) Troubleshooting Guide.

Adding a Twitter feed to the site

You might want to let customers follow Twitter posts about your company.

  1. Open the About.cshtml page.
  2. In the markup, remove the comment markers (@* and *@) from around the Twitter.Search helper.
  3. Change the value #putyourhashtaghere to a hash tag for your company or site. (For testing purposes, you can use a well-known hashtag like #aspnet or #microsoft.)
  4. Run the About page. After a few moments, you start to see the latest tweets that are tagged with the hashtag you’ve entered.

Adding or editing products in the database

There are no pages to let you add or edit individual bakery products, but you can easily make changes in WebMatrix.

  1. In WebMatrix, switch to the Databases workspace.
  2. Expand the Bakery.sdf database, expand the Tables node, and then double-click the Products table.
  3. Use the database editor to make changes to individual products.

clip_image004

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

  • Database access. One of the purposes of this template is to show you the basics of working with a database. The Default.cshtml page reads database information and displays it on the page. The database (bakery.sdf) is in the App_Data folder. For more information about how to work with a database, see Introduction to Working with a Database in ASP.NET Web Pages (Razor) Sites.
  • Layouts and mobile devices. The template illustrates how to create a different layout for desktop browsers and for mobile browsers. The default layout is created using the _SiteLayout.cshtml and Site.css files. However, if a page in the site is requested from a mobile device, the site automatically uses _SiteLayout.Mobile.cshtml and Site.mobile.css. For more information, see Rendering ASP.NET Web Pages (Razor) Sites for Mobile Devices.
  • Getting form and query-string values. The Order.cshtml page shows how to process information that users enter into an HTML form. The OrderSuccess.cshtml page shows how to read a value that’s passed in the query string. For more information, see Working with HTML Forms in ASP.NET Web Pages (Razor) Sites.
  • User-input validation. The Order.cshtml page validates user input by using the Validation helper and by using explicit code (for example, using WebMail.UserName.IsEmpty).
  • Using jQuery. The Order.cshtml page shows various ways to use jQuery. It’s used for unobtrusive client-side input validation, and it’s used to calculate the total order value without a round trip to the server.

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!