Question

我已经使用Razor视图实现了“Contact Management ASP.NET MVC Application”。

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

现在我想添加排序和搜索功能。并且也在分页。

快照： - ＆gt; 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/

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

1 个答案: