Question

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

创建它的步骤是什么？

这是我的代码：

CustomerController

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调用，然后重新填充表：

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数据表。

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

2 个答案: