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

【问题标题】：I want to do pagination in my asp.net mvc application (very small application)我想在我的 asp.net mvc 应用程序（非常小的应用程序）中进行分页
【发布时间】：2017-07-31 18:34:32
【问题描述】：

以下代码属于模型。

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

【问题讨论】：

    标签： jquery asp.net-mvc pagination


    【解决方案1】：

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

    【讨论】：

    • 添加库js和css并调用$(#tableproduct').datatable(); ?您能否检查我的代码并让我知道要添加什么以及在哪里添加？非常感谢。
    • 看这里@Saakey7 jsfiddle.net/dyx1kc3g。 1) 添加 Jquery，2) 添加 dataTable 插件 js 和 css，3) 将数据附加到表中（只需在数据上编写一个 for 循环并手动添加行），4) 调用 $('#tableproduct').datatable( );
    • 解决了，兄弟。 :) 但感谢您的想法.. 将来会记住。
    【解决方案2】： 
    **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>

    【讨论】：

      猜你喜欢
      • 2021-09-16
      • 2019-12-02
      • 1970-01-01
      • 2017-04-27
      • 1970-01-01
      • 2023-03-03
      • 1970-01-01
      • 1970-01-01
      • 2011-09-23
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode