MVC4 无刷新分页!

原创 2015年11月18日 14:41:21

有些朋友在使用MVCPage的时候会遇上,在用ajax 请求后台数据的时候始终不进   if (Request.IsAjaxRequest())  里,不能进 if 里表示你提交方式不是ajax,所以不能实现无刷新分业。

<div class="uk-width-medium-1-1">
        <div class="uk-panel uk-panel-box  uk-panel-header huibj hyzx-zdmb">
            <div class="uk-panel-title hyzx-zdmb-bd">查询条件 <span class=" uk-icon-angle-left hyzx-zdmb-tb uk-float-right"></span></div>
            <div class="uk-form hyzx-zdmb-zd">

                @using (Ajax.BeginForm("JifenList", new RouteValueDictionary { { "id", "" } }, new AjaxOptions { UpdateTargetId = "articles", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { { "id", "searchForm" } }))
                { 
                    <ul class="uk-grid  uk-grid-medium margin-topx">
                        <li class="uk-width-medium-1-2">
                            <label class="uk-form-label">起始时间</label>
                            <input class="uk-width-1-1" type="text" data-uk-datepicker="{format:'YYYY-MM-DD'}" id="startdata" name="startdata">
                        </li>
                        <li class="uk-width-medium-1-2">
                            <label class="uk-form-label">截至时间</label>
                            <input class="uk-width-1-1" type="text" data-uk-datepicker="{format:'YYYY-MM-DD'}" id="enddate" name="enddate">
                        </li>
                        <li class="uk-width-medium-1-1 uk-text-right">
                            <button class="uk-button litz-tz" type="submit">查询</button>
                        </li>
                    </ul>
                }

            </div>
        </div>
    </div>
    <div <span style="background-color: rgb(255, 255, 102);">id="articles"</span> style="width: 100%">
        @Html.Partial("_JifenList", Model)
    </div>
</div>
<span style="color:#ff0000;background-color: rgb(51, 255, 51);">@section Scripts{@{Html.RegisterMvcPagerScriptResource();}
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}</span>
RegisterMvcPagerScriptResource,用于注册MvcPager的客户端jQuery插件脚本,如果不加入 控制器Request.IsAjaxRequest() 一直会是false;

jquery.unobtrusive-ajax.min.js  是配合到MVCPage ajaxPage 无刷新分业,同时页面需要加入 jquery.js 

在看看详细

_JifenList 分页内容

<div class=" uk-width-medium-1-1 uk-overflow-container">
    <table class="uk-table uk-table-hover zdyuk-table">
        <thead>
            <tr>
                <th>日期</th>
                <th>可信宝</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>

            @{foreach (kdUserJifenRecordInfo item in Model)
              { 
                <tr>
                    <td>@item.AddDate.ToString("yyyy-MM-dd")</td>
                    <td><span class="lswz">@item.AddJifen</span></td>
                    <td>@item.addType</td>
                </tr>
                     
              }}
        </tbody>
    </table>
</div>


<div class="uk-width-medium-1-1 uk-margin-top">
    @Ajax.Pager(
    Model, new PagerOptions
    {
        PageIndexParameterName = "Page",
        ContainerTagName = "ul",
        CssClass = "uk-pagination ",
        CurrentPagerItemTemplate = "<li class=\"uk-active\"><span>{0}</span></li>",
        DisabledPagerItemTemplate = "<li class=\"disabled\"><span>{0}</span></li>",
        PagerItemTemplate = "<li>{0}</li>",
        FirstPageText = "首页",
        LastPageText = "尾页",
        NextPageText = "下一页",
        PrevPageText = "上一页"
    }, new MvcAjaxOptions
    {
        UpdateTargetId = "<span style="font-family: Arial, Helvetica, sans-serif;">articles</span>",
        DataFormId = "searchForm",
        HttpMethod = "Post"
    })
</div>
 

articles 有个div 的id 是articles  这是标示 局部刷新的地方!





asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

本文为在mvc4中使用ajax实现无刷新分页demo,记录一下。 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器...
  • u013924731
  • u013924731
  • 2016年10月25日 17:02
  • 1565

asp.net mvc基于jQuery+Ajax实现无刷新分页

自己写了个采用asp.net mvc框架的Demo,分页功能采用的是jQuery+Ajax实现的无刷新分页。 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用...
  • wangzl1163
  • wangzl1163
  • 2016年06月22日 15:05
  • 5102

关于MVC4使用PagedList.mvc分页

PagedList是NuGet上提供的一个分页的类库,能对任何IEnumerable进行分页,而且非常简单好用。从NuGet上,可以获取两个DLL:PagedList.dll和PagedList.Mv...
  • u013924731
  • u013924731
  • 2016年10月20日 17:00
  • 3569

1.MVC框架复习 2.Ajax加强 3.搜索建议 4,三级联动 5、刷新分页 6、Ajax局部动态更新数据

MVC框架复习  ·admin.php / index.php   定义常量 APP_NAME admin 和 home 来区分入口。  define('APP_NAME','admin/');...
  • Jye13
  • Jye13
  • 2013年04月02日 07:34
  • 1220

MVC4增刪改查带分页DEMO

  • 2014年11月11日 14:44
  • 11.72MB
  • 下载

MVC4中ajax分页技术实例

在这之前一直没有写过碰过MVC,更别说ajax,
  • szstephenzhou
  • szstephenzhou
  • 2014年06月28日 08:58
  • 5922

.net MVC4 ajax分页技术实现

.net MVC4 ajax分页技术实现原理,利用PartialView结合异步请求完成分页机制。
  • xiyangxiwen
  • xiyangxiwen
  • 2015年01月12日 20:18
  • 741

asp.net mvc4 easyui CRUD 分页 查询

asp.net mvc4 easyui CRUD 分页 查询
  • yjjhk
  • yjjhk
  • 2014年12月18日 19:22
  • 2202

.Net MVC4 使用心得(四)分页、Partial View、删除、ajax返回

分页成功后,下面是ajax的页面操作。众所周知,webform中,对数据做了编辑或者删除操作后,只需调用相应控件的DataBind()方法,就可以在页面更新数据。只要将控件和触发器放在updatepa...
  • sslyc8991
  • sslyc8991
  • 2013年08月01日 14:55
  • 5195

MVC3.0 无刷新 AJAX 分页 MvcPager

  • 2013年04月08日 15:19
  • 2.11MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MVC4 无刷新分页!
举报原因:
原因补充:

(最多只允许输入30个字)