在產(chǎn)品展示中，通常涉及產(chǎn)品的展示方式、查詢、排序、分頁，本篇就在ASP.NET MVC下，使用Boostrap來實現(xiàn)。

源碼放在了GitHub: https://github.com/darrenji/ProductsSearchSortPage

先上效果圖：

最上面是搜索和排序，每次點擊搜索條件、排序，或者刪除搜索條件都會觸發(fā)異步加載。

中間部分為產(chǎn)品展示，提供了列表和格子這2種顯示方式。

最下方為分頁。

能實現(xiàn)的功能包括：

• 點擊某一個搜索條件，該搜索條件被選中，選中項以標(biāo)簽的形式顯示到"搜索條件"欄中，觸發(fā)異步加載
• 點擊排序條件，該排序條件被選中，觸發(fā)異步加載
• 刪除"搜索條件"欄中的搜索條件，觸發(fā)異步加載

實現(xiàn)的思路大致是：

• 搜索、排序區(qū)域是Bootstrap的表格
• 產(chǎn)品展示、及切換2中展示方式都借助Boostrap來實現(xiàn)
• 分頁導(dǎo)航部分同樣借助Bootstrap來實現(xiàn)
• 搜索條件的顯示是通過把異步加載到的數(shù)據(jù)填充到tmpl模版，然后追加到頁面對應(yīng)區(qū)域
• 產(chǎn)品展示同樣通過tmpl模版實現(xiàn)
• 分頁導(dǎo)航用到了jquery的一個分頁插件，后面介紹
• 每一個搜索條件、排序條件都有對應(yīng)的隱藏域，當(dāng)觸發(fā)頁面事件，就把值放在隱藏域中后，再傳遞給controller

產(chǎn)品模型 Models/Product.cs

    public class Product    {public int Id { get; set; }public string Name { get; set; }public string Description { get; set; }public string Category { get; set; }public string Brand { get; set; }public decimal Price { get; set; }public string ImageUrl { get; set; }public int Age { get; set; }    }

關(guān)于搜索排序分頁的基類 Models/QueryBase.cs

    public class QueryBase    {public int PageIndex { get; set; }public int PageSize { get; set; }public short PaiXu { get; set; }    }

產(chǎn)品的搜索排序分頁派生于QueryBase這個基類 Models/ProductQuery.cs

    public class ProductQuery : QueryBase    {public string CategoryName { get; set; }public string BrandName { get; set; }public string Age { get; set; }public string LowPrice { get; set; }public string HighPrice { get; set; }    }

提供了一個有關(guān)排序的枚舉 Models/AscDescEnum.cs

    public enum AscDescEnum    {asc = 0,desc = 1    }

