c# mvc webGrid 无刷新分页

最新推荐文章于 2024-07-21 17:23:08 发布

hanjingjingpan

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量4.9k

点赞数

分类专栏： c# mvc 文章标签： mvc c# function exception stylesheet button

本文链接：https://blog.csdn.net/hanjingjingpan/article/details/6333916

版权

c# mvc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考地址：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;
        }