zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    unsupported jsonb version number 123
    如何在MPlayer上支持RTSP
    TDengine 时序数据库的 ADO.Net Core 提供程序 Maikebing.EntityFrameworkCore.Taos
    如何使用IoTSharp对接ModBus?
    如何从源码启动和编译IoTSharp
    Asp.Net Core 自动适应Windows服务、Linux服务、手动启动时的内容路径的扩展方法
    MQTTnet 的Asp.Net Core 认证事件的扩展
    Asp.Net Core 中利用QuartzHostedService 实现 Quartz 注入依赖 (DI)
    The remote certificate is invalid according to the validation procedure 远程证书验证无效
    settings插拔式源码
  • 原文地址:https://www.cnblogs.com/0to9/p/5278392.html
Copyright © 2011-2022 走看看