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技术发送当前页码到后端控制器...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

MVC4中ajax分页技术实例

在这之前一直没有写过碰过MVC,更别说ajax,

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

MVC2.0在Tab页中实现异步无刷新分页

概述   很多地方都存在以Tab页来呈现数据的方式,比如网易、新浪、搜狐、QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据。大家之所以喜欢用Tab,因为它能大大的增加...

ASP.NET MVC4自定义分页

///     /// 页面分页数据显示     ///     public interface IDataResponse     {         ///         /...

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

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

通过JQuery调用MVC的Controller方法来实现无刷新操作

和上次(第一次)写博文过了很久,期间有几次想写,也有几次感觉不错的心得体会,但是还是没找到静下来的时间。再有想法写博文的时候,已经毕业了。呵呵,闲话不说了。还是直奔主题吧。   公司准备开发一个...

mvc 部分视图实现无刷新分页

一。部分视图代码。 1,引用你自己的model @model WebSite.Areas.m.Models.FlOfficial.fllist 2,引用分页控件的命名空间 @using Web...

.net mvc4 利用 PagedList分页

mvc PagedList分页: 1、新建项目。 2、配置model。参考这里:
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MVC4 无刷新分页!
举报原因:
原因补充:

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