增强的 WebMatrix Bakery 模板

• 下载 Default.cshtml 页面 - 1.3 KB

引言

这个对 WebMatrix Bakery 模板的简单改进的想法来自于 WebMatrix 和 ASP.NET Web Pages 论坛中的一个帖子。

问题是如何在 Bakery 首页的主图像上实现随机滑动效果。

我将尝试提出一个基于 jQuery 和 JSON 的解决方案.

使用代码

Bakery 模板非常适合这个改进，因为它已经预见到每次加载首页时都会随机选择主图像的产品。

然而，首页标题不仅由主图像组成，还包括所代表产品的名称、价格和描述。

因此，如果您想定期更改主产品 ，您必须更新与其相关的其他数据。

该解决方案源自一个简单的 javascript 随机图像幻灯片，并扩展了对其他产品数据的管理，这些数据通过 JSON 从 Products 数据库传递。

这是新的 Default.cshtml 页面，您可以在 WebMatrix 2 中从 Bakery 模板创建一个新站点后，简单地替换原始页面:

@{
    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>
}

该页面也可供下载.