[英]Pagedlist in partialview
我將 PagedList 移動到 PartialView 是因為我在頁面中使用了價格過濾器,並且當單擊頁面中的第 2 頁元素時,頁面中的元素是正確的,但所有頁面都已刷新,我只想刷新我的部分視圖內容。 怎么能這樣做?
部分視圖
@section Scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
<div class="col-md-12">
Page: @(Model.Products.PageCount < Model.Products.PageNumber ? 0 : Model.Products.PageNumber)/@Model.Products.PageCount
@Html.PagedListPager(Model.Products, page => Url.Action("FilterProducts",
new { page, pageSize = ViewBag.psize }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { InsertionMode = InsertionMode.Replace, HttpMethod = "GET", UpdateTargetId = "tableContainer" }))
</div>
使用 javascript 調用部分主視圖
function GetData(minPrice, maxPrice) {
$.ajax({
url: '@Url.Action("FilterProducts", "Home")',
data: {
minPrice: minPrice,
maxPrice: maxPrice,
Category: '@Model.Category',
Search: '@Model.Search'
}
})
.done(function (result) {
$('#tableContainer').html(result);
})
.fail(function (XMLHttpRequest, textStatus, errorThrown)
{
alert("FAIL");
});
}
<div class="col-md-11" id="tableContainer">
@{
var filterProdViewModel = new FilterProductsViewModel();
filterProdViewModel.Products = Model.Products;
Html.RenderPartial("FilterProducts", filterProdViewModel);
}
</div>
Controller
public ActionResult Index(string Search, int? page, int? pageSize, int? maxPrice, int? minPrice, string Category = null)
{
IPagedList<Product> products;
List<ProductCategory> prodCat = productCategories.Collection().ToList();
if (Category == "")
Category = null;
int pagesize = (pageSize ?? 5);
ViewBag.psize = pagesize;
ViewBag.Min = prodScont.GetMinPrice();
ViewBag.Max = prodScont.GetMaxPrice();
products = prodScont.SearchProducts(minPrice, maxPrice, Category, Search).ToPagedList(page ?? 1, pagesize);
ProductListViewModel model = new ProductListViewModel();
model.Products = products;
model.ProductCategories = prodCat;
model.Category = Category;
model.Search = Search;
model.Page = page;
return View(model);
}
public ActionResult FilterProducts(int? page, int? pageSize, int? maxPrice, int? minPrice, string Category = null, string Search = null)
{
FilterProductsViewModel model = new FilterProductsViewModel();
IPagedList<Product> products;
if (Category == "")
Category = null;
int pagesize = (pageSize ?? 5);
ViewBag.psize = pagesize;
products = prodScont.SearchProducts(minPrice, maxPrice, Category, Search).ToPagedList(page ?? 1, pagesize);
model.Products = products;
return PartialView(model);
}
我發現了我必須將 pagenumber 和 pagesize 參數放入 viewmodel 並將其發送到我的 javascript 中的 partialview 來解決問題的問題
function GetData(minPrice, maxPrice) {
$.ajax({
url: '@Url.Action("FilterProducts", "Home")',
data: {
page: '@Model.Page',
pagesize: '@Model.PageSize',
minPrice: minPrice,
maxPrice: maxPrice,
Category: '@Model.Category',
Search: '@Model.Search'
}
})
.done(function (result) {
$('#tableContainer').html(result);
})
.fail(function (XMLHttpRequest, textStatus, errorThrown)
{
alert("FAIL");
});
}
```
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.