关闭

MVC4 无刷新分页!

标签: mvc4分页
1286人阅读 评论(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  这是标示 局部刷新的地方!





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15100次
    • 积分:254
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:1篇
    • 评论:0条
    文章分类