c# mvc webGrid 无刷新分页「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

参考地址：http://www.dotnetcurry.com/ShowArticle.aspx?ID=618

一、webGrid.css
.webGrid
{

    margin: 4px;
    border-collapse: collapse; /*width: 300px;*/
}
.header
{

    background-color: #E8E8E8;
    font-weight: bold;
    color: #FFF;
}
.head
{

    background-color: #E8E8E8;
    font-weight: bold;
    color:Black;
}

.webGrid th, .webGrid td
{

    width: 190px;
    #width:170px;
    border: 1px solid #C0C0C0;
    padding: 5px;
}
.alt
{

    background-color: #E8E8E8;
    color: #000;
}
.person
{

    width: 200px;
    font-weight: bold;
}

二、Pager.js
var sPath = “”;
$(function () {

    if ($(“#EfficientPaging”) != undefined) {

        sPath = $(“#EfficientPaging”).val();
        $.getJSON(sPath, null, function (d) {

            // add the dynamic WebGrid to the body
            $(“#xwGrid”).append(d.Data);

// create the footer
var footer = createFooter(d.Count);

            $(“#DataTable tfoot a”).live(“click”, function (e) {

                e.preventDefault();
                var data = {

                    page: $(this).text()
                };

                $.getJSON(sPath, data, function (html) {

                    // add the data to the table
                    $(“#DataTable”).remove();
                    $(“body”).append(html.Data);

                    // re-add the footer
                    $(‘#DataTable thead’).after(footer);
                });
            });
        });
    }
});

function createFooter(d) {

    var rowsPerPage = 5;
    var footer = “<tfoot><tr><td style=’border:none’>”;
    for (var i = 1; i < (d + 1); i++) {

        footer = footer + “<a href=#>” + i + “</a> ”;
    }
    footer = footer + “</td></tr></tfoot>”;
    $(“#DataTable thead”).after(footer);
    return footer;
}
三、view
<link href=”../../Content/css/webGrid.css” rel=”stylesheet” type=”text/css” />
<script src=”../../Content/jquery/mvcPager/Pager.js” type=”text/javascript”></script>

<input id=”EfficientPaging” name=”EfficientPaging” type=”hidden” value=”/Seller/EfficientPaging” />
    <div id=”xwGrid”>
    </div>
四、Controller
public class SellerController : Controller
{

private List<Seller> sellPopular;
[HttpGet]
        public JsonResult EfficientPaging(int? page)
        {

            int icount =10;//每页显示数量

            int skip = page.HasValue ? page.Value – 1 : 0; //如果page为0默认显示第一页
            sellPopular = SellerAccess.GetSellerList(skip, icount);    //获取当前页显示的数据
            var grid = new WebGrid(sellPopular);
            var htmlString = grid.GetHtml(
               tableStyle: “webGrid”,
               headerStyle: “head”,
               alternatingRowStyle: “alt”,
               columns: grid.Columns(
               grid.Column(“SellerID”, “商家编号”, canSort: false),
               grid.Column(“SellerNick”, “商家昵称”,canSort:false),
                  grid.Column(format: (item) => {

                      return new HtmlString(“<input type=’button’οnclick=’RedirectVersion(” + item[“SellerID”] + “)’ value=’管理版本’/> <input type=’button’ οnclick=’UpSeller(” + item[“SellerID”] + “)’ value=’修改’/> <input type=’button’ value=’删除’οnclick=’DeleteSeller(” + item[“SellerID”] + “)'”);
                  }, columnName: “操作”,canSort:false)
                  ),
                  htmlAttributes: new { id = “DataTable” }
              );

            int sellerCount = SellerAccess.GetSellerCount();
            return Json(new
            {


                Data = htmlString.ToHtmlString(),
                Count = Math.Ceiling((double)sellerCount/(double)icount)    //计算总页数s
            }, JsonRequestBehavior.AllowGet);
        }
}
五、DataAccess
/// <summary>
        /// 查询所有商家总数

        /// </summary>
        /// <returns></returns>
        public static int GetSellerCount()
        {

            int sellerCount = 0;
            using (ShopexMobileEntities db = new ShopexMobileEntities())
            {

                try
                {

                   sellerCount=db.Seller.ToList().Count();
                }
                catch (Exception)
                {

                    db.Dispose();
                    return sellerCount;
                }
            }
            return sellerCount;
        }
        /// <summary>
        /// 获取当前页显示的数据
        /// </summary>
        /// <param name=”pageIndex”>当前页</param>
        /// <param name=”count”>每页显示的数量</param>
        /// <returns></returns>
        public static List<Seller> GetSellerList(int pageIndex, int count)
        {

            List<Seller> sellerList = new List<Seller>();
            using (ShopexMobileEntities db = new ShopexMobileEntities())
            {

                try
                {

                     sellerList=db.Seller.OrderBy(o => o.SellerID).Skip(pageIndex * count).Take(count).ToList();

                }
                catch (Exception)
                {

                    db.Dispose();
                    return null;
                }
            }
            return sellerList;
        }