MVC4 無重新整理分頁!
阿新 • • 發佈:2019-02-05
有些朋友在使用MVCPage的時候會遇上,在用ajax 請求後臺資料的時候始終不進 if (Request.IsAjaxRequest()) 裡,不能進 if 裡表示你提交方式不是ajax,所以不能實現無重新整理分業。
RegisterMvcPagerScriptResource,用於註冊MvcPager的客戶端jQuery外掛指令碼,如果不加入 控制器Request.IsAjaxRequest() 一直會是false;<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>
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 這是標示 區域性重新整理的地方!