c# - Sort/ Filter Data in Single Page Application MVC

Question

I am building a Web Application using SPA MVC 4. I wonder whether there are some ways to filter and sort data in MVVM? I have read several tutorial but not work.

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 });
    }

I found in KnockOut js home page that we can get a custom javascript function but when I tried to create my custom function for sorting/filtering, my index.cshtml got loading error. It automatically navigated to Editor view...

Please share with me if you have any ideas

Update:

I am using SPA MVC4 so my view includes: _Editor.cshtml, _Grid.cshtml, _Paging.cshtml, _Index.cshtml. I am working on _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>