ASP.NET?MVC使用Boostrap實現(xiàn)產(chǎn)品展示、查詢、排序、分頁
更新時間：2022年09月05日 09:01:25 作者：Darren?Ji
這篇文章介紹了ASP.NET?MVC使用Boostrap實現(xiàn)產(chǎn)品展示、查詢、排序、分頁的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
在產(chǎn)品展示中，通常涉及產(chǎn)品的展示方式、查詢、排序、分頁，本篇就在ASP.NET MVC下，使用Boostrap來實現(xiàn)。
源碼放在了GitHub: https://github.com/darrenji/ProductsSearchSortPage
先上效果圖：
最上面是搜索和排序，每次點擊搜索條件、排序，或者刪除搜索條件都會觸發(fā)異步加載。
中間部分為產(chǎn)品展示，提供了列表和格子這2種顯示方式。
最下方為分頁。
能實現(xiàn)的功能包括：
- 點擊某一個搜索條件，該搜索條件被選中，選中項以標簽的形式顯示到"搜索條件"欄中，觸發(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)的隱藏域，當觸發(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 allProducts
group p by p.Brand
into g
select new {brand = g.Key};
return Json(result, JsonRequestBehavior.AllowGet);
}
//類別
public ActionResult GetCategoriesJson()
{
var allProducts = Database.GetProducts();
var result = from p in allProducts
group p by p.Category
into g
select 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 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, 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條記錄作為第一頁
- 頁面首次加載，異步加載所有分類作為搜索條件
- 頁面首次加載，異步加載所有品牌作為搜索條件
- 頁面首次加載，異步加載所有年限作為搜索條件
- 點擊搜索條件中的品牌事件
- 點擊搜索條件中的分類事件
- 點擊搜索條件中的年限事件
- 點擊搜索條件中的價格事件
- 點擊"搜索條件"欄中的搜索標簽事件
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles
{
<link href="~/Content/ProductList.css" rel="external nofollow" rel="stylesheet" />
}
<div class="container">
<!--搜索條件開始-->
<div class="row" id="searches">
<div class="span12">
<table class="table table-condensed table-hover" id="serachtable">
<tbody>
<tr>
<td class="fristcell">搜索條件</td>
<td class="secondcontent" id="sccondition">
<ul class="tagul">
</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 class="fristcell">品牌</td>
<td class="secondcontent" id="pp">
</td>
</tr>
<tr>
<td class="fristcell">分類</td>
<td class="secondcontent" id="fl">
</td>
</tr>
<tr>
<td class="fristcell">價格</td>
<td class="secondcontent" id="jg">
<a class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="innera" 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 class="fristcell">年限</td>
<td class="secondcontent" id="nx">
</td>
</tr>
<tr>
<td class="fristcell">排序</td>
<td class="secondcontent" id="px">
<a class="innera" 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 style="margin: 0px;">∧</span><span style="margin: 0px;display: none">∨</span></a>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--搜索條件結(jié)束-->
<!--產(chǎn)品開始-->
<div class="container">
<div class="well well-sm">
<strong>顯示方式</strong>
<div class="btn-group">
<a href="#" rel="external nofollow" rel="external nofollow" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
</span>列表</a> <a href="#" rel="external nofollow" rel="external nofollow" id="grid" class="btn btn-default btn-sm"><span
class="glyphicon glyphicon-th"></span>格子</a>
</div>
</div>
<div id="products" class="row list-group">
</div>
</div>
<!--產(chǎn)品結(jié)束-->
<!--分頁開始-->
<div class="row" id="page-selection" style="text-align: center;margin-bottom: 50px;"></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('');
//當前a以外的為不選中狀態(tài)
$('#pp').find('.innera').removeClass('selected');
//當前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('');
//當前a以外的為不選中狀態(tài)
$('#fl').find('.innera').removeClass('selected');
//當前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('');
//當前a以外的為不選中狀態(tài)
$('#nx').find('.innera').removeClass('selected');
//當前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('');
//當前a以外的為不選中狀態(tài)
$('#jg').find('.innera').removeClass('selected');
//當前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');
});
//點擊搜索標簽刪除
$('ul.tagul').on("click", "li span", function () {
//獲取當前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();
});
//鼠標移上搜索標簽
$('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();
});
});
//點擊搜索條件或者升序降序，當前頁為1
function 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 class="innera" 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 class="innera" 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 class="innera" 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>
<!--品牌標簽?zāi)０?->
<script id="pinpaitagTemplate" type="text/x-jQuery-tmpl">
<li>
<span class="tagcontent pinpaitag">品牌：${pinpai} ×</span>
</li>
</script>
<!--分類標簽?zāi)０?->
<script id="fenleitagTemplate" type="text/x-jQuery-tmpl">
<li>
<span class="tagcontent fenleitag">分類：${fenlei} ×</span>
</li>
</script>
<!--價格標簽?zāi)０?->
<script id="pricetagTemplate" type="text/x-jQuery-tmpl">
<li>
<span class="tagcontent pricetag">價格：${price} ×</span>
</li>
</script>
<!--年限標簽?zāi)０?->
<script id="agetagTemplate" type="text/x-jQuery-tmpl">
<li>
<span class="tagcontent agetag">年限：${age} ×</span>
</li>
</script>
<!--產(chǎn)品列表模版-->
<script id="productTemplate" type="text/x-jQuery-tmpl">
{{if rows}}
{{each rows}}
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
${$value.Name}</h4>
<p class="group inner list-group-item-text">
品牌：${$value.Brand}</p>
<p class="group inner list-group-item-text">
分類：${$value.Category}</p>
<p class="group inner list-group-item-text">
年限：${$value.Age}</p>
<p class="group inner list-group-item-text">
${$value.Description}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
￥ ${$value.Price}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success " 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)鏈接
您可能感興趣的文章:
- ASP.NET?MVC使用typeahead.js實現(xiàn)輸入智能提示功能
- ASP.NET?MVC實現(xiàn)城市或車型三級聯(lián)動
- ASP.NET?MVC實現(xiàn)區(qū)域或城市選擇
- ASP.NET?MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收值
- ASP.NET?MVC增加一條記錄同時添加N條集合屬性所對應(yīng)的個體
- ASP.NET?MVC使用jQuery?ui的progressbar實現(xiàn)進度條
- ASP.NET MVC在基控制器中處理Session
- ASP.NET?MVC使用Knockout獲取數(shù)組元素索引的2種方法
- ASP.NET?MVC為用戶創(chuàng)建專屬文件夾
- ASP.NET?MVC實現(xiàn)多選下拉框保存并顯示
- ASP.NET?MVC打印表格并實現(xiàn)部分視圖表格打印
相關(guān)文章
這篇文章主要教大家學(xué)習(xí)制作MVC4分頁控件，自己動手編寫HtmlHelper-Pager分頁控件，感興趣的小伙伴們可以參考一下2016-08-08
Asp.Net數(shù)據(jù)控件引用AspNetPager.dll分頁實現(xiàn)代碼
今天與大家分享一下“Asp.Net數(shù)據(jù)控件引用AspNetPager.dll分頁”首先聲明以下幾點2012-01-01
我們在做數(shù)據(jù)錄入或者查詢的時候，經(jīng)常需要實現(xiàn)按用戶輸入的拼音碼進行數(shù)據(jù)的模糊查詢功能，本文為大家介紹ASP.NET如何實現(xiàn)按拼音碼模糊查詢，需要的朋友可以參考下2015-09-09
由于以前就業(yè)時算是公司里對服務(wù)器上各種硬件和配置原理較為了解. 一直負責公司服務(wù)器日常管理.也算是半路出家. 當然日常工作中前前后后也遇到不少大大小小的問題(硬件/服務(wù)器日常配置 數(shù)據(jù)中心合并方案等等). 有1些常見的異常. 總結(jié)一些基本快速的處理方法.2009-11-11
asp.net 抓取網(wǎng)頁源碼三種實現(xiàn)方法
asp.net 抓取網(wǎng)頁源碼三種實現(xiàn)方法，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了ASP.NET使用gridview獲取當前行的索引值的方法匯總，有需要的小伙伴可以參考下。2015-06-06
MVC后臺創(chuàng)建Json(List)前臺接受并循環(huán)讀取實例
MVC后臺創(chuàng)建Json(List)同時前臺接受并循環(huán)讀取，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
這篇文章主要為大家詳細介紹了.Net Core部署到CentOS的圖文教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
vs.net控件updatePanel實現(xiàn)無刷新的方法
vs.net控件updatePanel實現(xiàn)無刷新的方法，需要的朋友可以參考一下2013-04-04
GridView中checkbox"全選/取消"完美兼容IE和Firefox
GridView中checkbox的的"全選/取消"使用還是比較頻繁的，本文有個不錯的示例完美兼容IE和Firefox，感興趣的朋友可以參考下，希望對大家有所幫助2013-10-10