使用實體框架在 ASP.NET MVC 中進行 Ajax 搜索和分頁

Question

我能夠使用實體框架在 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));
                }
            }
        }
    }
}

索引.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 調用，然后重新填充表：

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 放入個人視圖文件夾，並創建一個 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 數據表。