C# MVC：分页妨碍了列表的排序方式
我正在构建一个MVC应用程序，我正在寻找一种在我的视图中进行分页的有效方法 到目前为止，我已经安装了寻呼系统。但是，如果这个分页系统工作正常，它就有一个缺陷：视图中显示的列表不是完整列表，而是用户根据页码查看的列表的哪一部分。缺陷在于，如果我使用jQuery系统对项目进行排序，它将只对当前页面中的项目进行排序，而不会对总列表进行排序 请允许我说明我的意思。说我有这样的观点：C# MVC：分页妨碍了列表的排序方式,c#,jquery,asp.net-mvc,razor,pagination,C#,Jquery,Asp.net Mvc,Razor,Pagination,我正在构建一个MVC应用程序，我正在寻找一种在我的视图中进行分页的有效方法 到目前为止，我已经安装了寻呼系统。但是，如果这个分页系统工作正常，它就有一个缺陷：视图中显示的列表不是完整列表，而是用户根据页码查看的列表的哪一部分。缺陷在于，如果我使用jQuery系统对项目进行排序，它将只对当前页面中的项目进行排序，而不会对总列表进行排序 请允许我说明我的意思。说我有这样的观点： @using MyApp.Models @model PagedList.IPagedList<MyApp.Util
@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>
}
}
函数refreshResults@if（Model.Count>0）<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>
<div id="resultsDiv">
@{
Html.RenderPartial("_ResultsTable", @Model);
}
</div>
现在，我必须承认排序并不完美，比如，我需要考虑过滤器的每三个，但这是另一回事。一切顺利，我为此感到高兴 如果有很多值，加载整个列表通常不是一个好主意。在您的情况下，虽然50条记录并不多，但通常不是一个有效的设计。 看看下面的文章 Mvc还有一个WebGrid开箱即用，通常适用于此类场景。 可能适合你的需要
希望有帮助。如果你有很多价值观，那么加载整个列表通常不是一个好主意。在您的情况下，虽然50条记录并不多，但通常不是一个有效的设计。 看看下面的文章 Mvc还有一个WebGrid开箱即用，通常适用于此类场景。 可能适合你的需要
希望它能有所帮助。这听起来确实像是AJAX可以帮助解决您的问题并使事情变得更加优雅的东西——值得做一些研究。现在，每当用户单击其中一个链接时，都需要重新加载整个页面，以便在表中获得下一页的数据。您可以在需要时动态更新表 查看文档-在传递给服务器的URL中可以设置过滤器（分页和排序），在成功处理程序中可以更新表中的值。也不要被JSON这个术语吓倒，它只是一个主要由js使用的数据存储术语，您可以在控制器上设置一个操作，该操作将返回JSON中的信息，这些信息将在AJAX成功处理程序中处理
PS:Yay MtG，祝你好运：）这听起来确实像是AJAX可以帮助你解决问题，让事情变得更优雅的东西——值得做一些研究。现在，每当用户单击其中一个链接时，都需要重新加载整个页面，以便在表中获得下一页的数据。您可以在需要时动态更新表 查看文档-在传递给服务器的URL中可以设置过滤器（分页和排序），在成功处理程序中可以更新表中的值。也不要被JSON这个术语吓倒，它只是一个主要由js使用的数据存储术语，您可以在控制器上设置一个操作，该操作将返回JSON中的信息，这些信息将在AJAX成功处理程序中处理
PS:Yay MtG，祝你好运：）+1泰勒。AJAX是我能想到的唯一优雅的方式。您必须在每次更改下拉列表时将页面提交到服务器，这样您将获得数据，但在没有AJAX的情况下，您的页面每次都会刷新 编辑： 这就是使用ajax的方法 这是你的观点
@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();
refreshResults(($(this).attr("id")),showCardRarity );
});
$('#cardType').change(function() {
var showCardType = $(this).val();
refreshResults(($(this).attr("id")),showCardRarity );
});
$('#cardColor').change(function() {
var showCardColor = $(this).val();
refreshResults(($(this).attr("id")),showCardRarity );
});
function refreshResults(filter, value){
$.get("YourController/DisplayCardsResults",
{
_page = 1,
_sortOrder = ViewBag._currentSort,
_filter = filter,
_searchValue = value
},
function (data{
$("#resultsDiv").html(data);
}
});
</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>
}
<div id="resultsDiv">
@Html.RenderPartial("_ResultsTable",@Model)
<div>
+泰勒一个。AJAX是我能想到的唯一优雅的方式。您必须在每次更改下拉列表时将页面提交到服务器，这样您将获得数据，但在没有AJAX的情况下，您的页面每次都会刷新 编辑： 这就是使用ajax的方法 这是你的观点
@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();
refreshResults(($(this).attr("id")),showCardRarity );
});
$('#cardType').change(function() {
var showCardType = $(this).val();
refreshResults(($(this).attr("id")),showCardRarity );
});
$('#cardColor').change(function() {
var showCardColor = $(this).val();
refreshResults(($(this).attr("id")),showCardRarity );
});
function refreshResults(filter, value){
$.get("YourController/DisplayCardsResults",
{
_page = 1,
_sortOrder = ViewBag._currentSort,
_filter = filter,
_searchValue = value
},
function (data{
$("#resultsDiv").html(data);
}
});
</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>
}
<div id="resultsDiv">
@Html.RenderPartial("_ResultsTable",@Model)
<div>
我想试试Ajax！但是我不确定我怎么能做到这一点。我想尝试一下Ajax！但我不确定我如何做到这一点。正如我提到的，我确实认为这将是一个有趣的想法，但我没有关于如何做到这一点的线索，因为我不知道它的存在…：在我的编辑中，我添加了一个使用AJAX进行编辑的方法，但是在加载页面时，您可能需要一个进度条，以便用户知道正在刷新表。我确实理解您试图让我做什么，我对此表示感谢。唯一的问题是，您包含的javascript包含很多错误，不能以这种方式编写。我正在努力使它工作，所以如果你不介意检查一下，那就太好了。：）至于进度条，这也是我需要做的事情，但我不知道怎么做。是函数refreshResults似乎不正确。我的观点中出现了许多错误。正如我提到的，我确实认为这是一个有趣的想法，但我没有关于如何做到这一点的线索，因为我不知道它的存在…：在我的编辑中，我添加了一个使用AJAX进行编辑的方法，但是在加载页面时，您可能需要一个进度条，以便用户知道正在刷新表。我确实理解您试图让我做什么，我对此表示感谢。唯一的问题是，您包含的javascript包含很多错误，不能以这种方式编写。我正在努力使它工作，所以如果你不介意检查一下，那就太好了。：）至于进度条，这也是我需要做的事情，但我不知道怎么做。是函数refreshResults似乎不正确。在我看来，许多错误正在出现。
@using MyApp.Models
@model PagedList.IPagedList<MyApp.Utilities.CardDisplay>
@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, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
@Html.Raw(" ")
@Html.ActionLink("< Prev", "DisplayCardsResults", new { _page = Model.PageNumber - 1, _sortOrder = ViewBag._currentSort, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
}
else
{
@:<<
@Html.Raw(" ");
@:< Prev
}
@if (Model.HasNextPage)
{
@Html.ActionLink("Next >", "DisplayCardsResults", new { _page = Model.PageNumber + 1, _sortOrder = ViewBag._currentSort, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
@Html.Raw(" ")
@Html.ActionLink(">>", "DisplayCardsResults", new { _page = Model.PageCount, _sortOrder = ViewBag._currentSort, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
}
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, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
@Html.Raw(" ")
@Html.ActionLink("< Prev", "DisplayCardsResults", new { _page = Model.PageNumber - 1, _sortOrder = ViewBag._currentSort, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
}
else
{
@:<<
@Html.Raw(" ");
@:< Prev
}
@if (Model.HasNextPage)
{
@Html.ActionLink("Next >", "DisplayCardsResults", new { _page = Model.PageNumber + 1, _sortOrder = ViewBag._currentSort, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
@Html.Raw(" ")
@Html.ActionLink(">>", "DisplayCardsResults", new { _page = Model.PageCount, _sortOrder = ViewBag._currentSort, _filter = ViewBag._filter, _searchValue = ViewBag._searchValue })
}
else
{
@:Next >
@Html.Raw(" ")
@:>>
}
</div>
}
}
public ActionResult DisplayCardsResults(int _page, string _sortOrder, string _filter = "", string _searchValue = "")
{
ViewBag._filter = _filter;
ViewBag._searchValue= _searchValue;
//Do whatever you are doing to get the cards but to the resultant collection add the following where condition, suppose the collection is in var cards
switch (_filter)
{
case "cardRarity":
cards = cards.Where(s => s.CardRarity == _searchValue);
break;
case "cardType":
cards = cards.Where(s => s.CardType == _searchValue);
break;
case "cardColor":
cards = cards.Where(s => s.CardColor == _searchValue);
break;
default:
// no filter
break;
}
if(Request.isAjaxRequest)
return PartialView("_ResultsTable",cards);
return View(cards);
}