在单页面应用程序MVC中排序/筛选数据

时间:2012-05-11 04:12:40

标签: c# asp.net-mvc mvvm

我正在使用SPA MVC 4构建Web应用程序。我想知道是否有一些方法可以在MVVM中过滤和排序数据?我已经阅读了几个教程但没有工作。

http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

public ViewResult Index(string sortOrder, string searchString)
        {
            ViewBag.FirstNameSortParm = String.IsNullOrEmpty(sortOrder) ? "FirstName desc" : "";
            ViewBag.LastNameSortParm = sortOrder == "LastName" ? "LastName desc" : "LastName";

            using (DnaPatientTrackerEntities1 DptEntity = new DnaPatientTrackerEntities1())
            {
                var UserGroup = from s in DptEntity.Users
                                select s;

                if (!String.IsNullOrEmpty(searchString))
                {
                    UserGroup = UserGroup.Where(s => s.FirstName.ToUpper().Contains(searchString.ToUpper())
                                           || s.LastName.ToUpper().Contains(searchString.ToUpper()));
                }

                switch (sortOrder)
                {
                    case "FirstName desc":
                        UserGroup = UserGroup.OrderByDescending(s => s.FirstName);
                        break;
                    case "LastName":
                        UserGroup = UserGroup.OrderBy(s => s.LastName);
                        break;
                    case "LastName desc":
                        UserGroup = UserGroup.OrderByDescending(s => s.LastName);
                        break;
                    default:
                        UserGroup = UserGroup.OrderBy(s => s.FirstName);
                        break;
                }
                ViewBag.Users=UserGroup;
                return View();
            }

http://www.asp.net/single-page-application/spa-samples/sample-bigshelf-application/big-shelf-code

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

我在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>

0 个答案:

没有答案