MVC 列表分页 Partial内容页

最新推荐文章于 2023-05-10 13:46:12 发布

KingCruel

最新推荐文章于 2023-05-10 13:46:12 发布

阅读量1.3k

点赞数

分类专栏： .Net技术

本文链接：https://blog.csdn.net/KingCruel/article/details/50984704

版权

.Net技术专栏收录该内容

88 篇文章 1 订阅

订阅专栏

RenderLib

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Decorate.Web
{
    public static class RenderLib
    {
        public static string RenderPartialView(this Controller controller, string viewName, object model)
        {
            try
            {
                if (string.IsNullOrEmpty(viewName))
                    viewName = controller.ControllerContext.RouteData.GetRequiredString("action");

                controller.ViewData.Model = model;
                using (var sw = new StringWriter())
                {
                    ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
                    var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
                    viewResult.View.Render(viewContext, sw);

                    return sw.GetStringBuilder().ToString();
                }
            }
            catch (Exception)
            {
                throw;
            }

        }

    }
}

Controllers

using Decorate.Common;
using Decorate.Entity;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Decorate.Web.Controllers
{
    public class TestController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult IndexNew()
        {
            return View();
        }

        public JsonResult ProductList(int pageIndex, int pageSize, string key)
        {
            int pageCount = 0;
            TempData["PageIndex"] = pageIndex;
            TempData["PageSize"] = pageSize;


            var pager = new ResultPager
            {
                ParentID = 0,
                ProType = 1,
                PageIndex = pageIndex,
                PageSize = pageSize
            };
            IList<ProductNew> list = this.GetPaginationList(pager, out pageCount);

            JsonResult jr = Json(new
            {
                pageCount = pageCount,
                pageIndex = pageIndex,
                Html = this.RenderPartialView("PartialList", list)
            }, JsonRequestBehavior.AllowGet);
            return jr;
        }

        private List<ProductNew> GetPaginationList(ResultPager data, out int pageCount)
        {
            try
            {
                List<ProductNew> list = new List<ProductNew>();
                for (int i = 0; i <= 21; i++)
                {
                    ProductNew model = new ProductNew();
                    model.ID = i;
                    model.Title = "Title" + i.ToString();
                    model.Description = "Description" + i.ToString();
                    list.Add(model);
                }

                data.ResultTotal = list.Count();
                pageCount = ResultPager.Tool.PageCount(data);
                return list.Skip(ResultPager.Tool.TopNum(data)).Take(data.PageSize).ToList();
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    }
}

html:Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
    <link href="~/Content/style.css" rel="stylesheet" />
    <script src="~/Scripts/pager.js"></script>
    <script>
        var pagecount;
        var pageIndex;
        var pageSize = 9;
        var sortField = "ID";
        var isAsc = true;
        var key;
        var urlAddress = window.location.href;

        $(document).ready(function () {
            loadPageData();
        });

        PageClick = function (pageclickednumber) {
            pageIndex = pageclickednumber;
            LoadData(pageIndex, pageSize, sortField, isAsc);
        }

        function loadPageData() {
            pageIndex = 1;
            LoadData(pageIndex, pageSize, sortField, isAsc);
        }

        function LoadData(pageIndex, pageSize, sortField, isAsc) {
            var key = "";
            $.ajax({
                type: "POST",
                async: false,
                url: '@Url.Action("ProductList", "Test")',
                data: {
                    "pageIndex": pageIndex, "pageSize": pageSize, 'Key': key
                },
                cache: false,
                dataType: "json",
                success: function (result) {
                    if (result.Html) {
                        $("#List").html(result.Html);
                    }
                    pagecount = result.pageCount;
                    $(".pagination").pager({ pagenumber: result.pageIndex, pagecount: pagecount, buttonClickCallback: PageClick });
                }
            });
        }
    </script>
</head>
<body>
    <div id="List">
    </div>
    <div style="width: 100%;" align="center" class="pagination">
    </div>
</body>
</html>

Partial:PartialList.cshtml

@model IEnumerable<Decorate.Entity.ProductNew>
@using Decorate.Web;
@{
    int pageIndex = Convert.ToInt32(TempData["PageIndex"]);
    int pageSize = Convert.ToInt32(TempData["PageSize"]);
    int num = (pageIndex - 1) * pageSize;
}

<div class="met_module3_list">
    <ul class="list_1" style="visibility: visible;">
        @{
            foreach (var item in Model)
            {
                <li style="width: 33.33333%;">
                    <a href="@Url.Action("Detail", "Brand", new { id = item.ID })" title="@item.Title" target="_self" style="width: 213px;">
                        <h2 style="height: 22px;">@item.Title</h2>
                    </a>
                </li>
            }
        }
    </ul>
</div>

引用相关bootstrap框架，响应式、自适应布局

html:Index.cshtml

@{
    ViewBag.Title = "Test03261";
    Layout = "~/Areas/Administrator/Views/Shared/_Layout.cshtml";
}

<script src="~/Areas/Administrator/Script/jquery-2.0.3.min.js"></script>
<script src="~/Areas/Administrator/Script/pager.js"></script>
<link href="~/Areas/Administrator/Script/style.css" rel="stylesheet" />
<script>
    var pagecount;
    var pageIndex;
    var pageSize = 9;
    var sortField = "ID";
    var isAsc = true;
    var key;
    var urlAddress = window.location.href;

    $(document).ready(function () {
        loadPageData();
    });

    function querymsg() {
        loadPageData();
    }

    PageClick = function (pageclickednumber) {
        pageIndex = pageclickednumber;
        LoadData(pageIndex, pageSize, sortField, isAsc);
    }

    function loadPageData() {
        pageIndex = 1;
        LoadData(pageIndex, pageSize, sortField, isAsc);
    }

    function LoadData(pageIndex, pageSize, sortField, isAsc) {
        var key = "";
        $.ajax({
            type: "POST",
            async: false,
            url: '@Url.Action("ProductList", "Default")',
            data: {
                "pageIndex": pageIndex, "pageSize": pageSize, 'Key': key
            },
            cache: false,
            dataType: "json",
            success: function (result) {
                if (result.Html) {
                    $("#example").html(result.Html);
                }
                pagecount = result.pageCount;
                $(".pagination").pager({ pagenumber: result.pageIndex, pagecount: pagecount, buttonClickCallback: PageClick });
            }
        });
    }
</script>
<div id="content" class="col-lg-10 col-sm-10">
    <div>
        <ul class="breadcrumb">
            <li>
                <a href="#">主页</a>
            </li>
            <li>
                <a href="#">品牌管理</a>
            </li>

        </ul>
    </div>
    <input id="btnselect" type="button" value="query" οnclick="return querymsg();" />

    <div class="row">
        <div class="box col-md-12">
            <div class="box-inner">
                <div class="box-content">
                    <table id="example" class="table table-striped table-bordered responsive">
                    </table>
                    <div style="width: 90%;" align="center" class="pagination">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Partial:PartialList.cshtml

@model IEnumerable<Decorate.Entity.ProductNew>
@using Decorate.Web;
@{
    int pageIndex = Convert.ToInt32(TempData["PageIndex"]);
    int pageSize = Convert.ToInt32(TempData["PageSize"]);
    int num = (pageIndex - 1) * pageSize;
}
<thead>
    <tr>
        <th>Username</th>
        <th>Date registered</th>
        <th>Role</th>
        <th>Status</th>
        <th style="width: 260px">Actions</th>
    </tr>
</thead>
<tbody>
    @{
        foreach (var item in Model)
        {
        <tr>
            <td>@item.Title</td>
            <td class="center">@item.Title</td>
            <td class="center">@item.Title</td>
            <td class="center">
                <span class="label-warning label label-default">@item.Title</span>
            </td>
            <td class="center">
                <a class="btn btn-success" href="#">
                    <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                    View
                </a>
                <a class="btn btn-info" href="#">
                    <i class="glyphicon glyphicon-edit icon-white"></i>
                    Edit
                </a>
                <a class="btn btn-danger" href="#">
                    <i class="glyphicon glyphicon-trash icon-white"></i>
                    Delete
                </a>
            </td>
        </tr>
        }
    }
</tbody>

KingCruel

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MVC 列表分页 Partial内容页

RenderLibusing System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;namespace Decorate.Web{ public static class RenderLib {
复制链接

扫一扫