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

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

先上效果圖：

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

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

最下方為分頁。

能實現的功能包括：

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

實現的思路大致是：

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

產品模型 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; }    }

關于搜索排序分頁的基類 Models/QueryBase.cs

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

產品的搜索排序分頁派生于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; }    }

提供了一個有關排序的枚舉 Models/AscDescEnum.cs

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

模擬一個數據庫訪問層，提供2個方法，一個方法獲取所有的Product集合，另一個方法根據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 = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 2, Name = "最新鮮潮貨",Category = "服飾",Brand = "初語",Age = 2, ImageUrl = "~/images/2.jpg",Price = 95m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 3, Name = "新鮮態度",Category = "服飾",Brand = "文藝",Age = 3, ImageUrl = "~/images/3.jpg",Price = 105m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 4, Name = "兒童保暖內衣",Category = "服飾",Brand = "南極人",Age = 4, ImageUrl = "~/images/4.jpg",Price = 115m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 5, Name = "韓版蝴蝶結",Category = "服飾",Brand = "南極人",Age = 5, ImageUrl = "~/images/5.jpg",Price = 125m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 6, Name = "時尚童裝加絨",Category = "服飾",Brand = "南極人",Age = 6, ImageUrl = "~/images/6.jpg",Price = 135m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 7, Name = "棉質兒童短襪",Category = "服飾",Brand = "南極人",Age = 7, ImageUrl = "~/images/7.jpg",Price = 145m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 8, Name = "燈芯絨打底單褲",Category = "服飾",Brand = "南極人",Age = 8, ImageUrl = "~/images/8.jpg",Price = 155m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 9, Name = "公主范褲子",Category = "服飾",Brand = "南極人",Age = 9, ImageUrl = "~/images/9.jpg",Price = 165m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 10, Name = "兒童百搭潮流",Category = "服飾",Brand = "南極人",Age = 10, ImageUrl = "~/images/10.jpg",Price = 175m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 11, Name = "童裝牛仔褲",Category = "服飾",Brand = "南極人",Age = 11, ImageUrl = "~/images/11.jpg",Price = 185m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 12, Name = "吸汗條紋襪",Category = "服飾",Brand = "南極人",Age = 12, ImageUrl = "~/images/12.jpg",Price = 195m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 13, Name = "秋衣秋褲",Category = "服飾",Brand = "南極人",Age = 13, ImageUrl = "~/images/13.jpg",Price = 205m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 14, Name = "全棉棉毛套",Category = "服飾",Brand = "南極人",Age = 14, ImageUrl = "~/images/14.jpg",Price = 215m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 15, Name = "卡內衣套裝",Category = "服飾",Brand = "南極人",Age = 15, ImageUrl = "~/images/15.jpg",Price = 215m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 16, Name = "保暖內衣套裝",Category = "服飾",Brand = "南極人",Age = 16, ImageUrl = "~/images/16.jpg",Price = 225m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 17, Name = "精紗全棉內衣",Category = "服飾",Brand = "南極人",Age = 17, ImageUrl = "~/images/17.jpg",Price = 235m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 18, Name = "真我香水EDP",Category = "香水",Brand = "迪奧",Age = 18, ImageUrl = "~/images/18.jpg",Price = 245m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 19, Name = "晶鉆粉鉆香戀",Category = "香水",Brand = "范思哲",Age = 19, ImageUrl = "~/images/19.jpg",Price = 255m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"},new Product(){Id = 20, Name = "綠邂逅清新",Category = "香水",Brand = "香奈兒",Age = 20, ImageUrl = "~/images/20.jpg",Price = 235m,Description = "產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述產品描述"}    };}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方法返回有關類別的json對象
• 提供一個action方法返回有關品牌的json對象
• 提供一個action方法返回有關年限的json對象
• 提供一個action方法返回有關產品第一頁的json對象
• 提供一個action方法，根據搜索、排序、分頁條件返回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);}//加載產品第一頁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);}//根據搜索排序分頁條件加載[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中，相關的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中：

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

