以下代码属于Model。
**Products.cs**
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace UITest.Models
{
public class Product
{
public int productId { get; set; }
public string productName { get; set; }
public string productDescription { get; set; }
public decimal productPriceOriginal { get; set; }
public decimal productPriceSale { get; set; }
public decimal productDiscount { get; set; }
public DateTime discountStartDate { get; set; }
public string discountStartDateString { get; set; }
public DateTime discountEndDate { get; set; }
public string discountEndDateString { get; set; }
public int availableQty { get; set; }
public List<string> productPictures { get; set; }
public List<string> productPictures1 { get; set; }
}
}
以下代码来自控制器：
**HomeController.cs**
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using UITest.Models;
namespace UITest.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult ProductList()
{
List<Product> products = new List<Product>();
//--------- 1
Product p = new Product();
p.productId = 1;
p.productName = "Puzzle";
p.productDescription = "Puzzle for children";
p.productPriceOriginal = (decimal)500.0;
p.productPriceSale = (decimal)450.00;
p.productDiscount = 50;
p.discountStartDate = new DateTime(2017, 8, 1);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 100;
p.productPictures = new List<string>();
//string imgPath = Path.Combine(Server.MapPath("~/ProdPics/"), "Puzzle1.jpg");
string imgPath = Url.Content("~\\ProdPics\\Puzzle1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
string imgPath1 = Url.Content("~\\ProdPics\\Puzzle2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 2
p = new Product();
p.productId = 2;
p.productName = "GWR Games";
p.productDescription = "GWR Games for Children";
p.productPriceOriginal = (decimal)600.0;
p.productPriceSale = (decimal)540.00;
p.productDiscount = 60;
p.discountStartDate = new DateTime(2017, 8, 2);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 120;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\GBWR2016.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\GBWR2017.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 3
p = new Product();
p.productId = 3;
p.productName = "Toy";
p.productDescription = "Toy for Children";
p.productPriceOriginal = (decimal)700.0;
p.productPriceSale = (decimal)560.00;
p.productDiscount = 140;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountStartDate.ToShortDateString();
p.availableQty = 150;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\Toy1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\Toy2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 4
p = new Product();
p.productId = 4;
p.productName = "Mixer Grinder";
p.productDescription = "Good Quality Mixer Grinder";
p.productPriceOriginal = (decimal)17000.0;
p.productPriceSale = (decimal)15000.00;
p.productDiscount = 2000;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 140;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\MixerGrinder1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\MixerGrinder2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 5
p = new Product();
p.productId = 5;
p.productName = "Football";
p.productDescription = "Good Quality Football";
p.productPriceOriginal = (decimal)900.0;
p.productPriceSale = (decimal)600.00;
p.productDiscount = 300;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 140;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\Football1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\Football2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 6
p = new Product();
p.productId = 6;
p.productName = "Mobile";
p.productDescription = "Cheapest SmartPhones";
p.productPriceOriginal = (decimal)7000.0;
p.productPriceSale = (decimal)4000.00;
p.productDiscount = 3000;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 240;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\Mobile1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\Mobile2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
return Json(products, JsonRequestBehavior.AllowGet);
}
}
}
以下代码位于“视图”下的“主页”下。
**index.cshtml**
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="~/Scripts/bootstrap.min.css" />
<link rel="stylesheet" href="~/Scripts/bootstrap-table.min.css" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="~/Scripts/simplePagination.css" />
<script src="~/Scripts/jquery.simplePagination.js"></script>
<title>Test User Interface</title>
<style>
.prdImg {
width: 100px;
}
.tableheight .fixed-table-container
{
width:490px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="text-align:center;">
<button class="btn btn-primary" onclick="FetchProducts();">Show Products</button>
</div>
</div>
<div id="divProdList">
</div>
<div class="container">
<table id="tableproduct" data-height="450">
<thead>
<tr>
<th data-field="productId">Product Id</th>
<th data-field="productName">Product Name</th>
<th data-field="productDescription">Product Description</th>
<th data-field="productPriceOriginal">Product Price Original</th>
<th data-field="productPriceSale">Product Price Sale</th>
<th data-field="productDiscount">Product Discount</th>
@*<th data-field="discountStartDate">Discount Start Date</th>*@
<th data-field="discountStartDateString">Discount Start Date</th>
@*<th data-field="discountEndDate">Discount End Date</th>*@
<th data-field="discountEndDateString">Discount End Date</th>
<th data-field="availableQty">Available Quantity</th>
<th data-field="productPictures" data-formatter="imageFormatter">Product Pictures</th>
<th data-field="productPictures1" data-formatter="imageFormatter">Product Pictures</th>
</tr>
</thead>
</table>
</div>
<script>
function FetchProducts() {
$.ajax({
url: '/Home/ProductList',
type: "POST",
success: ShowProductList,
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
}
function imageFormatter(value, row) {
return '<img class="prdImg" src="' + value + '" />';
}
function ShowProductList(response) {
//var prodList = JSON.stringify(response);
//$('#divProdList').html(prodList);
var mydata = response;
$('#tableproduct').bootstrapTable({
data:mydata
});
}
</script>
</body>
</html>
问题：如何进行分页？我想应用分页，并希望在第1页中显示三张图片，并在第2页中放置三张图片。
答案 0 :(得分：0)
您可以使用datatable插件。既然你说它是一个小应用程序（有限的数据），那么客户端分页比服务器端更有意义。看看https://datatables.net/。你基本上只需要包含库js和css，并调用$（＆＃39;＃tableproduct＆＃39;）。datatable（）;在你的剧本中。
答案 1 :(得分：0)
**HomeController.cs**
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using UITest.Models;
namespace UITest.Controllers
{
public class HomeController : Controller
{
public int PageSize = 3;
// GET: Home
public ActionResult Index()
{
List<Product> products = new List<Product>();
products = Products();
ViewBag.totalPage = (products.Count() + PageSize - 1) / PageSize;
return View();
}
[HttpPost]
public ActionResult ProductList(string pageNumber)
{
List<Product> products = new List<Product>();
products = Products();
var page = Convert.ToInt32(pageNumber);
var skip = PageSize * (page - 1);
var productPage = products.OrderBy(x => x.productId)
.Skip(skip)
.Take(PageSize)
.ToArray();
return Json(productPage, JsonRequestBehavior.AllowGet);
}
public List<Product> Products()
{
List<Product> products = new List<Product>();
//--------- 1
Product p = new Product();
p.productId = 1;
p.productName = "Puzzle";
p.productDescription = "Puzzle for children";
p.productPriceOriginal = (decimal)500.0;
p.productPriceSale = (decimal)450.00;
p.productDiscount = 50;
p.discountStartDate = new DateTime(2017, 8, 1);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 100;
p.productPictures = new List<string>();
//string imgPath = Path.Combine(Server.MapPath("~/ProdPics/"), "Puzzle1.jpg");
string imgPath = Url.Content("~\\ProdPics\\Puzzle1.jpg"); //Server.MapPath(".\\ProdPics\\Puzzle1.jpg");//Path.Combine(Server.MapPath(@"~\ProdPics\Puzzle1.jpg"));
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
string imgPath1 = Url.Content("~\\ProdPics\\Puzzle2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 2
p = new Product();
p.productId = 2;
p.productName = "GWR Games";
p.productDescription = "GWR Games for Children";
p.productPriceOriginal = (decimal)600.0;
p.productPriceSale = (decimal)540.00;
p.productDiscount = 60;
p.discountStartDate = new DateTime(2017, 8, 2);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 120;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\GBWR2016.jpg"); //Path.Combine(Server.MapPath("~/ProdPics/"), "GBWR2016.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\GBWR2017.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 3
p = new Product();
p.productId = 3;
p.productName = "Toy";
p.productDescription = "Toy for Children";
p.productPriceOriginal = (decimal)700.0;
p.productPriceSale = (decimal)560.00;
p.productDiscount = 140;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountStartDate.ToShortDateString();
p.availableQty = 150;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\Toy1.jpg"); // Path.Combine(Server.MapPath("~/ProdPics/"), "Toy1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\Toy2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 4
p = new Product();
p.productId = 4;
p.productName = "Mixer Grinder";
p.productDescription = "Good Quality Mixer Grinder";
p.productPriceOriginal = (decimal)17000.0;
p.productPriceSale = (decimal)15000.00;
p.productDiscount = 2000;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 140;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\MixerGrinder1.jpg"); // Path.Combine(Server.MapPath("~/ProdPics/"), "Toy1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\MixerGrinder2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 5
p = new Product();
p.productId = 5;
p.productName = "Football";
p.productDescription = "Good Quality Football";
p.productPriceOriginal = (decimal)900.0;
p.productPriceSale = (decimal)600.00;
p.productDiscount = 300;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 140;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\Football1.jpg");// Path.Combine(Server.MapPath("~/ProdPics/"), "Toy1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\Football2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
//--------- 6
p = new Product();
p.productId = 6;
p.productName = "Mobile";
p.productDescription = "Cheapest SmartPhones";
p.productPriceOriginal = (decimal)7000.0;
p.productPriceSale = (decimal)4000.00;
p.productDiscount = 3000;
p.discountStartDate = new DateTime(2017, 8, 3);
p.discountStartDateString = p.discountStartDate.ToShortDateString();
p.discountEndDate = new DateTime(2017, 8, 31);
p.discountEndDateString = p.discountEndDate.ToShortDateString();
p.availableQty = 240;
p.productPictures = new List<string>();
imgPath = Url.Content("~\\ProdPics\\Mobile1.jpg"); // Path.Combine(Server.MapPath("~/ProdPics/"), "Toy1.jpg");
p.productPictures.Add(imgPath);
p.productPictures1 = new List<string>();
imgPath1 = Url.Content("~\\ProdPics\\Mobile2.jpg");
p.productPictures1.Add(imgPath1);
products.Add(p);
return products;
}
}
}
**Index.cshtml**
@{
Layout = null;
int totalPage = ViewBag.totalPage;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="~/Scripts/bootstrap.min.css" />
<link rel="stylesheet" href="~/Scripts/bootstrap-table.min.css" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-table.min.js"></script>
@*<link rel="stylesheet" href="~/Scripts/simplePagination.css" />
<script src="~/Scripts/jquery.simplePagination.js"></script>*@
<title>Test User Interface</title>
<style>
.prdImg {
width: 100px;
}
/*.tableheight .fixed-table-container
{
width:490px;
}*/
.divheight
{
margin-top:30px;
}
/*.lastCol {
width: 149px !important;
}*/
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="text-align:center;">
<button class="btn btn-primary" onclick="FetchProducts(1);">Show Products</button>
</div>
</div>
<div id="divProdList" class="divheight">
</div>
<div class="container" style="display:none">
<table id="tableproduct" data-height="450">
<thead>
<tr>
<th data-field="productId">Product Id</th>
<th data-field="productName">Product Name</th>
<th data-field="productDescription">Product Description</th>
<th data-field="productPriceOriginal">Product Price Original</th>
<th data-field="productPriceSale">Product Price Sale</th>
<th data-field="productDiscount">Product Discount</th>
@*<th data-field="discountStartDate">Discount Start Date</th>*@
<th data-field="discountStartDateString">Discount Start Date</th>
@*<th data-field="discountEndDate">Discount End Date</th>*@
<th data-field="discountEndDateString">Discount End Date</th>
<th data-field="availableQty">Available Quantity</th>
<th data-field="productPictures" data-formatter="imageFormatter">Product Pictures</th>
<th data-field="productPictures1" data-formatter="imageFormatter">Product Pictures</th>
</tr>
</thead>
</table>
<ul class="pagination">
@for (int i = 1; i <= totalPage; i++)
{
<li><a href="#">@i</a></li>
}
</ul>
</div>
<script>
$(".pagination li a").click(function () {
var pageNo = $(this).text();
FetchProducts(pageNo);
});
function FetchProducts(pageNo) {
$.ajax({
url: '/Home/ProductList',
type: "POST",
data: { pageNumber: pageNo },
datatype: 'json',
success: ShowProductList,
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
}
function imageFormatter(value, row) {
return '<img class="prdImg" src="' + value + '" />';
}
function ShowProductList(response) {
//var prodList = JSON.stringify(response);
//$('#divProdList').html(prodList);
var mydata = response;
$('#tableproduct').bootstrapTable();
$('#tableproduct').bootstrapTable('load', mydata);
$(".container").show();
}
</script>
</body>
</html>