MVC PageList使用（异步与正常）

此项目的功能为1.将数据分页显示，2.搜索数据按分页显示 3.异步或同步传递

一.第一步引用 mvc PageList插件

二.控制器写法

        public ActionResult Index(int page=1)  //为空则默认第一页
        {
            var lm = DataBLL.getData()
                .OrderBy(x => x.ID)
                .ToPagedList(page , 20); //扩展类，直接分页

            if (Request.IsAjaxRequest())  //用户异步请求
                return PartialView("search", lm);

            return View(lm);
        }

三.视图写法（主视图和分布视图）：

考虑到异步刷新，搜索条件什么不能改变（就是form表单里面的东西不能修改），所以设计2个视图：

1.主体用户保持查询条件的不变

        <div class="row">
            <form class="form" method="post" action="/" data-ajax="true" data-target="#search">
                <input type="search" class="form-control" name="产品名称"  data-autocomplete="@Url.Action("AutoCom")" autocomplete="on"  />
                <input type="submit" class="form-control" value="查询" />
                <input type="button" class="form-control" id="down" value="下载" />
            </form>
        </div>        
          @Html.Partial("search", Model)  <!-- 载入分布视图 --!>

2.分布视图

<div class="pagedList row" id="search" data-target="#search">  <!-- 载入分页html代码 --!>
    @Html.PagedListPager(Model,
            Page => Url.Action("index", new { Page }),
            PagedListRenderOptions.OnlyShowFivePagesAtATime)  <!-- 样式 --!>

    <table class="table table-hover" >
        <tr>
            <th>序列
            </th>
            <th>产品名称
            </th>
            <th>类型ID
            </th>
            <th>类型名称
            </th>
            <th>别名
            </th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.产品ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.产品名称)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.类型ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.类型名称)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.别名)
                </td>
            </tr>
        }

    </table>
</div>

四、是否实现异步

我们数据显示主要是在 <div class="pagedList row" id="search" data-target="#search"> 这个里面，所以我们要替换的数据在这里

所以异步主要是获取HTML 然后替换 #search的代码

        $("form[data-ajax='true']").submit(function () {  //有个小技巧，在表单里面添加属性便于操作管理
            var $form = $(this);
            $.ajax({
                url: $form.attr("action"),
                type: $form.attr("method"),
                data: $form.serialize(),
                success: function (data) {
                    $("#search").html(data);
                }
            })
            return false;
        });

        $(".pagedList a").click((function(){      
            var $a = $(this);
            $.ajax({
                url : $a.attr("href"),
                data: $("form").serialize(),
                type: "get",
                success: function(data){
                    $("#search").html(data);
                }
            })
            return false;

        }))

源代码：http://pan.baidu.com/s/1bnOAWEj

20160315 注意事项

1.在视图层只能用 @model IPagedList<search.Models.DataModel> ，以前的 @model IEnumerable<???>不能在使用

2.呵呵你们想在视图层用IPagedList是不是用不好？

记得在VIew文件夹下的 web.config里面添加：

      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="PagedList"/>    <!-- 看我 -->
        <add namespace="PagedList.Mvc"/> <!-- 看我 -->
      </namespaces>

MVC PageList使用（异步 与 正常）

MVC PageList使用（异步与正常）