Как отфильтровать товар без перезагрузки страницы в ASP.NET Core 6 ⇐ C#

[Anonymous]

Я пытаюсь отфильтровать данные о продукте по бренду, когда человек находится на странице категории продукта. Здесь отображается категория продукта. Итак, я хочу сделать фильтр по брендам на боковой панели слева. Я использую ajax, поэтому страницу нельзя перезагружать каждый раз, когда пользователь выбирает кнопку бренда.
Вот код:

Код: Выделить всё

@{
ViewData["Title"] = "ProductCategory";
Layout = "~/Views/Layout/_CategoryLayout.cshtml";
}
@{
IEnumerable categories = ViewBag.Categories as IEnumerable;
IEnumerable
brands = ViewBag.Brand as IEnumerable
;
string currentUrl = Context.Request.GetDisplayUrl();
}
[i]











Brands

@foreach (var item in brands)
{




@item.BrandName
(@item.Products.Count)


}






Price




+
-

-


+
-












@* 
Sort By:

Popular
Position




Show:

20
50

  *@

[list]
[*][/i]
[*][url=#][i][/i][/url]
[/list]





@foreach (var item in Model.Take(6))
{


[url=/post/@SlugGenerator.SlugGenerator.GenerateSlug(item.ProductName)-@item.ProductItems.FirstOrDefault().ProductVariations.FirstOrDefault().ProductVarId]


[i]

-30%
NEW



@*  
@item.Category.CategoryName.ToUpper()
  *@
@item.ProductName.ToUpper()[/url]
[h4]$@item.Price@* $@(item.Product.Price + 200) *@[/h4]

[/i]
[i][/i]
[i][/i]
[i][/i]
[i][/i]

[i][/i]add to wishlist
[i][/i]add to compare
[i][/i]quick view





}





Showing 20-100 products
[list]
[*]1
[*][url=#]2[/url]
[*][url=#]3[/url]
[*][url=#]4[/url]
[*][url=#][i][/i][/url]
[/list]

Код Ajax фильтрует бренд каждый раз, когда пользователь нажимает «Выбрать»:

Код: Выделить всё

@section Scripts {

document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll('.brand-checkbox');

checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', function () {
// Ensure only one checkbox is checked at a time
checkboxes.forEach((otherCheckbox) =>  {
if (otherCheckbox !== this) {
otherCheckbox.checked = false;
}
});

// If a checkbox is checked, get its value, otherwise set to null
var selectedBrand = this.checked ? this.id : null;
var categoryId = $('#category-id').val();

$.ajax({
url: '@Url.Action("FilterByBrands", "ProductView")',
type: 'GET',
data: { brandid: selectedBrand, cateid: categoryId },
success: function (response) {
$('#product').html(response);
}
});
});
});
});

}

Вот код контроллера:

Код: Выделить всё

[HttpGet]
public ActionResult FilterByBrands(int brandid, int cateid)
{
ViewBag.Brand = _context.Brands.Include(n => n.Products).ToList();

var product = _context.Products
.Where(n => n.BrandNavigation.BrandId == brandid
&& n.CategoryId == cateid)
.Include(n => n.ProductItems)
.ThenInclude(n => n.ProductVariations)
.Include(n => n.Category)
.ToList();

return PartialView("_FilterPartial",product);
}

Представление _FilterPartial такое же, как категория продуктов, как и изображение выше, которое я упомянул, а также код.
Я думаю, что Ajax работает правильно, потому что каждый раз, когда я нажимаю кнопку бренда, открываю сеть веб-сайта и выбираю Fetch/XHR. Сервер возвращает мне вот такой Fetch/XHR, и когда я нажимаю на него, он открывает для меня такое представление.
Кто-нибудь знает проблему? Я не хочу перезагружать страницу, но похоже, что возвращаю что-то еще. Я очень ценю любые инструкции.
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/783 ... net-core-6