以前用过......但是现在>> PagedListPager的anchor标记总是将null传递给控制器以获取所需的页面值...
VS 2013 Web Express& MVC 4为所有人提供最新的软件包更新。
就像在Scot Allen的MVC 4简介中一样,我有一个带有PagedListPager的局部视图
控制器:
public ActionResult Catalog(string Id= "0", int page=1)
{
var CurrentItemsPage = (get-data-blaw-blaw-blaw).ToPagedList(page,18);
var model = new ShowRoomCatalogPackage(){ CurrentItems = CurrentItemsPage};
return View(model);
}
目录页
@model craftstore.Models.ShowRoomCatalogPackage
@{
ViewBag.Title = "Catalog";
Layout = "~/Views/Shared/_Details.cshtml";
}
@using (Ajax.BeginForm("Catalog", "Home", new { category = @Model.SelectedCategoryId, page = 1 },
new AjaxOptions
{
UpdateTargetId = "products",
InsertionMode = InsertionMode.Replace,
HttpMethod = "post"
}
)
)
{
<div class="container" >
<div class="row">
<div class="col-lg-10 col-md-5 col-sm-4 dropdown-menu">
@Html.LabelFor(m => m.SelectedCategoryId)
@Html.DropDownList("id", Model.CategoryItems, new { @id = "ddlCategories", onchange = "this.form.submit();" })
</div>
<div class="col-lg-2 col-md-2 col-sm-1">
@Html.ActionLink("Your Cart", "Index", "ShoppingCart", "", new { @class = "btn btn-green btn-lg" })
</div>
</div>
<div class="row">
@Html.Partial("_CatalogPartial", Model.CurrentItems)
</div><!-- row -->
</div><!-- container -->
}
<br />
<br />
@section Scripts
{
<script type="text/javascript">
new AnimOnScroll(document.getElementById('grid'), {
minDuration: 0.4,
maxDuration: 0.7,
viewportFactor: 0.2
});
</script>
}
部分视图:
@model IPagedList<ShowroomCatalog>
<div id="productList">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="pagedList" data-cs-target="#productList">
@Html.PagedListPager(Model, page => Url.Action("Index", new { category = ViewBag.SelectedCategoryId, page }), PagedListRenderOptions.MinimalWithItemCountText)
</div>
<ul class="grid effect-2" id="grid">
@foreach(var item in Model)
{
var path = String.Format("~/Content/Images/catalog/{0}/{1}", item.OfferType, item.ImagePath);
<li>
<div class="itembox">
<div class="imagebox">
<a href="@Url.Action("Detail", "Home", new { id = item.Id })" title="Detail for @item.CatalogName">
<img class="catalogimg" src="@Url.Content(path)" />
</a>
</div>
<p>@item.CatalogName</p>
</div>
</li>
}
</ul>
</div>
</div><!-- productlist -->
现在浏览器中渲染的部分视图在锚点中没有任何可能正常或可能不正常的内容......
<div class="pagedList" data-cs-target="#productList">
<div class="pagination-container"><ul class="pagination"><li class="disabled PagedList-skipToPrevious"><a rel="prev">«</a></li><li class="disabled PagedList-pageCountAndLocation"><a>Showing items 1 through 18 of 65.</a></li><li class="PagedList-skipToNext"><a href="" rel="next">»</a></li></ul></div>
</div>
当你将鼠标悬停在&gt;&gt;上它没有在URL中显示页面参数:
再次,回到控制器 - 我得到类别(15),但没有页面参数或Request.URL参数传递给控制器 - 由于某些路由错误,它没有隐藏......我想。 ..
如何让分页控件再次工作...... ???
[编辑:还有一个注意事项 - 寻呼机上的网址路径是/ controller / action / category / page,而不是出现在Scot Allen的OdeToFood示例中,其中它等同于/ controller / action / category?page = n(如/ Home / Catalog / 15?page = 1]
答案 0 :(得分:0)
我错过了PagedList类锚元素的JS。
var getPage = function () {
var $a = $(this);
var options = {
url: $a.attr("href"),
data: $("form").serialize(),
type: "get"
};
$.ajax(options).done(function (data) {
var target = $a.parents("div.pagedList").attr("data-otf-target");
$(target).replaceWith(data);
});
return false;
};
这是由以下原因引发的:
$(".main-content").on("click", ".pagedList a", getPage);
但是,这意味着您需要在_Layout.cshtml文件中调用@RenderBody()调用包含在主内容类中的内容。一个例子:
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>