在联系人管理ASP中增加排序和搜索功能.. NET MVC应用程序

我已经实现了"联系人管理ASP。. NET MVC应用程序"与Razor视图。

http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs

现在我想添加排序和搜索功能。还有分页

快照:->http://www.freeimagehosting.net/daf63

我想在"绿色框"内显示排序和搜索的结果，通过点击排序链接和搜索按钮。

我需要执行哪些更改?

我当前的索引控制器:

<>之前 public ActionResult Index(int? id, string sortorder, string searchstring) { ViewBag.CurrentSort = sortorder; ViewBag.disp = n2; ViewBag.NameSortParm = String.IsNullOrEmpty(sortorder) ? "Namedesc" : " "; ViewBag.NameSortParma = String.IsNullOrEmpty(sortorder) ? "Nameasc" : " "; ViewBag.NameSortParmb = String.IsNullOrEmpty(sortorder) ? "Namedescx" : " "; ViewBag.NameSortParmc = String.IsNullOrEmpty(sortorder) ? "Nameascx" : " "; if (sortorder != null || searchstring != null) { var matches = cmu.Contacts.Where(a => a.GroupId == (int)id); var contacts = from s in matches select s; if (!String.IsNullOrEmpty(searchstring)) { contacts = contacts.Where(s => s.FirstName.ToUpper().Contains(searchstring.ToUpper()) || s.LastName.ToUpper().Contains(searchstring.ToUpper())); } switch (sortorder) { case "Namedesc": contacts = contacts.OrderByDescending(s => s.FirstName); break; case "Nameasc": contacts = contacts.OrderBy(s => s.FirstName); break; case "Namedescx": contacts = contacts.OrderByDescending(s => s.LastName); break; case "Nameascx": contacts = contacts.OrderBy(s => s.LastName); break; } return PartialView("SearchSort", contacts.ToList()); } // Get selected group var selectedGroup = _service.GetGroup(id); if (selectedGroup == null) return RedirectToAction("Index", "Group"); // Normal Request if (!Request.IsAjaxRequest()) { var model = new IndexModel { Groups = _service.ListGroups(), SelectedGroup = selectedGroup }; return View("Index", model); } return PartialView("ContactList", selectedGroup); }

---

My Index View:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model New_Contact_Manager_with_Razor_View.Models.Validation.IndexModel
@using New_Contact_Manager_with_Razor_View.Helpers

<style type = "text/css">
  #gallery {
                border: 0.5px solid #1D0C16;
                height: 150;
                width: 150px;
                display:inline-table; 
                border-spacing : 5px;
                margin-bottom:5px;
                border-style:outset;
            }

</style>
<style type="text/css">
h1, h2, h3, h4, h5, h6, h7 {color:black}
</style>`
  <script type="text/javascript">
      function Showtdata(item) {
          var elements = document.getElementsByClassName(item);
          for (var i = 0, length = elements.length; i < length; i++) {
              elements[i].style.visibility = "visible";
              elements[i].style.display = "block";

          }
      }
      function Cleartdata(item) {
          var elements = document.getElementsByClassName(item);
          for (var i = 0, length = elements.length; i < length; i++) {
              elements[i].style.visibility = "hidden";
              elements[i].style.display = "none";
          }
      }

</script>  
<script type="text/javascript">
    var _currentGroupId = -1;
    Sys.Application.add_init(pageInit);
    function pageInit() {
        // Enable history
        Sys.Application.set_enableHistory(true);
        // Add Handler for history
        Sys.Application.add_navigate(navigate);
    }
    function navigate(sender, e) {
        // Get groupId from address bar
        var groupId = e.get_state().groupId;
        // If groupId != currentGroupId then navigate
        if (groupId != _currentGroupId) {
            _currentGroupId = groupId;
            $("#divContactList").load("/Contact/Index/" + groupId);
            selectGroup(groupId);
        }
    }
    function selectGroup(groupId) {
        $('#leftColumn li').removeClass('selected');
        if (groupId)
            $('a[groupid=' + groupId + ']').parent().addClass('selected');
        else
            $('#leftColumn li:first').addClass('selected');
    }
    function beginContactList(args) {
        // Highlight selected group
        _currentGroupId = this.getAttribute("groupid");
        selectGroup(_currentGroupId);
        // Add history point
        Sys.Application.addHistoryPoint({ "groupId": _currentGroupId });
        // Animate
        $('#divContactList').fadeOut('normal');
    }
    function successContactList() {
        // Animate
        $('#divContactList').fadeIn('normal');
    }
    function failureContactList() {
        alert("Could not retrieve contacts.");
    }
</script>
@using New_Contact_Manager_with_Razor_View.Helpers
@{
    ViewBag.Title = "Contacts";
}
<table>
<tr>
<td>
<h3>
<form>
<table>
<tr>
<td>
Display-> &nbsp &nbsp &nbsp        
<input type = "radio" value = "Display " name = "display" onclick= Showtdata("HD") /> 
</td>
</tr>
<tr>
<td>
Not Display->
<input type = "radio" value = "Not Display " name= "display" onclick= Cleartdata("HD") />
</td>
</tr>
</table>

</form>
</h3>
</td>
<td>
&nbsp &nbsp &nbsp &nbsp
</td>
<td>
<b><strong>Sort :~> </strong></b>
<table>
<tr>
<td>
@Html.ActionLink("First Name Desc", "Index", new { sortorder = ViewBag.NameSortParm })
</td>
</tr>
<tr>
<td>
@Html.ActionLink("First Name", "Index", new { sortorder = ViewBag.NameSortParma })
</td>
</tr>
<tr>
<td>
@Html.ActionLink("Last Name desc", "Index", new { sortorder = ViewBag.NameSortParmb })
</td>
</tr>
<tr>
<td>
@Html.ActionLink("Last Name", "Index", new { sortorder = ViewBag.NameSortParmc })
</td>
</tr>
</table>
</td>
<td>
&nbsp &nbsp &nbsp
</td>
<td>
@using (Html.BeginForm())
{ 
<p>
<b>Find by name:</b> @Html.TextBox("searchstring")
<input type="submit" value = "search" /> 
</p>
}
</td>
</tr>
</table>
<ul id="leftColumn">
@foreach (var item in Model.Groups)
{ 
 <li @Html.Selected(item.Id, Model.SelectedGroup.Id) >
    @Ajax.ActionLink(item.Name, "Index", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "divContactList", OnBegin = "beginContactList", OnSuccess = "successContactList", OnFailure = "failureContactList" }, new { groupid = item.Id })
    </li>
}
</ul>
<div id="divContactList"  >
    @Html.Partial("ContactList", Model.SelectedGroup)

</div>


<div class="divContactList-bottom">&nbsp;</div>
是否有可能通过AJAX或JavaScript添加排序和搜索功能?
任何帮助都将衷心感谢。谢谢你。