An enhanced WebMatrix Bakery template

• Download Default.cshtml page - 1.3 KB

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 main product section -->
<div id="featuredProduct">
    <img id="myImage" alt="Featured Product" src="#"/>
    <div id="featuredProductInfo">
        <div id="productInfo">
            <h2 id="pname"></h2>
            <p class="price" id="pprice"></p>
            <p class="description" id="pdescr"></p>
        </div>
        <div id="callToAction">
            <a id="plink" class="order-button" href="" title="">Order Now</a>
        </div>
    </div>
</div>
<div id="productsWrapper">
    <ul id="products" data-role="listview" data-inset="true">
        @foreach (var p in products) {
            <li class="product">
                <a href="~/order/@p.Id" title="Order @p.Name">
                    <img class="hide-from-desktop" src="~/Images/Products/Thumbnails/@p.ImageName" alt="Image of @p.Name" />
                
                    <div class="productInfo">
                        <h3>@p.Name</h3>
                        <img class="product-image hide-from-mobile" src="~/Images/Products/Thumbnails/@p.ImageName" alt="Image of @p.Name" />
                        <p class="description">@p.Description</p>
                        <p class="price hide-from-desktop">$@string.Format("{0:f}", p.Price)</p>                    
                    </div>
                </a>

                <!-- Desktop only -->
                <div class="action  hide-from-mobile">
                    <p class="price">$@string.Format("{0:f}", p.Price)</p>
                    <a class="order-button" href="~/order/@p.Id" title="Order @p.Name">Order Now</a>
                </div>
                 
            </li>

        }
    </ul>
</div>

@section Scripts {
    <script type="text/javascript">

        var delay = 5000; //set delay in milliseconds
        var curindex = 0;

        // Use Html.Raw to pass the JSON-encoded data
        var prods = @Html.Raw(json);

        // Preload graphic files
        var preload = new Array();
        for (n = 0; n < prods.length; n++) {
            preload[n] = new Image();
            preload[n].src = "Images/Products/" + prods[n].ImageName;
        }

        // Randomly select a new product
        function rotateimage() {
            if (curindex == (tempindex = Math.floor(Math.random() * (prods.length)))) {
                curindex = curindex == 0 ? 1 : curindex - 1;
            }
            else {
                curindex = tempindex;
            }
            changeProduct(curindex);
        }

        // Display product's data
        function changeProduct(pIndex) {
            $("#myImage").attr("src", "Images/Products/" + prods[pIndex].ImageName);
            $('#pname').text(prods[pIndex].Name);
            $('#pprice').text("$" + prods[pIndex].Price);
            $('#pdescr').text(prods[pIndex].Description);
            $("#plink").attr("href", "/order/" + prods[pIndex].Id);
            $("#plink").attr("title", "Order " + prods[pIndex].Name);
        }

        // Load first product and set the sliding effect
        $(document).ready(function () {
            var imgIndex = Math.floor(Math.random() * (prods.length));
            changeProduct(imgIndex);
            setInterval("rotateimage()", delay);
        });
    </script>
}

The page is also available for the download.