Ajax 使用 Entity Framework 在 ASP.NET MVC 中搜索和分页

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

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

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

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

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>

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

Answer 2

根据您的解决方案，您应该将 _ListPartialView 放入 Individual view 文件夹，并创建一个 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 数据表。

Ajax 使用 Entity Framework 在 ASP.NET MVC 中搜索和分页

Ajax searching and paging in ASP.NET MVC using Entity Framework

ajax

asp.net-mvc

jquery

entity-framework

asp.net-mvc-partialview