У меня проблема в использовании jQuery ненавязчиво для поиска в. Net Core 3

Question

Я использовал для добавления Ajax .BeginForm в MVC5 с TargetedId, чтобы сделать функциональность для поиска с частичным просмотром без перезагрузки всей страницы. Поэтому, пожалуйста, мне нужна помощь, чтобы сделать это. 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
            }));

        var model = PagingList.Create(VMItems.AsQueryable().AsNoTracking().OrderByDescending(s => s.ItemsId), 20, page);

        var myViewData = new ViewDataDictionary(new EmptyModelMetadataProvider(), new ModelStateDictionary()) { Model = model };
        PartialViewResult result = new PartialViewResult()
        {
            ViewName = "_SearchPro",
            ViewData = myViewData,
        };

        return result;

вот мое частичное представление

в индексе я получаю продукты частично из

<form id="ProductsFilter" asp-controller="Store" asp-action="Index" method="get">
            <div class="col-lg-10 row">
                @Html.Partial("_SearchPro")
            </div>
        </form>

, но без те же css и bootstrap каждый продукт идет в ряд с 12 столбцами и скрыт, я вижу их только для проверки.

Answer 1

я уже изменил свой индексный вид на эти строки, но он тоже перезагрузил всю страницу

<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>

мне нужно заменить продукты с результатом фильтра только без перезагрузки всей страницы

Answer 2

Вот еще один способ использовать partial view для поиска в таблице без обновления страницы.

Используйте инструмент Nuget для загрузки X.PagedList.Mvc.Core, тогда вот полный пример:

HomeController:

using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication_core_mvc.Data;
using X.PagedList;

namespace WebApplication_core_mvc.Controllers
{
    public class HomeController : Controller
    {
        private readonly MyDbContext _context;
        public HomeController(MyDbContext context)
        {
            _context = context;
        }

        private int pageSize = 5;//set pagesize as you wanted
        public async Task<IActionResult> Test()
        {
            return View();
        }
        [HttpPost]
        public async Task<IActionResult> Test(string filter, int? page)
        {
            int selectedPage = page ?? 1;
            var teachers = await _context.Teachers.ToPagedListAsync(selectedPage, pageSize);
            if (!string.IsNullOrEmpty(filter))
            {
                teachers = await _context.Teachers.Where(x => x.Name.Contains(filter) || x.Id.ToString().Contains(filter)).ToPagedListAsync(selectedPage, pageSize);
            }
            return PartialView("_Table", teachers);
        }
    }
}

Test.cs html:

@{
    ViewData["Title"] = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
} 
@section Scripts{
    <script>
        $(function () {
            GetPartial("", 1);
            $("form").submit(function () {
                event.preventDefault();
                GetPartial($("#Text1").val(), 1);
            })
            $(document).on('click', '.pagination li a', function () {
                event.preventDefault();
                GetPartial($("#Text1").val(), $(this).text());
            });
        })
        function GetPartial(filter, page) {
            $.ajax({
                url: "/Home/Test",
                type: "POST",
                data: { filter: filter, page: page }
            })
                .done(function (partialViewResult) {
                    $("#table").html(partialViewResult);
                });
        }
    </script>

}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form method="post">
    Search:
    <input id="Text1" type="text" />
    <input id="Button1" type="submit" value="Search" />
    <div id="table"></div>
</form>

Создайте partial view named "_Table" в папке Home в представлениях и добавьте следующий код в это частичное представление:

@using X.PagedList.Mvc.Core;
@using X.PagedList;
@model IEnumerable<Teachers>;

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
            </tr>
        }
    </tbody>
</table>

@Html.PagedListPager((IPagedList)Model,
    page => Url.Action("Test", "Home", new { page = page }))

Вот результат:

Answer 3

Я рекомендую вам использовать jquery datatable для достижения этой функции, которая очень проста и легка в реализации.

Jquery datatable - это пакетный плагин. Он автоматически реализует функции пейджинга и фильтрации для вас и не приводит к обновлению страницы sh.

Пожалуйста, обратитесь к следующему примеру:

Сначала добавьте этот код в автозагрузку .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.cs html:

@{
    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>

Вот результат: