在使用jQuery时，在.Net Core 3中搜索时不成问题

Question

i曾经在MVC5中使用TargetedId添加Ajax.BeginForm，以使部分视图搜索功能无需重新加载整个页面因此，我需要帮助才能使其在.Net Core 3中不可用这是我的控制器索引和过滤器操作

// GET: Store
        public async Task<IActionResult> Index(List<int> categorySearch, int page = 1)
        {
            var items = await _context.ItEntity.Include(i => i.CaRelation).Include(i => i.FaRelation).Include(i => i.ITImages).ToListAsync();
            var VMItems = new List<ShopVM>();
            items.ForEach(it => VMItems.Add(new ShopVM
            {
                ItemsId = it.Id,
                ITName = it.ITName,
                Description = it.Description,
                CaRelation = it.CaRelation,
                CategoryId = it.CategoryId,
                FaRelation = it.FaRelation,
                FactoryId = it.FactoryId,
                Image = it.ITImages.FirstOrDefault().ImName
            }));
            ViewBag.categoryList = _context.CatEntity.Select(p => new Category
            {
                Id = p.Id,
                CaName = p.CaName,
                IsSelect = categorySearch.Count == 0 ? false : categorySearch.Contains(p.Id)
            });
            var model = PagingList.Create(VMItems.AsQueryable().AsNoTracking().OrderByDescending(s => s.ItemsId), 20, page);
            return View(model);
        }


        // GET: Filter
        [HttpGet]
        public async Task<PartialViewResult> Filter(List<int> categorySearch, int page = 1)
        {
            var items = await _context.ItEntity.Include(i => i.CaRelation).Include(i => i.FaRelation).Include(i => i.ITImages)
                .Where(x => categorySearch.Contains(x.CategoryId) || categorySearch.Count == 0).ToListAsync();
            var VMItems = new List<ShopVM>();
            items.ForEach(it => VMItems.Add(new ShopVM
            {
                ItemsId = it.Id,
                ITName = it.ITName,
                Description = it.Description,
                CaRelation = it.CaRelation,
                CategoryId = it.CategoryId,
                FaRelation = it.FaRelation,
                FactoryId = it.FactoryId,
                Image = it.ITImages.FirstOrDefault().ImName
            }));
            ViewBag.categoryList = _context.CatEntity.Select(p => new Category
            {
                Id = p.Id,
                CaName = p.CaName,
                IsSelect = categorySearch.Count == 0 ? false : categorySearch.Contains(p.Id)
            });
            var model = PagingList.Create(VMItems.AsQueryable().AsNoTracking().OrderByDescending(s => s.ItemsId), 20, page);
            return PartialView("_SearchPro",model);
        }

这是我的视图索引，也是局部的

    <section class="ftco-section ftco-animate bg-light">
    <div class="container-fluid">
        <form asp-action="Filter" method="get">
            <div id="li-search" style="float:right; padding-bottom:5px; background: lightpink; border-radius: 25px;" class="col-lg-2">
                <div class="sidebar-categories">
                    <div style="color:black; text-align: center; font-size: x-large; font-weight: 600;" class="head"> الفئات</div>
                    <hr />
                    <div action="#">
                        <ul style="text-align:right;direction: rtl; margin-right: -30px; list-style:none;">
                            @foreach (var item in ViewBag.categoryList)
                            {
                                <li style="list-style:none; padding:0; display:block;" class="filter-list">
                                    <input class="custom-checkbox " type="checkbox" checked="@item.IsSelect" value="@item.Id" name="CategorySearch"><label style="color:grey; margin-right:4px" ;>@item.CaName</label>
                                </li>
                            }
                        </ul>
                        <input id="btn-search" type="submit" class="btn btn-dark btn-lg" value="بحث" style="display:block; border:solid 1px white; margin:auto; color:pink;" />
                    </div>
                </div>
            </div>
        </form>


        <form asp-controller="Store" asp-action="Index" method="get">
            <div class="col-lg-10 row">
                @foreach (var item in Model)
                {
                    <div class="col-sm-12 col-md-6 col-lg-3 ftco-animate">
                        <div class="product">
                            @if (item.Image != null)
                            {
                                <a asp-controller="Main" asp-action="Product" asp-route-id="@item.ItemsId" class="text-center img-thumbnail img-prod"><img class="img-fluid img-rounded" style="height:300px; cursor:pointer;" src="~/Images/@item.Image" /></a>
                            }
                            <div class="text py-2 px-3">
                                <a asp-controller="Main" asp-action="Product" asp-route-id="@item.ItemsId"><h3 style="width:100%; text-align:center;" id="itemname" class="font-weight-bold">@item.ITName</h3></a>
                                <div class="d-flex">
                                    <div style="width:100%; text-align:center;" class="pricing">
                                        <p style="width:100%; text-align:center;" class=" font-weight-bold price"><span>@item.FaRelation.FaName</span></p>
                                    </div>
                                </div>
                                <hr>
                                <p class="bottom-area d-flex">
                                    <a href="#" class=" font-weight-bold add-to-cart"><span>@item.CaRelation.CaName<i class="ion-ios-add ml-1"></i></span></a>
                                </p>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </form>
    </div>
</section>

所以请提供任何帮助以使其达到目标，但没有结果。

Answer 1

我建议您使用jquery datatable实现此功能，该功能非常简单且易于实现。

Jquery datatable是一个打包的插件。它会自动为您实现分页和筛选功能，并且不会导致页面刷新。

请参考以下示例：

首先，将此代码添加到startup.cs ConfigureServices方法：

 services.AddControllersWithViews().AddJsonOptions(options =>
            {
                options.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());
                options.JsonSerializerOptions.PropertyNamingPolicy = null;
            });

HomeController.cs：

public class HomeController: Controller
{
    private readonly MyDbContext _context;
    public HomeController(MyDbContext context)
    {
        _context = context;
    }
    public async Task<IActionResult> Index()
    {
        return View();
    }
    [HttpPost]
    public async Task<IActionResult> GetData()
    {
        var teachers = await _context.Teachers.ToListAsync();
        return Json(new { data = teachers });
    }
}

Index.cshtml：

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>
@section Scripts{ 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
            var mytable = $('#example').DataTable({
                "ajax": {
                    "url": '/Home/GetData',
                    "type": "post",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Id", "autoWidth": true },
                    { "data": "Name", "autoWidth": true },
                ]
            })
    </script>
}
<div class="container">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

这里是结果：

Answer 2

我已经将索引视图更改为此行，但它也重新加载了整个页面

<form asp-controller="Store" asp-action="Filter" data-ajax="true" data-ajax-update="#ProductsFilter" data-ajax-mode="replace" data-ajax-method="post">
..................
</form>

<form id="ProductsFilter" asp-controller="Store" asp-action="Index" method="get">
                .................

</form>

这是我的布局脚本

<script src='@Url.Content("~/lib/jquery.js")'></script>
<script src='@Url.Content("~/lib/jquery.unobtrusive-ajax.min.js")'></script>
<script src='@Url.Content("~/lib/jquery.validate.unobtrusive.js")'></script>
<script src='@Url.Content("~/lib/jquery-validation/dist/jquery.validate.js")'></script>

我只需要用过滤器结果替换产品，而无需重新加载整个页面