带有实体框架的ASP.NET MVC中的Ajax分页

Question

在堆栈溢出的大量帮助下，我能够创建CRUD操作并使用局部视图来呈现索引页以进行搜索，但现在我迷失了如何开始分页的方法。

为了搜索，我创建了一个searching.cshtml部分视图：

@model IEnumerable<SearchingMvcCrud.Models.Customer>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Department)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Department)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}

</table>

然后在我的[[index.cshtml中，我创建了一个ID为searching的div，并在其中调用了RenderPartial("_searching", Model)，并使用Ajax jQuery脚本更新了部分视图：

@using System.Web.Mvc;
@using SearchingMvcCrud.Models;

@model IEnumerable<SearchingMvcCrud.Models.Customer>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<p>
    @using (Html.BeginForm("Index", "Customer", FormMethod.Get))
    {
        <b>Search By:</b> @Html.RadioButton("searchBy", "Name",true) <text> Name </text>
        @Html.RadioButton("searchBy", "Department") <text>Department</text><br />
        @Html.TextBox("search") <input type="button" value="Search" id="Search" />
    }
</p>

<div id="searching">
    @{Html.RenderPartial("_searching", Model); }
</div>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script>
    $(document).ready(function () {
        $("#Search").click(function (e) {
            var searchBy = $("input[name='searchBy']:checked").val();
            var search = $("#search").val();

            alert(searchBy);
            debugger
            $.ajax({
                url: '/Customer/Searching',
                type: "post",
                data: { "searchBy": searchBy, "search": search },
                async: true,
                success: function (data) {
                    $("#searching").html(data);
                }
            })
        })
    })
</script>

我的控制器代码
using SearchingMvcCrud.Models;
using PagedList;

namespace SearchingMvcCrud.Controllers
{
    public class CustomerController : Controller
    {
        // GET: Search
        public PartialViewResult Searching(string searchBy, string search,)
        {
            DbModels dbModel = new DbModels();
            {

                if (searchBy == "Department")
                {
                    return PartialView("_searching",dbModel.Customers.Where(x => x.Department == search).ToList());
                }
                else if (searchBy == "Name")
                {
                    return PartialView("_searching",dbModel.Customers.Where(x => x.Name.StartsWith(search)).ToList());
                }
                else
                {
                    return PartialView("_searching",dbModel.Customers.ToList());
                }
            }
        }

        // GET: Customer
        public ActionResult Index()
        {
            DbModels dbModel = new DbModels();
            {
                return View(dbModel.Customers.ToList());
            }
        }
    }
}

我如何实现Ajax分页？
有人告诉我也使用相同的方法进行分页，但是如何？

Answer 1

您可以重写如下的搜索方法。

public PartialViewResult Searching(string searchBy, string search, int pageNumber = 1)
    {

     int limit = 10;// your can set this value in AppSettings and fetch from there. You can set any limit you want like 10, 15 or 20 etc.
     int seed = limit * pageNumber;
        DbModels dbModel = new DbModels();
        {
            var result = null;
            if (searchBy == "Department")
            {
                result = dbModel.Customers.Where(x => x.Department == search).ToList();
            }
            else if (searchBy == "Name")
            {
                result = dbModel.Customers.Where(x => x.Name.StartsWith(search)).ToList();
            }
          else
          {
            result = dbModel.Customers.ToList();
           }

          return PartialView("_searching", result.GetRange(seed-limit, seed-1));

        }
    }

并且在进行AJAX调用时，您可以像下面那样在url中传递页码。例如，获取第二页。
'/客户/搜索/ 2'
然后您需要使用replaceWith（）替换#searching容器中的html。