@{    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>    <!--搜索條件結束-->       <!--產品開始-->      <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>        <!--產品結束-->        <!--分頁開始-->    <div id="page-selection"></div>    <!--分頁結束--></div>@section scripts{    <script src="~/Scripts/jquery.tmpl.min.js"></script>    <script src="~/Scripts/jquery.bootpag.min.js"></script>    <script type="text/javascript">$(function () {    //加載首頁產品    $.getJSON("@Url.Action("GetFirstPage","Home")", function(data) {if (data) {    $("#productTemplate").tmpl(data).appendTo("#products");    //關于分頁    $("#page-selection").bootpag({total: data.total, //初始顯示的頁數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 最多可見的頁數$(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 () {//先清空其它已經存在與搜索區域的品牌$("ul.tagul li").find(".pinpaitag").parent().hide();//清空搜索區域中有關品牌的隱藏域$("#sccondition").find("input[name="brand"]").val("");//當前a以外的為不選中狀態$("#pp").find(".innera").removeClass("selected");//當前a為選中狀態$(this).addClass("selected");//填充模版并追加到搜索區域$("#pinpaitagTemplate").tmpl({ pinpai: $(this).text() }).appendTo("ul.tagul");//為搜索區域中有關品牌的隱藏域賦值$("#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 () {//先清空其它已經存在與搜索區域的類別$("ul.tagul li").find(".fenleitag").parent().hide();//清空搜索區域中有關類別的隱藏域$("#sccondition").find("input[name="category"]").val("");//當前a以外的為不選中狀態$("#fl").find(".innera").removeClass("selected");//當前a為選中狀態$(this).addClass("selected");//填充模版并追加到搜索區域$("#fenleitagTemplate").tmpl({ fenlei: $(this).text() }).appendTo("ul.tagul");//為搜索區域中有關類別的隱藏域賦值$("#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 () {//先清空其它已經存在與搜索區域的年限$("ul.tagul li").find(".agetag").parent().hide();//清空搜索區域中有關年限的隱藏域$("#sccondition").find("input[name="age"]").val("");//當前a以外的為不選中狀態$("#nx").find(".innera").removeClass("selected");//當前a為選中狀態$(this).addClass("selected");//填充模版并追加到搜索區域$("#agetagTemplate").tmpl({ age: $(this).text() }).appendTo("ul.tagul");//為搜索區域中有關年限的隱藏域賦值$("#sccondition").find("input[name="age"]").val($(this).text());getProductsBySortOrSearch();    });    //點擊某一價格    $("#jg").on("click", ".innera", function () {//先清空其它已經存在與搜索區域的年限$("ul.tagul li").find(".pricetag").parent().hide();//清空搜索區域中有關價格的隱藏域$("#sccondition").find("input[name="lowprice"]").val("");$("#sccondition").find("input[name="highprice"]").val("");//當前a以外的為不選中狀態$("#jg").find(".innera").removeClass("selected");//當前a為選中狀態$(this).addClass("selected");//填充模版并追加到搜索區域$("#pricetagTemplate").tmpl({ price: $(this).text() }).appendTo("ul.tagul");//為搜索區域中有關價格的隱藏域賦值$("#sccondition").find("input[name="lowprice"]").val($(this).attr("lowprice"));$("#sccondition").find("input[name="highprice"]").val($(this).attr("highprice"));getProductsBySortOrSearch();    });        //關于產品列表    $("#list").click(function(event) {event.preventDefault();$("#products .item").addClass("list-group-item");    });    //關于產品方格展示    $("#grid").click(function(event) {event.preventDefault();$("#products .item").removeClass("list-group-item");$("#products .item").addClass("grid-group-item");    });    //點擊搜索標簽刪除    $("ul.tagul").on("click", "li span", function () {//獲取當前span的class值var temp = $(this).attr("class");if (temp == "tagcontent pinpaitag") {    //把品牌中的所有a都設為不選中狀態    $("#pp").find(".innera").removeClass("selected");    //清空搜索區域中有關品牌的隱藏域    $("#sccondition").find("input[name="brand"]").val("");} else if (temp == "tagcontent fenleitag") {    //把分類中的所有a都設為不選中狀態    $("#fl").find(".innera").removeClass("selected");    //清空搜索區域中有關分類的隱藏域    $("#sccondition").find("input[name="category"]").val("");} else if (temp == "tagcontent agetag") {    //把年限中的所有a都設為不選中狀態    $("#nx").find(".innera").removeClass("selected");    //清空搜索區域中有關年限的隱藏域    $("#sccondition").find("input[name="age"]").val("");} else if (temp == "tagcontent pricetag") {        //把價格中的所有a都設為不選中狀態    $("#jg").find(".innera").removeClass("selected");    //清空搜索區域中有關價格的隱藏域    $("#sccondition").find("input[name="lowprice"]").val("");    $("#sccondition").find("input[name="highprice"]").val("");}$(this).parent().hide();getProductsBySortOrSearch();    });     //鼠標移上搜索標簽    $("ul.tagul").on("mouseover", "li span", function() {$(this).css("cursor", "pointer");$(this).css("background-color", "orangered");    });    //鼠標移去搜索標簽    $("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();    });});//點擊搜索條件或者升序降序，當前頁為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");    //關于分頁    $("#page-selection").bootpag({total: data.total, //初始顯示的頁數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 最多可見的頁數$(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>        <!--品牌標簽模版-->    <script id="pinpaitagTemplate" type="text/x-jQuery-tmpl"><li>    <span>品牌：${pinpai} ×</span></li>        </script>        <!--分類標簽模版-->    <script id="fenleitagTemplate" type="text/x-jQuery-tmpl"><li>    <span>分類：${fenlei} ×</span></li>        </script>        <!--價格標簽模版-->    <script id="pricetagTemplate" type="text/x-jQuery-tmpl"><li>    <span>價格：${price} ×</span></li>        </script>        <!--年限標簽模版-->    <script id="agetagTemplate" type="text/x-jQuery-tmpl"><li>    <span>年限：${age} ×</span></li>        </script>        <!--產品列表模版--><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>    }

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