使用实体框架在 ASP.NET MVC 中进行 Ajax 搜索和分页

Question

我能够使用 Entity Framework 在 ASP.NET MVC 中通过搜索和分页创建 CRUD 操作，现在我想使用 Ajax 进行搜索和分页。

创建它的步骤是什么？

这是我的代码：

客户控制器

using MvcCRUDSearching.Models;
using PagedList;

namespace MvcCRUDSearching.Controllers
{
    public class CustomerController : Controller
    {
        // GET: Customer
        public ActionResult Index(string searchBy, string searchString, int? page)
        {
            using (DbModels dbModel = new DbModels())
            {
                if (searchBy == "Department")
                {
                    IPagedList<Customer> dep = dbModel.Customers.Where(x => x.Department == searchString || searchString == null).ToList().ToPagedList(page ?? 1, 2);
                    return View(dep);
                }
                else if (searchBy == "Name")
                {
                    IPagedList<Customer>  nam = dbModel.Customers.Where(y => y.Name.StartsWith(searchString) || searchString == null).ToList().ToPagedList(page ?? 1, 2);
                    return View(nam);
                }
                else
                {
                    return View(dbModel.Customers.ToList().ToPagedList(page ?? 1, 2));
                }
            }
        }
    }
}

Index.cshtml

@using MvcCRUDSearching.Models;
@using PagedList.Mvc;
@using PagedList;
@model IPagedList<MvcCRUDSearching.Models.Customer>

@{
    ViewBag.Title = "Index";
}

<div id="div1">
    <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>
            @Html.TextBox("searchString") <input type="submit" value="Search" class="btn" />
        }
    </p>

    <table class="table">
        <tr>
            <th>
                Name
            </th>
            <th>
                Department
            </th>
            <th>Action</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>
    @Html.PagedListPager(Model, page => Url.Action("Index", new { page, searchBy = Request.QueryString["searchBy"], search = Request.QueryString["searchBy"] }))
</div>

我只知道我需要一个局部视图，但是我应该把它放在什么地方？

~/Views/Shared

或

~/Views/Customer

很抱歉问了这么长的问题，但我有点绿。

Answer 1

根据您的解决方案，您应该将 _ListPartialView 放入个人视图文件夹，并创建一个 ListItemViewModel

public class ListItemViewModel
{
  public string ID{get;set;}
  public string Name{get;set;}
  public string DepartName{get;set;}
}

然后尝试构建_ListPartialView，

@model IList<ListItemViewModel>
<!---->
<table class="table">
    <tr>
        <th>
            Name
        </th>
        <th>
            Department
        </th>
        <th>Action</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                item.Name
            </td>
            <td>
                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>

之后在主页中使用 ajax 调用来加载部分视图。

或者你可以试试 jQuery 数据表。

Answer 2

不完全确定这是否会对您有所帮助，但似乎与您正在采取的方法有所不同。

我最近构建了类似的东西并使用了DataTables

一旦用户提供了数据搜索，您就可以进行简单的 ajax 调用，然后重新填充表格：

JS：

var data = JSON.stringify({
                'Searchby': '',
                'SearchString': ''
            })
$.ajax({
            type: 'POST',
            url: '/Cutomers/GetCustomers',
            data: data,
            contentType: 'application/json',
            dataType: 'json',
            success: function (result) {
                var table = $('#TableID').DataTable();
                table.destroy();
                var table = $('#TableID').DataTable({
                    responsive: true,
                    "scrollY":true,
                    "scrollX":true,
                    "data": result,
                    "columns": [
                        { "data": "Name" },
                        { "data": "Department" },

                    ]


                });
                $('#divResults').show();



            }

HTML：

<div class="centerContainer">
<div class="main row">
    <div id="divResults">
        <table id="TableID" class="table">
            <thead>
                <tr>

                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="table"></tbody>
        </table>

    </div>


</div>

这可能不是最佳做法，但它的效果非常好，并且可以为您处理分页。