我想在我的asp.net mvc应用程序中做分页（非常小的应用程序）

以下代码位于Model下。我想在我的asp.net mvc应用程序中做分页（非常小的应用程序）

**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页中显示三张图片。

来源

2017-07-30 Saakey7

**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>

来源

2017-07-31 10:34:32 Saakey7

您可以使用数据表插件。既然你说这是一个小应用程序（有限的数据），那么有客户端分页比服务器端有意义。看看https://datatables.net/。你基本上只需要包含库js和css，然后调用$（'＃tableproduct'）。datatable（）;在你的脚本中。

来源

2017-07-30 18:20:27

添加库js和css后调用$（＃tableproduct'）。datatable（）; ？你可以请检查我的代码，让我知道要添加什么以及在哪里添加？提前谢谢了。 – Saakey7

看这里@ Saakey7 https://jsfiddle.net/dyx1kc3g/。 1）添加Jquery，2）添加dataTable插件js和css，3）将数据附加到表中（只需为数据写一个for循环并手动添加行），4）调用$（'＃tableproduct'）。datatable ）; –

它已经解决了兄弟。 :)但谢谢你的想法..将铭记未来。 – Saakey7

我想在我的asp.net mvc应用程序中做分页（非常小的应用程序）

回答

相关问题