ASP.NET?MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁(yè)
在產(chǎn)品展示中,通常涉及產(chǎn)品的展示方式、查詢、排序、分頁(yè),本篇就在ASP.NET MVC下,使用Boostrap來(lái)實(shí)現(xiàn)。
源碼放在了GitHub: https://github.com/darrenji/ProductsSearchSortPage
先上效果圖:

最上面是搜索和排序,每次點(diǎn)擊搜索條件、排序,或者刪除搜索條件都會(huì)觸發(fā)異步加載。
中間部分為產(chǎn)品展示,提供了列表和格子這2種顯示方式。
最下方為分頁(yè)。
能實(shí)現(xiàn)的功能包括:
- 點(diǎn)擊某一個(gè)搜索條件,該搜索條件被選中,選中項(xiàng)以標(biāo)簽的形式顯示到"搜索條件"欄中,觸發(fā)異步加載
- 點(diǎn)擊排序條件,該排序條件被選中,觸發(fā)異步加載
- 刪除"搜索條件"欄中的搜索條件,觸發(fā)異步加載
實(shí)現(xiàn)的思路大致是:
- 搜索、排序區(qū)域是Bootstrap的表格
- 產(chǎn)品展示、及切換2中展示方式都借助Boostrap來(lái)實(shí)現(xiàn)
- 分頁(yè)導(dǎo)航部分同樣借助Bootstrap來(lái)實(shí)現(xiàn)
- 搜索條件的顯示是通過(guò)把異步加載到的數(shù)據(jù)填充到tmpl模版,然后追加到頁(yè)面對(duì)應(yīng)區(qū)域
- 產(chǎn)品展示同樣通過(guò)tmpl模版實(shí)現(xiàn)
- 分頁(yè)導(dǎo)航用到了jquery的一個(gè)分頁(yè)插件,后面介紹
- 每一個(gè)搜索條件、排序條件都有對(duì)應(yīng)的隱藏域,當(dāng)觸發(fā)頁(yè)面事件,就把值放在隱藏域中后,再傳遞給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)于搜索排序分頁(yè)的基類 Models/QueryBase.cs
public class QueryBase
{
public int PageIndex { get; set; }
public int PageSize { get; set; }
public short PaiXu { get; set; }
}產(chǎn)品的搜索排序分頁(yè)派生于QueryBase這個(gè)基類 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; }
}提供了一個(gè)有關(guān)排序的枚舉 Models/AscDescEnum.cs
public enum AscDescEnum
{
asc = 0,
desc = 1
}模擬一個(gè)數(shù)據(jù)庫(kù)訪問(wèn)層,提供2個(gè)方法,一個(gè)方法獲取所有的Product集合,另一個(gè)方法根據(jù)ProductQuery獲取Product的集合。
public class Database
{
public static IEnumerable<Product> GetProducts()
{
return new List<Product>()
{
new Product(){Id = 1, Name = "羽絨服新時(shí)尚",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 = "初語(yǔ)",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 = "時(shí)尚童裝加絨",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中:
- 提供一個(gè)action方法返回有關(guān)類別的json對(duì)象
- 提供一個(gè)action方法返回有關(guān)品牌的json對(duì)象
- 提供一個(gè)action方法返回有關(guān)年限的json對(duì)象
- 提供一個(gè)action方法返回有關(guān)產(chǎn)品第一頁(yè)的json對(duì)象
- 提供一個(gè)action方法,根據(jù)搜索、排序、分頁(yè)條件返回json對(duì)象
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)品第一頁(yè)
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ù)搜索排序分頁(yè)條件加載
[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)分頁(yè)的一個(gè)jQuery插件http://botmonster.com/jquery-bootpag/
- 頁(yè)面首次記載,異步加載產(chǎn)品的前6條記錄作為第一頁(yè)
- 頁(yè)面首次加載,異步加載所有分類作為搜索條件
- 頁(yè)面首次加載,異步加載所有品牌作為搜索條件
- 頁(yè)面首次加載,異步加載所有年限作為搜索條件
- 點(diǎn)擊搜索條件中的品牌事件
- 點(diǎn)擊搜索條件中的分類事件
- 點(diǎn)擊搜索條件中的年限事件
- 點(diǎn)擊搜索條件中的價(jià)格事件
- 點(diǎn)擊"搜索條件"欄中的搜索標(biāo)簽事件
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles
{
<link href="~/Content/ProductList.css" rel="external nofollow" rel="stylesheet" />
}
<div class="container">
<!--搜索條件開(kāi)始-->
<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">價(jià)格</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">價(jià)格<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)品開(kāi)始-->
<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é)束-->
<!--分頁(yè)開(kāi)始-->
<div class="row" id="page-selection" style="text-align: center;margin-bottom: 50px;"></div>
<!--分頁(yè)結(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 () {
//加載首頁(yè)產(chǎn)品
$.getJSON('@Url.Action("GetFirstPage","Home")', function(data) {
if (data) {
$('#productTemplate').tmpl(data).appendTo('#products');
//關(guān)于分頁(yè)
$('#page-selection').bootpag({
total: data.total, //初始顯示的頁(yè)數(shù)
maxVisible: 10
}).on("page", function (event, num) { //點(diǎn)擊分頁(yè)按鈕
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 最多可見(jiàn)的頁(yè)數(shù)
$(this).bootpag({ total: result.total});
},
error: function (error) {
alert("有錯(cuò)誤: " + error.responseText);
}
});
});
}
});
//加載所有品牌
$.getJSON('@Url.Action("GetBrandsJson", "Home")', function (data) {
$('#pinpaiTemplate').tmpl(data).appendTo('#pp');
});
//點(diǎn)擊某一品牌
$('#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');
});
//點(diǎn)擊某一類別
$('#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');
});
//點(diǎn)擊某一年限
$('#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();
});
//點(diǎn)擊某一價(jià)格
$('#jg').on("click", ".innera", function () {
//先清空其它已經(jīng)存在與搜索區(qū)域的年限
$('ul.tagul li').find('.pricetag').parent().hide();
//清空搜索區(qū)域中有關(guān)價(jià)格的隱藏域
$('#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)價(jià)格的隱藏域賦值
$('#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');
});
//點(diǎn)擊搜索標(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") {
//把價(jià)格中的所有a都設(shè)為不選中狀態(tài)
$('#jg').find('.innera').removeClass('selected');
//清空搜索區(qū)域中有關(guān)價(jià)格的隱藏域
$('#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");
});
//點(diǎn)擊排序中的價(jià)格排序
$('#pricesort').on("click", function() {
$(this).find("span").toggle();
var temp = $('#sccondition').find("input[name='pricesort']");
temp.val(temp.val() == '0' ? '1' : '0');
getProductsBySortOrSearch();
});
});
//點(diǎn)擊搜索條件或者升序降序,當(dāng)前頁(yè)為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)于分頁(yè)
$('#page-selection').bootpag({
total: data.total, //初始顯示的頁(yè)數(shù)
maxVisible: 10
}).on("page", function (event, num) { //點(diǎn)擊分頁(yè)按鈕
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 最多可見(jiàn)的頁(yè)數(shù)
$(this).bootpag({ total: result.total });
},
error: function (error) {
alert("有錯(cuò)誤: " + error.responseText);
}
});
});
},
error: function (error) {
alert("有錯(cuò)誤: " + 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>
<!--品牌標(biāo)簽?zāi)0?->
<script id="pinpaitagTemplate" type="text/x-jQuery-tmpl">
<li>
<span class="tagcontent pinpaitag">品牌:${pinpai} ×</span>
</li>
</script>
<!--分類標(biāo)簽?zāi)0?->
<script id="fenleitagTemplate" type="text/x-jQuery-tmpl">
<li>
<span class="tagcontent fenleitag">分類:${fenlei} ×</span>
</li>
</script>
<!--價(jià)格標(biāo)簽?zāi)0?->
<script id="pricetagTemplate" type="text/x-jQuery-tmpl">
<li>
<span class="tagcontent pricetag">價(jià)格:${price} ×</span>
</li>
</script>
<!--年限標(biāo)簽?zāi)0?->
<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" >購(gòu)買</a>
</div>
</div>
</div>
</div>
</div>
{{/each}}
{{else}}
<span>沒(méi)有記錄</span>
{{/if}}
</script>
}以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
- ASP.NET?MVC使用typeahead.js實(shí)現(xiàn)輸入智能提示功能
- ASP.NET?MVC實(shí)現(xiàn)城市或車型三級(jí)聯(lián)動(dòng)
- ASP.NET?MVC實(shí)現(xiàn)區(qū)域或城市選擇
- ASP.NET?MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值
- ASP.NET?MVC增加一條記錄同時(shí)添加N條集合屬性所對(duì)應(yīng)的個(gè)體
- ASP.NET?MVC使用jQuery?ui的progressbar實(shí)現(xiàn)進(jìn)度條
- ASP.NET MVC在基控制器中處理Session
- ASP.NET?MVC使用Knockout獲取數(shù)組元素索引的2種方法
- ASP.NET?MVC為用戶創(chuàng)建專屬文件夾
- ASP.NET?MVC實(shí)現(xiàn)多選下拉框保存并顯示
- ASP.NET?MVC打印表格并實(shí)現(xiàn)部分視圖表格打印
相關(guān)文章
教你30分鐘通過(guò)Kong實(shí)現(xiàn).NET網(wǎng)關(guān)
Kong是一個(gè)Openrestry程序,而Openrestry運(yùn)行在Nginx上,用Lua擴(kuò)展了nginx。所以可以認(rèn)為Kong = Openrestry + nginx + lua,這篇文章主要介紹了30分鐘通過(guò)Kong實(shí)現(xiàn).NET網(wǎng)關(guān),需要的朋友可以參考下2021-11-11
asp.net中日歷函數(shù)Calendar的使用方法
calendar 控件用于在瀏覽器中顯示日歷,該控件可顯示某個(gè)月的日歷,允許用戶選擇日期,也可以跳到前一個(gè)或下一個(gè)月2011-05-05
asp.net Accee數(shù)據(jù)庫(kù)連接不穩(wěn)定解決方案
我最最進(jìn)做了個(gè)網(wǎng)站,我是用VS2005 + Access 數(shù)據(jù)庫(kù)連接,可以我在連接的時(shí)候總是出現(xiàn)連接不穩(wěn)定的情況,同樣的代碼,一個(gè)字也沒(méi)改,就是連接不上,但是有的又連接的上。真是郁悶,真是弄死人。2009-07-07
.net Core 3.0 WebApi 創(chuàng)建Linux守護(hù)進(jìn)程的方法
這篇文章主要介紹了.net Core 3.0 WebApi 創(chuàng)建Linux守護(hù)進(jìn)程的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
.Net站點(diǎn)設(shè)置多個(gè)路由對(duì)應(yīng)同一個(gè)Action
這篇文章介紹了.Net站點(diǎn)設(shè)置多個(gè)路由對(duì)應(yīng)同一個(gè)Action的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07

