Jquery 基于实体框架的ASP.NET MVC中的Ajax分页

在堆栈溢出的大量帮助下，我能够创建CRUD操作，并使用部分视图呈现索引页进行搜索，但现在我不知道如何开始分页

为了进行搜索，我创建了search.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>

@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分页

---

有人告诉我也要用同样的方法进行分页，但怎么做呢？

你可以像下面这样重写搜索方法

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中传递页码，如下所示。例如，获取第二页

“/Customer/search/2”

---

然后，您需要使用replaceWith（）替换#search container中的html。

如果您正在查找分页，则将页码也作为参数发送给search method。根据页码，您可以从列表中筛选一个范围并将其传递给视图。您可以共享一些代码来实现它吗？