模擬一個數(shù)據(jù)庫訪問層，提供2個方法，一個方法獲取所有的Product集合，另一個方法根據(jù)ProductQuery獲取Product的集合。

   public class Database    {public static IEnumerable<Product> GetProducts(){    return new List<Product>()    {new Product(){Id = 1, Name = "羽絨服新時尚",Category = "服飾",Brand = "南極人",Age = 1, ImageUrl = "~/images/1.jpg",Price = 85m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 2, Name = "最新鮮潮貨",Category = "服飾",Brand = "初語",Age = 2, ImageUrl = "~/images/2.jpg",Price = 95m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 3, Name = "新鮮態(tài)度",Category = "服飾",Brand = "文藝",Age = 3, ImageUrl = "~/images/3.jpg",Price = 105m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 4, Name = "兒童保暖內(nèi)衣",Category = "服飾",Brand = "南極人",Age = 4, ImageUrl = "~/images/4.jpg",Price = 115m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 5, Name = "韓版蝴蝶結(jié)",Category = "服飾",Brand = "南極人",Age = 5, ImageUrl = "~/images/5.jpg",Price = 125m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 6, Name = "時尚童裝加絨",Category = "服飾",Brand = "南極人",Age = 6, ImageUrl = "~/images/6.jpg",Price = 135m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 7, Name = "棉質(zhì)兒童短襪",Category = "服飾",Brand = "南極人",Age = 7, ImageUrl = "~/images/7.jpg",Price = 145m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 8, Name = "燈芯絨打底單褲",Category = "服飾",Brand = "南極人",Age = 8, ImageUrl = "~/images/8.jpg",Price = 155m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 9, Name = "公主范褲子",Category = "服飾",Brand = "南極人",Age = 9, ImageUrl = "~/images/9.jpg",Price = 165m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 10, Name = "兒童百搭潮流",Category = "服飾",Brand = "南極人",Age = 10, ImageUrl = "~/images/10.jpg",Price = 175m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 11, Name = "童裝牛仔褲",Category = "服飾",Brand = "南極人",Age = 11, ImageUrl = "~/images/11.jpg",Price = 185m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 12, Name = "吸汗條紋襪",Category = "服飾",Brand = "南極人",Age = 12, ImageUrl = "~/images/12.jpg",Price = 195m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 13, Name = "秋衣秋褲",Category = "服飾",Brand = "南極人",Age = 13, ImageUrl = "~/images/13.jpg",Price = 205m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 14, Name = "全棉棉毛套",Category = "服飾",Brand = "南極人",Age = 14, ImageUrl = "~/images/14.jpg",Price = 215m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 15, Name = "卡內(nèi)衣套裝",Category = "服飾",Brand = "南極人",Age = 15, ImageUrl = "~/images/15.jpg",Price = 215m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 16, Name = "保暖內(nèi)衣套裝",Category = "服飾",Brand = "南極人",Age = 16, ImageUrl = "~/images/16.jpg",Price = 225m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 17, Name = "精紗全棉內(nèi)衣",Category = "服飾",Brand = "南極人",Age = 17, ImageUrl = "~/images/17.jpg",Price = 235m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 18, Name = "真我香水EDP",Category = "香水",Brand = "迪奧",Age = 18, ImageUrl = "~/images/18.jpg",Price = 245m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 19, Name = "晶鉆粉鉆香戀",Category = "香水",Brand = "范思哲",Age = 19, ImageUrl = "~/images/19.jpg",Price = 255m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"},new Product(){Id = 20, Name = "綠邂逅清新",Category = "香水",Brand = "香奈兒",Age = 20, ImageUrl = "~/images/20.jpg",Price = 235m,Description = "產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述產(chǎn)品描述"}    };}public static IEnumerable<Product> GetPageProducts(ProductQuery query, out int total){    var allProducts = GetProducts();    if (!string.IsNullOrEmpty(query.BrandName))    {allProducts = allProducts.Where(p => p.Brand == query.BrandName);    }    if (!string.IsNullOrEmpty(query.CategoryName))    {allProducts = allProducts.Where(p => p.Category == query.CategoryName);    }    if (!string.IsNullOrEmpty(query.Age))    {int intAge = int.Parse(query.Age);allProducts = allProducts.Where(p => p.Age == intAge);    }    if (!string.IsNullOrEmpty(query.LowPrice) && !string.IsNullOrEmpty(query.HighPrice))    {decimal lowerPrice = decimal.Parse(query.LowPrice);decimal higherPrice = decimal.Parse(query.HighPrice);allProducts = allProducts.Where(p => p.Price >= lowerPrice && p.Price <= higherPrice);     }    if (!string.IsNullOrEmpty(query.LowPrice) && string.IsNullOrEmpty(query.HighPrice))    {decimal lowerPrice = decimal.Parse(query.LowPrice);allProducts = allProducts.Where(p => p.Price <= lowerPrice);    }    if (string.IsNullOrEmpty(query.LowPrice) && !string.IsNullOrEmpty(query.HighPrice))    {decimal higherPrice = decimal.Parse(query.HighPrice);allProducts = allProducts.Where(p => p.Price >= higherPrice);    }    total = allProducts.Count();    if (query.PaiXu == (short) AscDescEnum.asc)    {allProducts = allProducts    .OrderBy(p => p.Price)    .Skip(query.PageSize*(query.PageIndex - 1))    .Take(query.PageSize);    }    else    {allProducts = allProducts    .OrderByDescending(p => p.Price)    .Skip(query.PageSize * (query.PageIndex - 1))    .Take(query.PageSize);    }    return allProducts;}    }

在HomeController中：

• 提供一個action方法返回有關(guān)類別的json對象
• 提供一個action方法返回有關(guān)品牌的json對象
• 提供一個action方法返回有關(guān)年限的json對象
• 提供一個action方法返回有關(guān)產(chǎn)品第一頁的json對象
• 提供一個action方法，根據(jù)搜索、排序、分頁條件返回json對象

    public class HomeController : Controller    {public ActionResult Index(){    return View();}//品牌public ActionResult GetBrandsJson(){    var allProducts = Database.GetProducts();    var result = from p in allProductsgroup p by p.Brandinto gselect new {brand = g.Key};    return Json(result, JsonRequestBehavior.AllowGet);}//類別public ActionResult GetCategoriesJson(){    var allProducts = Database.GetProducts();    var result = from p in allProductsgroup p by p.Categoryinto gselect new {category = g.Key};    return Json(result, JsonRequestBehavior.AllowGet);}//年限public ActionResult GetAgesJson() {    var allProducts = Database.GetProducts();    var result = from p in allProducts group p by p.Age     into g     select new { age = g.Key };     return Json(result, JsonRequestBehavior.AllowGet);}//加載產(chǎn)品第一頁private string _categoryName = string.Empty;private string _brandName = string.Empty;private string _age = string.Empty;private string _lowerPrice = string.Empty;private string _higherPrice = string.Empty;public ActionResult GetFirstPage(){    var temp = new ProductQuery()    {PageIndex = 1,PageSize = 6,Age = _age,BrandName = _brandName,CategoryName = _categoryName,HighPrice = _higherPrice,LowPrice = _lowerPrice,PaiXu = (short)AscDescEnum.asc    };    int totalNum = 0;    var allProducts = Database.GetPageProducts(temp, out totalNum);    var result = from p in allProductsselect new {p.Name, p.Brand, p.Category, p.Age, p.Description, p.Price};    var tempTotal = Convert.ToInt32(Math.Ceiling((double)(totalNum / 6))) +1;    var jsonResult = new { total = tempTotal, rows = result };    return Json(jsonResult, JsonRequestBehavior.AllowGet);}//根據(jù)搜索排序分頁條件加載[HttpPost]public ActionResult GetProductsBySearchSortPage(ProductQuery productQuery){    int totalNum = 0;    var allProducts = Database.GetPageProducts(productQuery, out totalNum);    var result = from p in allProducts select new { p.Name, p.Brand, p.Category, p.Age, p.Description, p.Price };    var tempTotal = Convert.ToInt32(Math.Ceiling((double)(totalNum / 6))) + 1;    var jsonResult = new { total = tempTotal, rows = result };    return Json(jsonResult);}    }

在Shared/Layout.cshtml中，相關(guān)的css.js必須具備：

<head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>@ViewBag.Title</title>    @Styles.Render("~/Content/css")    <link href="~/bootstrap/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" />    @RenderSection("styles", required: false)    @Scripts.Render("~/bundles/jquery")    <script src="~/bootstrap/js/bootstrap.min.js"></script></head><body>    @RenderBody()        @RenderSection("scripts", required: false)</body  

在Home/Index.cshtml中：

• 用到了有關(guān)分頁的一個jQuery插件http://botmonster.com/jquery-bootpag/
• 頁面首次記載，異步加載產(chǎn)品的前6條記錄作為第一頁
• 頁面首次加載，異步加載所有分類作為搜索條件
• 頁面首次加載，異步加載所有品牌作為搜索條件
• 頁面首次加載，異步加載所有年限作為搜索條件
• 點擊搜索條件中的品牌事件
• 點擊搜索條件中的分類事件
• 點擊搜索條件中的年限事件
• 點擊搜索條件中的價格事件
• 點擊"搜索條件"欄中的搜索標(biāo)簽事件

@{    ViewBag.Title = "Index";    Layout = "~/Views/Shared/_Layout.cshtml";}@section styles{    <link href="~/Content/ProductList.css" rel="external nofollow"  rel="stylesheet" />}<div>    <!--搜索條件開始-->    <div id="searches"><div>    <table id="serachtable"><tbody>    <tr><td>搜索條件</td><td id="sccondition">    <ul>        </ul>    <input type="hidden" value="" name="brand"/>    <input type="hidden" value="" name="category"/>    <input type="hidden" value="" name="lowprice"/>    <input type="hidden" value="" name="highprice"/>    <input type="hidden" value="" name="age"/>    <input type="hidden" value="0" name="pricesort"/></td>    </tr>        <tr><td>品牌</td><td id="pp"></td>    </tr>    <tr><td>分類</td><td id="fl">    </td>    </tr>    <tr><td>價格</td><td id="jg">    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="80" highprice="">80元以下</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="80" highprice="90">80-90元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="90" highprice="100">90-100元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="100" highprice="110">100-110元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="110" highprice="120">110-120元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="120" highprice="130">120-130元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="130" highprice="140">130-140元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="140" highprice="150">140-150元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="150" highprice="160">150-160元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="160" highprice="170">160-170元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="170" highprice="180">170-180元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="180" highprice="190">180-190元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="190" highprice="200">190-200元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="200" highprice="210">200-210元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="210" highprice="220">210-220元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="220" highprice="230">220-230元</a>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  lowprice="" highprice="230">230元以上</a></td>    </tr>    <tr><td>年限</td><td id="nx">    </td>    </tr>    <tr><td>排序</td><td id="px">     <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="pricesort">價格<span>∧</span><span>∨</span></a>    </td>    </tr>    <tr><td></td><td></td>    </tr></tbody>    </table></div>    </div>    <!--搜索條件結(jié)束-->       <!--產(chǎn)品開始-->      <div>    <div><strong>顯示方式</strong><div>    <a href="#" rel="external nofollow"  rel="external nofollow"  id="list"><span>    </span>列表</a> <a href="#" rel="external nofollow"  rel="external nofollow"  id="grid"><span       ></span>格子</a></div>    </div>    <div id="products">    </div></div>        <!--產(chǎn)品結(jié)束-->        <!--分頁開始-->    <div id="page-selection"></div>    <!--分頁結(jié)束--></div>@section scripts{    <script src="~/Scripts/jquery.tmpl.min.js"></script>    <script src="~/Scripts/jquery.bootpag.min.js"></script>    <script type="text/javascript">$(function () {    //加載首頁產(chǎn)品    $.getJSON("@Url.Action("GetFirstPage","Home")", function(data) {if (data) {    $("#productTemplate").tmpl(data).appendTo("#products");    //關(guān)于分頁    $("#page-selection").bootpag({total: data.total, //初始顯示的頁數(shù)maxVisible: 10    }).on("page", function (event, num) { //點擊分頁按鈕var productQueryObject = {    categoryName: $("#sccondition").find("input[name="category"]").val(),    brandName: $("#sccondition").find("input[name="brand"]").val(),    age: $("#sccondition").find("input[name="age"]").val(),    lowPrice: $("#sccondition").find("input[name="lowprice"]").val(),    highPrice: $("#sccondition").find("input[name="highprice"]").val(),    pageIndex: num,    pageSize: 6,    paiXu: $("#sccondition").find("input[name="pricesort"]").val()};$.ajax({    type: "POST",    url: "@Url.Action("GetProductsBySearchSortPage","Home")",    dataType: "json",    contentType: "application/json; charset=utf-8",    data: JSON.stringify(productQueryObject),    success: function (result) {$("#products").empty();$("#productTemplate").tmpl(result).appendTo("#products");//maxVisible 最多可見的頁數(shù)$(this).bootpag({ total: result.total});    },    error: function (error) {alert("有錯誤: " + error.responseText);    }});    });}    });        //加載所有品牌    $.getJSON("@Url.Action("GetBrandsJson", "Home")", function (data) {$("#pinpaiTemplate").tmpl(data).appendTo("#pp");    });    //點擊某一品牌    $("#pp").on("click", ".innera", function () {//先清空其它已經(jīng)存在與搜索區(qū)域的品牌$("ul.tagul li").find(".pinpaitag").parent().hide();//清空搜索區(qū)域中有關(guān)品牌的隱藏域$("#sccondition").find("input[name="brand"]").val("");//當(dāng)前a以外的為不選中狀態(tài)$("#pp").find(".innera").removeClass("selected");//當(dāng)前a為選中狀態(tài)$(this).addClass("selected");//填充模版并追加到搜索區(qū)域$("#pinpaitagTemplate").tmpl({ pinpai: $(this).text() }).appendTo("ul.tagul");//為搜索區(qū)域中有關(guān)品牌的隱藏域賦值$("#sccondition").find("input[name="brand"]").val($(this).text());getProductsBySortOrSearch();    });       //加載所有類別    $.getJSON("@Url.Action("GetCategoriesJson", "Home")", function(data) {$("#leibieTemplate").tmpl(data).appendTo("#fl");    });    //點擊某一類別    $("#fl").on("click", ".innera", function () {//先清空其它已經(jīng)存在與搜索區(qū)域的類別$("ul.tagul li").find(".fenleitag").parent().hide();//清空搜索區(qū)域中有關(guān)類別的隱藏域$("#sccondition").find("input[name="category"]").val("");//當(dāng)前a以外的為不選中狀態(tài)$("#fl").find(".innera").removeClass("selected");//當(dāng)前a為選中狀態(tài)$(this).addClass("selected");//填充模版并追加到搜索區(qū)域$("#fenleitagTemplate").tmpl({ fenlei: $(this).text() }).appendTo("ul.tagul");//為搜索區(qū)域中有關(guān)類別的隱藏域賦值$("#sccondition").find("input[name="category"]").val($(this).text());getProductsBySortOrSearch();    });    //加載所有Age    $.getJSON("@Url.Action("GetAgesJson", "Home")", function(data) {$("#ageTemplate").tmpl(data).appendTo("#nx");    });    //點擊某一年限    $("#nx").on("click", ".innera", function () {//先清空其它已經(jīng)存在與搜索區(qū)域的年限$("ul.tagul li").find(".agetag").parent().hide();//清空搜索區(qū)域中有關(guān)年限的隱藏域$("#sccondition").find("input[name="age"]").val("");//當(dāng)前a以外的為不選中狀態(tài)$("#nx").find(".innera").removeClass("selected");//當(dāng)前a為選中狀態(tài)$(this).addClass("selected");//填充模版并追加到搜索區(qū)域$("#agetagTemplate").tmpl({ age: $(this).text() }).appendTo("ul.tagul");//為搜索區(qū)域中有關(guān)年限的隱藏域賦值$("#sccondition").find("input[name="age"]").val($(this).text());getProductsBySortOrSearch();    });    //點擊某一價格    $("#jg").on("click", ".innera", function () {//先清空其它已經(jīng)存在與搜索區(qū)域的年限$("ul.tagul li").find(".pricetag").parent().hide();//清空搜索區(qū)域中有關(guān)價格的隱藏域$("#sccondition").find("input[name="lowprice"]").val("");$("#sccondition").find("input[name="highprice"]").val("");//當(dāng)前a以外的為不選中狀態(tài)$("#jg").find(".innera").removeClass("selected");//當(dāng)前a為選中狀態(tài)$(this).addClass("selected");//填充模版并追加到搜索區(qū)域$("#pricetagTemplate").tmpl({ price: $(this).text() }).appendTo("ul.tagul");//為搜索區(qū)域中有關(guān)價格的隱藏域賦值$("#sccondition").find("input[name="lowprice"]").val($(this).attr("lowprice"));$("#sccondition").find("input[name="highprice"]").val($(this).attr("highprice"));getProductsBySortOrSearch();    });        //關(guān)于產(chǎn)品列表    $("#list").click(function(event) {event.preventDefault();$("#products .item").addClass("list-group-item");    });    //關(guān)于產(chǎn)品方格展示    $("#grid").click(function(event) {event.preventDefault();$("#products .item").removeClass("list-group-item");$("#products .item").addClass("grid-group-item");    });    //點擊搜索標(biāo)簽刪除    $("ul.tagul").on("click", "li span", function () {//獲取當(dāng)前span的class值var temp = $(this).attr("class");if (temp == "tagcontent pinpaitag") {    //把品牌中的所有a都設(shè)為不選中狀態(tài)    $("#pp").find(".innera").removeClass("selected");    //清空搜索區(qū)域中有關(guān)品牌的隱藏域    $("#sccondition").find("input[name="brand"]").val("");} else if (temp == "tagcontent fenleitag") {    //把分類中的所有a都設(shè)為不選中狀態(tài)    $("#fl").find(".innera").removeClass("selected");    //清空搜索區(qū)域中有關(guān)分類的隱藏域    $("#sccondition").find("input[name="category"]").val("");} else if (temp == "tagcontent agetag") {    //把年限中的所有a都設(shè)為不選中狀態(tài)    $("#nx").find(".innera").removeClass("selected");    //清空搜索區(qū)域中有關(guān)年限的隱藏域    $("#sccondition").find("input[name="age"]").val("");} else if (temp == "tagcontent pricetag") {        //把價格中的所有a都設(shè)為不選中狀態(tài)    $("#jg").find(".innera").removeClass("selected");    //清空搜索區(qū)域中有關(guān)價格的隱藏域    $("#sccondition").find("input[name="lowprice"]").val("");    $("#sccondition").find("input[name="highprice"]").val("");}$(this).parent().hide();getProductsBySortOrSearch();    });     //鼠標(biāo)移上搜索標(biāo)簽    $("ul.tagul").on("mouseover", "li span", function() {$(this).css("cursor", "pointer");$(this).css("background-color", "orangered");    });    //鼠標(biāo)移去搜索標(biāo)簽    $("ul.tagul").on("mouseout", "li span", function() {$(this).css("cursor", "default");$(this).css("background-color", "#5BC0DE");    });    //點擊排序中的價格排序    $("#pricesort").on("click", function() {$(this).find("span").toggle();var temp = $("#sccondition").find("input[name="pricesort"]");temp.val(temp.val() == "0" ? "1" : "0");getProductsBySortOrSearch();    });});//點擊搜索條件或者升序降序，當(dāng)前頁為1function getProductsBySortOrSearch() {    var productQueryObject = {categoryName: $("#sccondition").find("input[name="category"]").val(),brandName: $("#sccondition").find("input[name="brand"]").val(),age: $("#sccondition").find("input[name="age"]").val(),lowPrice: $("#sccondition").find("input[name="lowprice"]").val(),highPrice: $("#sccondition").find("input[name="highprice"]").val(),pageIndex: 1,pageSize: 6,paiXu: $("#sccondition").find("input[name="pricesort"]").val()    };    $.ajax({type: "POST",url: "@Url.Action("GetProductsBySearchSortPage","Home")",dataType: "json",contentType: "application/json; charset=utf-8",data: JSON.stringify(productQueryObject),success: function (data) {    $("#products").empty();    $("#productTemplate").tmpl(data).appendTo("#products");    //關(guān)于分頁    $("#page-selection").bootpag({total: data.total, //初始顯示的頁數(shù)maxVisible: 10    }).on("page", function (event, num) { //點擊分頁按鈕var productQueryObject = {    categoryName: $("#sccondition").find("input[name="category"]").val(),    brandName: $("#sccondition").find("input[name="brand"]").val(),    age: $("#sccondition").find("input[name="age"]").val(),    lowPrice: $("#sccondition").find("input[name="lowprice"]").val(),    highPrice: $("#sccondition").find("input[name="highprice"]").val(),    pageIndex: num,    pageSize: 6,    paiXu: $("#sccondition").find("input[name="pricesort"]").val()};$.ajax({    type: "POST",    url: "@Url.Action("GetProductsBySearchSortPage","Home")",    dataType: "json",    contentType: "application/json; charset=utf-8",    data: JSON.stringify(productQueryObject),    success: function (result) {$("#products").empty();$("#productTemplate").tmpl(result).appendTo("#products");//maxVisible 最多可見的頁數(shù)$(this).bootpag({ total: result.total });    },    error: function (error) {alert("有錯誤: " + error.responseText);    }});    });},error: function (error) {    alert("有錯誤: " + error.responseText);}    });}    </script>    <!--品牌搜索模版-->    <script id="pinpaiTemplate" type="text/x-jQuery-tmpl"><a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >${brand}</a>     </script>        <!--類別搜索模版-->    <script id="leibieTemplate" type="text/x-jQuery-tmpl"><a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >${category}</a>     </script>        <!--年限搜索模版-->    <script id="ageTemplate" type="text/x-jQuery-tmpl"><a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >${age}</a>     </script>        <!--品牌標(biāo)簽?zāi)０?->    <script id="pinpaitagTemplate" type="text/x-jQuery-tmpl"><li>    <span>品牌：${pinpai} ×</span></li>        </script>        <!--分類標(biāo)簽?zāi)０?->    <script id="fenleitagTemplate" type="text/x-jQuery-tmpl"><li>    <span>分類：${fenlei} ×</span></li>        </script>        <!--價格標(biāo)簽?zāi)０?->    <script id="pricetagTemplate" type="text/x-jQuery-tmpl"><li>    <span>價格：${price} ×</span></li>        </script>        <!--年限標(biāo)簽?zāi)０?->    <script id="agetagTemplate" type="text/x-jQuery-tmpl"><li>    <span>年限：${age} ×</span></li>        </script>        <!--產(chǎn)品列表模版--><script id="productTemplate" type="text/x-jQuery-tmpl">{{if rows}}    {{each rows}}<div>    <div><img src="http://placehold.it/400x250/000/fff" /><div>    <h4>${$value.Name}</h4>    <p>品牌：${$value.Brand}</p>    <p>分類：${$value.Category}</p>    <p>年限：${$value.Age}</p>    <p>${$value.Description}</p>    <div><div>    <p>￥ ${$value.Price}</p></div><div>    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >購買</a></div>    </div></div>    </div></div>      {{/each}}{{else}}    <span>沒有記錄</span>{{/if}}    </script>    }

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接