MVC:分页阻碍了列表的排序方式

我正在构建一个MVC应用程序，我正在寻找一种在视图中进行分页的有效方法。

到目前为止，我已经安装了以下寻呼系统。然而，如果这个分页系统运行良好，它就有一个缺陷：视图中显示的列表不是完整的列表，而是用户根据页码查看列表的哪个部分。缺陷在于，如果我使用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));
}

现在，我必须承认，排序并不完美，比如，我需要考虑过滤器的每三个，但那是另一回事。一切顺利，我为此感到高兴！