在产品展示中，通常涉及产品的展示方式、查询、排序、分页，本篇就在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 GetProducts()
{
return new List()
{
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 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 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);
}
//加载产品第一页
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);
}
//根据搜索排序分页条件加载
[HttpPost]
public ActionResult GetProductsBySearchSortPage(ProductQuery productQuery)
{
int totalNum = 0;
var allProducts = Database.GetPageProducts(productQuery, out totalNum);
var result = from p in allProducts
select new { p.Name, p.Brand, p.Category, p.Age, p.Description, p.Price };
var tempTotal = Convert.ToInt32(Math.Ceiling((double)(totalNum / 6))) + 1;
var jsonResult = new { total = tempTotal, rows = result };
return Json(jsonResult);
}
}
在Shared/Layout.cshtml中，相关的css.js必须具备：
@ViewBag.Title
@Styles.Render("~/Content/css")
@RenderSection("styles", required: false)
@Scripts.Render("~/bundles/jquery")
@RenderBody()
@RenderSection("scripts", required: false)
在Home/Index.cshtml中：
- 用到了有关分页的一个jQuery插件http://botmonster.com/jquery-bootpag/
- 页面首次记载，异步加载产品的前6条记录作为第一页
- 页面首次加载，异步加载所有分类作为搜索条件
- 页面首次加载，异步加载所有品牌作为搜索条件
- 页面首次加载，异步加载所有年限作为搜索条件
- 点击搜索条件中的品牌事件
- 点击搜索条件中的分类事件
- 点击搜索条件中的年限事件
- 点击搜索条件中的价格事件
- 点击"搜索条件"栏中的搜索标签事件
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles
{
}
@section scripts
{
}
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接