在ASP.NET MVC中的Ajax视图上分页，排序，搜索 [英] Paging, sorting, searching on Ajax View in asp.net mvc

问题描述

我正在使用asp.net mvc 4& EF 6创建一个网站，我希望在该网站中使用填充表进行分页，排序和处理；通过Ajax过滤/搜索PartialView.到目前为止，分页，排序和搜索功能可以正常工作，但我无法将其提供给Ajax，因为该表只会更新而不是重新加载页面.这是我的代码，

I'm using asp.net mvc 4 & EF 6 to make a website where I want a populated table for paging, sorting & filtering/search on a PartialView by Ajax. So far paging, sorting & search functionalities are working fine but I can't get it to Ajax where the table will only update instead of page reloading. Here are my codes,

控制器

public PartialViewResult Flats(string sortOrder, string currentFilter, string strSearch, int? page)
{
    ViewBag.currentSort = sortOrder;
    if (strSearch != null)
    {
        page = 1;
    }
    else
    {
        strSearch = currentFilter;
    }
    ViewBag.CurrentFilter = strSearch;

    ViewBag.TitleSort = String.IsNullOrEmpty(sortOrder) ? "title_desc" : "";
    var FlatsOrder = from f in rentdb.FlatInfoes select f;
    if (!String.IsNullOrEmpty(strSearch))
    {
        FlatsOrder = FlatsOrder.Where(s => s.address_area.Contains(strSearch));
    }
    switch (sortOrder)
    {
        case "title_desc":
            FlatsOrder = FlatsOrder.OrderByDescending(a => a.title);
            break;
        default:
            FlatsOrder = FlatsOrder.OrderBy(a => a.title);
            break;
    }
    int pageSize = 5;
    int pageNumber = (page ?? 1);
    return PartialView(FlatsOrder.ToPagedList(pageNumber, pageSize));
}

查看

<div id="divTable" class="span12" style="background-color: #fff;">
    <table class="table table-hover">
        <thead style="background-color: #cccccc;">
            <tr>
                <th class="text-center">
                    @Ajax.ActionLink("Title", "Flats", new { sortOrder = ViewBag.TitleSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions() {
                                            HttpMethod = "GET",
                                            UpdateTargetId = "divTable",
                                            InsertionMode = InsertionMode.Replace
                                        })
                </th>
            </tr>
        </thead>
    </table>
</div>

每当我单击Title链接进行排序时，将重新加载整个页面，然后进行排序.我怎样才能通过ajax和partialview更新表?急需此帮助.谢谢.

Whenever I click the Title link for sorting, whole page reloads and then sort. How can I just update the table by ajax and partialview? Need this help badly. Thanks.

推荐答案

您必须制作一个包含如下PartialView的普通视图

You have to make a normal View which contains a PartialView like the following

查看

@model YourModelClass

@* some thing which will not effected when the Ajax request is done *@
@Html.Partial("_TablePartialView", Model)

部分视图，在这种情况下应命名为"_TablePartialView"，并且应存在于视图"文件夹中的共享"文件夹中.

Partial View which should named in this case as "_TablePartialView" and should exists in the "Shared" folder inside the "Views" folder.

@model YourModelClass

<div id="divTable" class="span12" style="background-color: #fff;">
  <table class="table table-hover">
    <thead style="background-color: #cccccc;">
        <tr>
            <th class="text-center">
                @Ajax.ActionLink("Title", "AjaxFlats", new { sortOrder = ViewBag.TitleSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions() {
                                        HttpMethod = "GET",
                                        UpdateTargetId = "divTable",
                                        InsertionMode = InsertionMode.Replace
                                    })
            </th>
        </tr>
    </thead>
  </table>
</div>

控制器

private YourModelClass GetModel(string sortOrder, string currentFilter, string strSearch, int? page)
{
   ViewBag.currentSort = sortOrder;
   if (strSearch != null)
   {
      page = 1;
   }
   else
   {
      strSearch = currentFilter;
   }
   ViewBag.CurrentFilter = strSearch;

   ViewBag.TitleSort = String.IsNullOrEmpty(sortOrder) ? "title_desc" : "";
   var FlatsOrder = from f in rentdb.FlatInfoes select f;
   if (!String.IsNullOrEmpty(strSearch))
   {
       FlatsOrder = FlatsOrder.Where(s => s.address_area.Contains(strSearch));
   }
   switch (sortOrder)
   {
      case "title_desc":
         FlatsOrder = FlatsOrder.OrderByDescending(a => a.title);
         break;
       default:
         FlatsOrder = FlatsOrder.OrderBy(a => a.title);
         break;
   }
   int pageSize = 5;
   int pageNumber = (page ?? 1);
   return FlatsOrder.ToPagedList(pageNumber, pageSize);

}

public ActionResult Flats(string sortOrder, string currentFilter, string strSearch, int? page)
{
     return View(GetModel(sortOrder, currentFilter, strSearch, page);
}

public ActionResult AjaxFlats(string sortOrder, string currentFilter, string strSearch, int? page)
{
     return PartialView("_TablePartialView", GetModel(sortOrder, currentFilter, strSearch, page);
}

这篇关于在ASP.NET MVC中的Ajax视图上分页，排序，搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！