在ASP.NET MVC中使用Boostrap实现产品的展示、查询、排序、分页
在产品展示中，通常涉及产品的展示方式、查询、排序、分页，本篇就在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 allProductsgroup p by p.Ageinto gselect 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 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);}}
在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="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="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)" lowprice="80" highprice="">80元以下</a><a class="innera" href="javascript:void(0)" lowprice="80" highprice="90">80-90元</a><a class="innera" href="javascript:void(0)" lowprice="90" highprice="100">90-100元</a><a class="innera" href="javascript:void(0)" lowprice="100" highprice="110">100-110元</a><a class="innera" href="javascript:void(0)" lowprice="110" highprice="120">110-120元</a><a class="innera" href="javascript:void(0)" lowprice="120" highprice="130">120-130元</a><a class="innera" href="javascript:void(0)" lowprice="130" highprice="140">130-140元</a><a class="innera" href="javascript:void(0)" lowprice="140" highprice="150">140-150元</a><a class="innera" href="javascript:void(0)" lowprice="150" highprice="160">150-160元</a><a class="innera" href="javascript:void(0)" lowprice="160" highprice="170">160-170元</a><a class="innera" href="javascript:void(0)" lowprice="170" highprice="180">170-180元</a><a class="innera" href="javascript:void(0)" lowprice="180" highprice="190">180-190元</a><a class="innera" href="javascript:void(0)" lowprice="190" highprice="200">190-200元</a><a class="innera" href="javascript:void(0)" lowprice="200" highprice="210">200-210元</a><a class="innera" href="javascript:void(0)" lowprice="210" highprice="220">210-220元</a><a class="innera" href="javascript:void(0)" lowprice="220" highprice="230">220-230元</a><a class="innera" href="javascript:void(0)" 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)" 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><!--搜索条件结束--><!--产品开始--><div class="container"><div class="well well-sm"><strong>显示方式</strong><div class="btn-group"><a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list"></span>列表</a> <a href="#" id="grid" class="btn btn-default btn-sm"><spanclass="glyphicon glyphicon-th"></span>格子</a></div></div><div id="products" class="row list-group"></div></div><!--产品结束--><!--分页开始--><div class="row" id="page-selection" style="text-align: center;margin-bottom: 50px;"></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 class="innera" href="javascript:void(0)">${brand}</a></script><!--类别搜索模版--><script id="leibieTemplate" type="text/x-jQuery-tmpl"><a class="innera" href="javascript:void(0)">${category}</a></script><!--年限搜索模版--><script id="ageTemplate" type="text/x-jQuery-tmpl"><a class="innera" href="javascript:void(0)">${age}</a></script><!--品牌标签模版--><script id="pinpaitagTemplate" type="text/x-jQuery-tmpl"><li><span class="tagcontent pinpaitag">品牌：${pinpai} ×</span></li></script><!--分类标签模版--><script id="fenleitagTemplate" type="text/x-jQuery-tmpl"><li><span class="tagcontent fenleitag">分类：${fenlei} ×</span></li></script><!--价格标签模版--><script id="pricetagTemplate" type="text/x-jQuery-tmpl"><li><span class="tagcontent pricetag">价格：${price} ×</span></li></script><!--年限标签模版--><script id="agetagTemplate" type="text/x-jQuery-tmpl"><li><span class="tagcontent agetag">年限：${age} ×</span></li></script><!--产品列表模版--><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)">购买</a></div></div></div></div></div>{{/each}}{{else}}<span>没有记录</span>{{/if}}</script>}
在ASP.NET MVC中使用Boostrap实现产品的展示、查询、排序、分页的更多相关文章
- 2.ASP.NET MVC 中使用Crystal Report水晶报表
上一篇,介绍了怎么导出Excel文件,这篇文章介绍在ASP.NET MVC中使用水晶报表. 项目源码下载:https://github.com/caofangsheng93/CrystalReport ...
- 关于 ASP.NET MVC 中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...
- 在Asp.Net MVC 中配置 Serilog
Serilog 是一种非常简便记录log 的处理方式,使用Serilog可以生成本地的text文件, 也可以通过 Seq 来在Web界面中查看具体的log内容. 接下来就简单的介绍一下在Asp.Net ...
- 如何在 ASP.NET MVC 中集成 AngularJS（3）
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- 如何在 ASP.NET MVC 中集成 AngularJS（2）
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- asp.net mvc 中 一种简单的 URL 重写
asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...
- 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)
在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...
- ASP.NET MVC中的两个Action之间值的传递--TempData
一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在一个叫做TempData的Property,它的类型为TempDataDictiona ...
随机推荐
- nginx参数优化
大家好,分享即关爱,我们很乐意和你分享一些新的知识,我们准备了一个 Nginx 的教程,分为三个系列,如果你对 Nginx 有所耳闻,或者想增进 Nginx 方面的经验和理解,那么恭喜你来对地方了. ...
- lombok使用说明
简介lombok 的官方网址:http://projectlombok.org/lombok 提供了简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 java 代码.特别是相对于 POJO, ...
- 环境变量GOPATH使用试验
Intel Core i5-8250U,Windows 10家庭中文版,Visual Studio Code 1.26.1 中午的时候,自己把环境变量GOBIN给清空了.刚刚继续工作时发生了异常:使用 ...
- 在阿里云申请Symantec免费SSL证书操作流程
2016年阿里云与国内证书颁发机构天威诚信推出了基于Symantec(赛门铁克)的免费SSL证书,有需要免费SSL证书产品的可以前往阿里云进行申请. 申请地址:阿里云云盾证书服务—Symantec免费 ...
- iOS仿安卓手势解锁
界面是一个九宫格的布局.九宫格实现思路. 先确定有多少列 cloum = 3; 计算出每列之间的距离 计算为: CGFloat margin = (当前View的宽度 - 列数 * 按钮的宽度) / ...
- php中empty()、isset()、is_null()和变量本身的布尔判断区别
<?php//预定义变量数组:空字符,字符0,数组0,null,布尔false,空数组$arr_var = array('', '0', 0, null, false, array()); fo ...
- Delphi中使用ActiveX的一些心得
使用方法分为两种:一.直接把可视化的ActiveX控件放到程序中:二.运行时根据需要实时建立. 如果是直接使用,则应用程序在初始化的过程中会自动寻找.创建所需的ActiveX控件,如果控件没有注册, ...
- WebSocket原理说明
WebSocket原理说明 众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现.这种机制对于信息变化不是特别频繁的应 ...
- EntityFramework系列：SQLite的CodeFrist和RowVersion
没什么好说的,能支持DropCreateDatabaseIfModelChanges和RowVersion的Sqlite谁都想要.EntityFramework7正在添加对Sqlite的支持,虽然EF ...
- 【LOJ】#2107. 「JLOI2015」城池攻占
题解 用一个平衡树维护能攻占到u点的骑士,合并到父亲的时候去掉攻击力小于父亲生命值的那部分,只要把那棵树拆掉并且将树中的所有骑士更新一下答案,用无旋式treap很好写 合并的时候只要启发式合并就可以了 ...