【发布时间】：2013-07-22 21:49:27
【问题描述】：
我正在构建一个 MVC 应用程序，我正在寻找一种在我看来进行分页的有效方法。
到目前为止，我已经安装了following 寻呼系统。但是，如果这个分页系统运行良好，它就有一个缺陷：视图中显示的列表不是完整的列表，而是用户根据页码查看列表的哪个部分。缺陷是如果我使用 jQuery 系统对项目进行排序，它只会对当前页面中的项目进行排序，而不是对总列表进行排序。
请允许我表明我的意思。说我有这个观点：
@using MyApp.Models
@model PagedList.IPagedList<MyApp.Utilities.CardDisplay>
<h2>
Cards Display Results
</h2>
<script type="text/javascript">
$(document).ready(function(){
$('#cardRarity').change(function () {
var showCardRarity = $(this).val();
if (showCardRarity == "All") {
$(".cardRarity").show();
} else {
$(".cardRarity").hide();
$(".cardRarity-" + showCardRarity).each(function() {
$(this).show();
});
}
});
$('#cardType').change(function() {
var showCardType = $(this).val();
if (showCardType == "All") {
$(".cardType").show();
} else {
$(".cardType").hide();
$(".cardType-" + showCardType).each(function() {
$(this).show();
});
}
});
$('#cardColor').change(function() {
var showCardColor = $(this).val();
if (showCardColor == "All") {
$(".cardColor").show();
} else {
$(".cardColor").hide();
$(".cardColor-" + showCardColor).each(function() {
$(this).show();
});
}
});
});
</script>
@using (Html.BeginForm())
{
<p>Filter by rarity: <select name="cardRarity" id="cardRarity" tabindex="1">
<option value="All">All</option>
<option value="Land">Land</option>
<option value="Common">Common</option>
<option value="Uncommon">Uncommon</option>
<option value="Rare">Rare</option>
<option value="Mythic Rare">Mythic Rare</option>
<option value="Special">Special</option>
</select>
Filter by type: <select name="cardType" id="cardType" tabindex="2">
<option value="All">All</option>
<option value="Artifact">Artifact</option>
<option value="Instant">Instant</option>
<option value="Creature">Creature</option>
<option value="Land">Land</option>
<option value="Planeswalker">Planeswalker</option>
<option value="Enchantment">Enchantment</option>
<option value="Sorcery">Sorcery</option>
<option value="Tribal">Tribal</option>
</select>
Filter by color: <select name="cardColor" id="cardColor" tabindex="3">
<option value="All">All</option>
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Black">Black</option>
<option value="Gold">Gold</option>
<option value="Colorless">Colorless</option>
</select>
</p>
}
@if (Model.Count > 0)
{
if (Model.PageCount > 1)
{
<div class="center">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
of @Model.PageCount
@if (Model.HasPreviousPage)
{
@Html.ActionLink("<<", "DisplayCardsResults", new { _page = 1, _sortOrder = ViewBag._currentSort })
@Html.Raw(" ")
@Html.ActionLink("< Prev", "DisplayCardsResults", new { _page = Model.PageNumber - 1, _sortOrder = ViewBag._currentSort })
}
else
{
@:<<
@Html.Raw(" ");
@:< Prev
}
@if (Model.HasNextPage)
{
@Html.ActionLink("Next >", "DisplayCardsResults", new { _page = Model.PageNumber + 1, _sortOrder = ViewBag._currentSort })
@Html.Raw(" ")
@Html.ActionLink(">>", "DisplayCardsResults", new { _page = Model.PageCount, _sortOrder = ViewBag._currentSort })
}
else
{
@:Next >
@Html.Raw(" ")
@:>>
}
</div>
}
<table id="resultTable">
<tr>
<th>Item number</th>
<th>Card Name</th>
<th>Number</th>
<th>Color</th>
<th>Mana Cost</th>
<th>Mana Converted</th>
<th>Card Type</th>
<th>Power</th>
<th>Toughness</th>
<th>Rarity</th>
<th>Card Set</th>
<th>Artist Name </th>
<th>Actions </th>
</tr>
@for (int i = 0; i < Model.Count; i++)
{
var className = i % 2 == 0 ? "even" : "odd";
var row = ((i + 1) + ((Model.PageNumber - 1) * 50));
<tr class="@className cardRarity cardRarity-@(Model[i].mCardRarity.Replace(" ", "-"))
cardType cardType-@(Model[i].mStrippedCardType)
cardColor cardColor-@(Model[i].mCardColor)">
<td>@row</td>
<td class="center">
@(Model[i].mCardFlagFace == CardInfo.FlagFaceValue.Normal ?
Html.ActionLink(Model[i].mCardName, "CardDetails", new {_cardId = Model[i].mCardID}) :
Html.ActionLink(Model[i].mCardName + " // " + Model[i].mChildCard.mCardName, "CardDetails", new {_cardId = Model[i].mCardID}))
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardNumber)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardColor)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardManaCost)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardManaConverted)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardType)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardPower)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardToughness)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardRarity)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardSet.mCardSetName)
</td>
<td>
@Html.DisplayFor(_item => _item[i].mCardArtistName)
</td>
<td>
@Html.ActionLink("Details", "Details", new {@_cardId = Model[i].mCardID})
@Html.ActionLink("Edit", "Edit", new {@_cardId = Model[i].mCardID})
@Html.ActionLink("Delete", "Delete", new {@_cardId = Model[i].mCardID})
</td>
</tr>
}
</table>
if (Model.PageCount > 1)
{
<div class="center">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
of @Model.PageCount
@if (Model.HasPreviousPage)
{
@Html.ActionLink("<<", "DisplayCardsResults", new { _page = 1, _sortOrder = ViewBag._currentSort })
@Html.Raw(" ")
@Html.ActionLink("< Prev", "DisplayCardsResults", new { _page = Model.PageNumber - 1, _sortOrder = ViewBag._currentSort })
}
else
{
@:<<
@Html.Raw(" ");
@:< Prev
}
@if (Model.HasNextPage)
{
@Html.ActionLink("Next >", "DisplayCardsResults", new { _page = Model.PageNumber + 1, _sortOrder = ViewBag._currentSort })
@Html.Raw(" ")
@Html.ActionLink(">>", "DisplayCardsResults", new { _page = Model.PageCount, _sortOrder = ViewBag._currentSort })
}
else
{
@:Next >
@Html.Raw(" ")
@:>>
}
</div>
}
}
假设我有 50 张卡片要显示的列表，但允许的卡片页数为 20。基于此视图，如果我将所选选项 Card Type 更改为 Creature，该视图确实会排序和显示所有生物，但仅显示 20 张卡片，而不是整个列表。
这就是我需要帮助的原因：我需要想办法要么将整个列表加载到视图中，然后整理出一些分页方式，要么只重新显示想要的项目，我很乐意这样做它无需重写我的控制器方法，尽管我不介意添加新功能。我听说 JSon 可能会有所帮助，但我不知道它是如何工作的。谁能帮帮我？
编辑
这是工作代码！
首先，我已经像这样修改了javascript函数：
<script type="text/javascript">
$(document).ready(function () {
$('#cardRarity').change(function () {
var showCardRarity = $(this).val();
refreshResults(($(this).attr("id")), showCardRarity);
});
$('#cardType').change(function () {
alert("Type changed");
var showCardType = $(this).val();
refreshResults(($(this).attr("id")), showCardType);
});
$('#cardColor').change(function () {
alert("Color changed");
var showCardColor = $(this).val();
refreshResults(($(this).attr("id")), showCardColor);
});
function refreshResults(filter, value) {
alert(filter);
$.get("@Url.Action("DisplayCardsResults", "Card")", {
_page: 1,
_sortOrder: "@ViewBag._sortOrder",
_filter: filter,
_searchValue: value
}, function(data) {
$("#resultTable").html(data);
});
}
});
</script>
function refreshResults 有点棘手，因为我必须弄清楚如何从 javascript 函数调用控制器方法并通过它传递数据。我喜欢 stackOverflow！
然后我删除了@if(Model.Count > 0) 之外的所有内容，并将其放在我这样调用的局部视图中：
<div id="resultsDiv">
@{
Html.RenderPartial("_ResultsTable", @Model);
}
</div>
然后，在我的控制器中，我必须对事物进行排序：
public ActionResult DisplayCardsResults(int? _page, string _sortOrder, string _filter = "", string _searchValue = "")
{
ViewBag._searchValue = _searchValue;
ViewBag._filter = _filter;
if (Request.HttpMethod != "GET")
{
_page = 1;
}
int pageNumber = (_page ?? 1);
if (Request.IsAjaxRequest())
{
switch (_filter)
{
// The mListCardsToShow is an inner list I keep and it is different from the mListCards because of the where clause which flush the rest of the data.
case "cardRarity":
if (_searchValue == "All")
{
mListCardsToShow = mListCards.ToList();
}
else
{
mListCardsToShow.AddRange(mListCards.Where(_item => _item.mMasterCard.mCardRarity == _searchValue));
}
break;
case "cardType":
if (_searchValue == "All")
{
mListCardsToShow = mListCards.ToList();
}
else
{
mListCardsToShow.AddRange(mListCards.Where(_item => _item.mMasterCard.mCardType == _searchValue));
}
break;
case "cardColor":
if (_searchValue == "All")
{
mListCardsToShow = mListCards.ToList();
}
else
{
mListCardsToShow.AddRange(mListCards.Where(_item => _item.mMasterCard.mCardColor == _searchValue));
}
break;
default:
mListCardsToShow = mListCards.ToList();
break;
}
return PartialView("_ResultsTable", mListCardsToShow.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
}
return View(mListCards.ToPagedList(pageNumber, ValueDomain.PAGE_SIZE));
}
现在，我必须承认排序并不完美，例如，我需要考虑过滤器的每三个，但那是另一回事了。一切正常，我为此感到高兴！
【问题讨论】：
标签： c# jquery asp.net-mvc razor pagination