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

Question

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

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

现在我想添加排序和搜索功能。 和Paging也一样。

快照： - > 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); 




       } 

---

我的索引视图：

 

@{ 
    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添加排序和搜索功能？

任何帮助将受到热烈的赞赏。 谢谢。

Answer 1

虽然这是一种不同类型的答案，我会看看jqGrid。这是一个jQuery插件，可以帮助您对表格数据进行分页，排序和搜索。

http://www.trirand.com/blog/