Click here to Skip to main content
12,446,146 members (25,431 online)
Click here to Skip to main content
Add your own
alternative version

Stats

7.8K views
116 downloads
4 bookmarked
Posted

An enhanced WebMatrix Bakery template

, 27 Nov 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to add a random sliding effect to the Bakery home page

Introduction

The idea for this simple improvement to the WebMatrix Bakery template came to my mind from a post in the WebMatrix and ASP.NET Web Pages forum.

The question was how to implement a random sliding effect on the main image of the Bakery home page.

I'll try to propose a solution based on jQuery and JSON.

Using the code

The Bakery template lends itself to this improvement because it already foresees that the product for the main image is randomly chosen every time the home page is loaded.

Nevertheless, the home page header is composed not only by the main image, but also by name, price and description of the represented product.

Therefore, if you want to change the main product periodically , you must update the other data that pertain to it.

The proposed solution arises from a simple javascript Random Image Slideshow and expands it with the management of the other product data, that are passed with JSON from the Products database.

Here is the new Default.cshtml page, which you can simply substitute to the original one after creating a new site in WebMatrix 2 from the Bakery template:

@{
    Page.Title = "Home";
    var db = Database.Open("bakery");
    var products = db.Query("SELECT * FROM PRODUCTS").ToList();
    // Serialize the products list
    var json = Json.Encode(products);
}
<h1>Welcome to Fourth Coffee!</h1>

The page is also available for the download.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gianmaria Gregori
Chief Technology Officer Federfarma Pavia
Italy Italy
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160811.3 | Last Updated 27 Nov 2012
Article Copyright 2012 by Gianmaria Gregori
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid