MVC4 无刷新分页！

最新推荐文章于 2021-12-30 14:59:01 发布

一叶无秋

最新推荐文章于 2021-12-30 14:59:01 发布

阅读量2.6k

点赞数

分类专栏： MVC4 文章标签： mvc4 分页

本文链接：https://blog.csdn.net/guo449211721/article/details/49906631

版权

MVC4 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有些朋友在使用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 这是标示局部刷新的地方！