带有实体框架的 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。