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

Question

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

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

---

我的索引视图：

@{
    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/