C# 单页应用程序MVC中的排序/筛选数据

我正在使用SPAMVC4构建一个Web应用程序。我想知道是否有一些方法可以过滤和排序MVVM中的数据？我已经读了好几篇教程，但都没读过

我在KnockOut js主页中发现，我们可以获得一个自定义javascript函数，但当我尝试创建用于排序/筛选的自定义函数时，我的index.cshtml出现了加载错误。它自动导航到编辑器视图

如果你有任何想法，请与我分享

更新：

我使用SPA MVC4，因此我的视图包括：_Editor.cshtml、_Grid.cshtml、_Paging.cshtml、_Index.cshtml。我正在研究_Grid.cshtml

_Grid.cshtml：

<h2>Users (<span data-bind="text: users().length"></span>)</h2>

@using (Html.BeginForm())
{
    <p>
        Find by name: @Html.TextBox("SearchString")  
        <input type="submit" value="Search" /></p>
}
<tr>
    <th></th>
    <th>
        @Html.ActionLink("First Name", "Index", new { sortOrder = ViewBag.FirstNameSortParm })
    </th>   
    <th>
        @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.LastNameSortParm })
    </th>
</tr>
<p><a href="#" data-bind="click: sortUserByFirstName">LastName</a></p>
<table>
    <thead>
        <tr>
             <th>UserID</th>
             <th>CreatedDate</th>
             <th>UpdatedDate</th>
             <th>FirstName</th>
             <th>MiddleName</th>
             <th>LastName</th>             
             <th>Status</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: users">
    @*<tr><a href="#" data-bind="text: text, 
                   click: $parent.selectSortOption,
                   css: { selected: $parent.nav.params().sort == id }">Sort</a></tr>*@
        <tr data-bind="css: { added: IsAdded, updated: IsUpdated, deleted: IsDeleted, error: EntityError }">
            <td data-bind="text: UserID"></td>
            <td data-bind="text: CreatedDate"></td>
            <td data-bind="text: UpdatedDate"></td>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: MiddleName"></td>
            <td data-bind="text: LastName"></td>            
            <td data-bind="text: StatusText"></td>
            <td><a href="#" data-bind="click: $parent.openEditor">Edit</a></td>
        </tr>
    </tbody>
</table>

<p><a href="#" data-bind="click: createUser">Create new</a></p>
<button data-bind="click: saveAll">Save all</button>
<button data-bind="click: revertAll">Revert all</button>

用户（）
@使用（Html.BeginForm（））
{

按名称查找：@Html.TextBox（“搜索字符串”）

}
@ActionLink（“名字”，“索引”，新的{sortOrder=ViewBag.FirstNameSortParm}）
@ActionLink（“姓氏”，“索引”，new{sortOrder=ViewBag.LastNameSortParm}）

用户ID
创建数据
更新日期
名字
中间名
姓氏
地位
@**@

拯救一切
全部恢复

你能解释一下什么不适合你吗？作为一般建议，我将在控制器端执行查询，而不是让视图执行查询，因此ViewBag.Users=UserGroup变为ViewBag.Users=UserGroup.ToList（），我不知道。。。当我调试时，它似乎是好的。。。我可以在VS的监视窗口中按姓氏或姓氏查看订单数据列表，但在我的浏览器中没有任何更改（我按F5）。。。可能是MVVM模型引起的？你也可以发布你的视图吗？我已经发布了我的_Grid.cshtml视图页面。。。再次提醒一下：我使用MVVM模型的单页应用程序。。。谢谢您的页面中包含哪些.js文件？确保jquery.unobtrusive-ajax.js是可用的。

  self.selectSortOption = function (users) {
        self.nav.navigate({ sort: users.LastName, page: 1 });
    }

<h2>Users (<span data-bind="text: users().length"></span>)</h2>

@using (Html.BeginForm())
{
    <p>
        Find by name: @Html.TextBox("SearchString")  
        <input type="submit" value="Search" /></p>
}
<tr>
    <th></th>
    <th>
        @Html.ActionLink("First Name", "Index", new { sortOrder = ViewBag.FirstNameSortParm })
    </th>   
    <th>
        @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.LastNameSortParm })
    </th>
</tr>
<p><a href="#" data-bind="click: sortUserByFirstName">LastName</a></p>
<table>
    <thead>
        <tr>
             <th>UserID</th>
             <th>CreatedDate</th>
             <th>UpdatedDate</th>
             <th>FirstName</th>
             <th>MiddleName</th>
             <th>LastName</th>             
             <th>Status</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: users">
    @*<tr><a href="#" data-bind="text: text, 
                   click: $parent.selectSortOption,
                   css: { selected: $parent.nav.params().sort == id }">Sort</a></tr>*@
        <tr data-bind="css: { added: IsAdded, updated: IsUpdated, deleted: IsDeleted, error: EntityError }">
            <td data-bind="text: UserID"></td>
            <td data-bind="text: CreatedDate"></td>
            <td data-bind="text: UpdatedDate"></td>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: MiddleName"></td>
            <td data-bind="text: LastName"></td>            
            <td data-bind="text: StatusText"></td>
            <td><a href="#" data-bind="click: $parent.openEditor">Edit</a></td>
        </tr>
    </tbody>
</table>

<p><a href="#" data-bind="click: createUser">Create new</a></p>
<button data-bind="click: saveAll">Save all</button>
<button data-bind="click: revertAll">Revert all</button>