一叶千秋

什么都有

MVC4 无刷新分页!

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





阅读更多
文章标签: mvc4 分页
个人分类: MVC4
上一篇SQL 巧妙的乱序排列
下一篇easyui datagrid 去掉 全选checkbox
想对作者说点什么? 我来说一句

mvc5无刷新分页

2017年09月04日 3.15MB 下载

没有更多推荐了,返回首页

关闭
关闭