Jquery Ajax+EF+JqueryEasyUi实现的异步无刷新分页+MVC和EF的搭建

最新推荐文章于 2020-06-07 13:52:52 发布

ycl_class

最新推荐文章于 2020-06-07 13:52:52 发布

阅读量485

点赞数 2

分类专栏： .net 文章标签： .net

本文链接：https://blog.csdn.net/ycl_class/article/details/79096336

版权

.net 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本人也是新手,正在尝试慢慢写博客,写的不好的地方请大神们多多指教,也希望结交更多志同道合的朋友

今天早上花了一些时间把以前的分页重新做了一遍,利用了.net 的MVC

好了废话不多说了,开始

首先我新建了一个解决方案,然后新建一个MVC项目

选择空,√上MVC点击确认就好啦

再然后就是新建一个类库

在类库里面新建一个EF实体模型和你的数据库的数据表进行关联起来

建好了大概就是这样

记得在添加实体模型之后再FenYe02中同样操作一遍再删除掉实体模型,这样就可以快捷的添加之后要用到的引用了,这样比较方便,还有Model里面的连接字符串也要复制到Web.config中去

在控制层新建Home控制器

Home控制器代码如下

using Model;
using System;
using System.Collections.Generic;
using System.Linq;


using System.Web;
using System.Web.Mvc;


namespace FenYe02.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home

       //EF的上下文
        MobileApplicationsEntities dbContext = new MobileApplicationsEntities();
        public ActionResult Index()
        {
            //编写linq查询记录的总条数
            var total = from data in dbContext.UserData
                        select data;

//讲查询到的结果放到ViewData中去
            ViewData["total"] = total.Count();
//查询记录的前十条
                var list = from u in dbContext.UserData
                           .Take(10)
                           select u;
                ViewData["list"] = list.ToList();
            return View();
        }


        public ActionResult page()
        {

//获取前台传过来的第几页和每页多少条数据
            int pageNumber = int.Parse(Request["pageNumber"]);
            int pageSize = int.Parse(Request["pageSize"]);

//查询记录  oOrderBy(i=>i.id)是根据id去排序,里面是一个lambda表达式

//然后Skip跳过多少条记录  ,Take查询多少条记录
            var list = from u in dbContext.UserData
                       .OrderBy(i => i.id)
                       .Skip((pageNumber-1) * 10).Take(pageSzie)
                       select u;
           //返回Json数据回前台
            return Json(list, JsonRequestBehavior.DenyGet);
        }
    }
}

前台页面如下

当然前面还是要导入包

@{
    ViewBag.Title = "Index";
}
@using Model;
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI Demo</title>
    <link href="~/Content/easyui.css" rel="stylesheet" />
    <link href="~/Content/icon.css" rel="stylesheet" />
    <link href="~/Content/demo.css" rel="stylesheet" />
    <link href="~/Content/TableStyle.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <style type="text/css">
        #pp {
            margin-top: 300px;
        }
    </style>
    <script type="text/javascript">

     //看一下JqueryEasyUi的开发APi里面有介绍这个方法
        $(function () {
            $("#pp").pagination({
                onSelectPage: function (pageNumber, pageSize) {
                    
                    $.ajax({
                        type: "post",
                        url: "@Url.Action("page", "Home")",
                        dataType:"text",
                        data: { pageNumber: pageNumber, pageSize: pageSize },
                        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                        success:function afterSuccess(data) {
                            $("#t1 tr").remove();
                            $("#t1 td").remove();

                         //将Json数据重新变成list集合
                            var list = JSON.parse(data);
                            
                            
                            $("#t1").append("<tr> <td>序号</td> <td>名字</td><td>时间</td></tr>");
                            for (var i = 0; 1 ; i++)
                            {
                                if (list[i] != null) {
                                    $("#t1").append("<tr> <td>" + list[i].id + "</td> <td>" + list[i].idName + "</td>  <td>" + list[i].dateTime + "</td></tr>");
                                } else
                                {
                                    break;
                                }
                               
                            }
                           
                        }
                    });
                }
            });


        });
    </script>
</head>


<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">

north region

</div>




    <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
    <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
    <div data-options="region:'center',title:'Center'">
        <table id="t1">
            <tr>
                <td>序号</td>
                <td>名字</td>
                <td>时间</td>
            </tr>
            @{
                foreach (UserData Data in (List<UserData>)ViewData["list"])
                {
                    <tr>
                        <td>@Data.id</td>
                        <td>@Data.idName</td>
                        <td>@Data.dateTime</td>
                    </tr>
                }
            }
        </table>


        <div id="pp" class="easyui-pagination"  data-options="total:@ViewData["total"]" style="margin-top:100px" >
        </div>
    </div>
</body>


</html>

最后运行

简单的异步无刷新分页就做好啦