Как отфильтровать товар без перезагрузки страницы в ASP.NET Core 6
Я пытаюсь фильтровать данные о продукте по бренду, когда человек находится на странице категории продукта. Здесь представлен вид категория товара . Итак, я хочу сделать фильтр по брендам на боковой панели слева. Я использую ajax, поэтому его нельзя перезагружать страницу каждый раз, когда пользователь выбирает кнопку бренда.
Вот код:
@{
ViewData["Title"] = "ProductCategory";
Layout = "~/Views/Layout/_CategoryLayout.cshtml";
}
@{
IEnumerable<Category> categories = ViewBag.Categories as IEnumerable<Category>;
IEnumerable<Brand> brands = ViewBag.Brand as IEnumerable<Brand>;
string currentUrl = Context.Request.GetDisplayUrl();
}
<input type = "hidden" id = "category-id" value = "@Model.FirstOrDefault().CategoryId" />
<!-- SECTION -->
<div class = "section">
<!-- container -->
<div class = "container">
<!-- row -->
<div class = "row">
<!-- ASIDE -->
<div id = "aside" class = "col-md-3">
<!-- aside Widget -->
<div class = "aside">
<h3 class = "aside-title">Brands</h3>
<div class = "checkbox-filter">
@foreach (var item in brands)
{
<div class = "input-checkbox">
<input type = "checkbox" class = "brand-checkbox" name = "brand" id = "@item.BrandId">
<label for = "@item.BrandId">
<span></span>
@item.BrandName
<small>(@item.Products.Count)</small>
</label>
</div>
}
</div>
</div>
<!-- /aside Widget -->
<!-- aside Widget -->
<div class = "aside">
<h3 class = "aside-title">Price</h3>
<div class = "price-filter">
<div id = "price-slider"></div>
<div class = "input-number price-min">
<input id = "price-min" type = "number">
<span class = "qty-up">+</span>
<span class = "qty-down">-</span>
</div>
<span>-</span>
<div class = "input-number price-max">
<input id = "price-max" type = "number">
<span class = "qty-up">+</span>
<span class = "qty-down">-</span>
</div>
</div>
</div>
<!-- /aside Widget -->
</div>
<!-- /ASIDE -->
<!-- STORE -->
<div id = "store" class = "col-md-9">
<!-- store top filter -->
<div class = "store-filter clearfix">
<div class = "store-sort">
@* <label>
Sort By:
<select class = "input-select">
<option value = "0">Popular</option>
<option value = "1">Position</option>
</select>
</label>
<label>
Show:
<select class = "input-select">
<option value = "0">20</option>
<option value = "1">50</option>
</select>
</label> *@
</div>
<ul class = "store-grid">
<li class = "active"><i class = "fa fa-th"></i></li>
<li><a href = "#"><i class = "fa fa-th-list"></i></a></li>
</ul>
</div>
<!-- /store top filter -->
<!-- store products -->
<div class = "row">
<!-- product -->
@foreach (var item in Model.Take(6))
{
<div class = "col-md-4 col-xs-6">
<div class = "product">
<a href = "/post/@SlugGenerator.SlugGenerator.GenerateSlug(item.ProductName)[email protected]().ProductVariations.FirstOrDefault().ProductVarId" />
<div class = "product-img">
<img src = "~/Contents/img/@item.ProductItems.FirstOrDefault().Image1" width = "200" height = "200" alt = "">
<div class = "product-label">
<span class = "sale">-30%</span>
<span class = "new">NEW</span>
</div>
</div>
<div class = "product-body">
@* <p class = "product-category">@item.Category.CategoryName.ToUpper()</p> *@
<h3 class = "product-name"><a href = "#">@item.ProductName.ToUpper()</a></h3>
<h4 class = "product-price">[email protected]<del class = "product-old-price">@* $@(item.Product.Price + 200) *@</del></h4>
<div class = "product-rating">
<i class = "fa fa-star"></i>
<i class = "fa fa-star"></i>
<i class = "fa fa-star"></i>
<i class = "fa fa-star"></i>
<i class = "fa fa-star"></i>
</div>
<div class = "product-btns">
<button class = "add-to-wishlist"><i class = "fa fa-heart-o"></i><span class = "tooltipp">add to wishlist</span></button>
<button class = "add-to-compare"><i class = "fa fa-exchange"></i><span class = "tooltipp">add to compare</span></button>
<button class = "quick-view"><i class = "fa fa-eye"></i><span class = "tooltipp">quick view</span></button>
</div>
</div>
</div>
</div>
}
<!-- /product -->
</div>
<!-- /store products -->
<!-- store bottom filter -->
<div class = "store-filter clearfix">
<span class = "store-qty">Showing 20-100 products</span>
<ul class = "store-pagination">
<li class = "active">1</li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#"><i class = "fa fa-angle-right"></i></a></li>
</ul>
</div>
<!-- /store bottom filter -->
</div>
<!-- /STORE -->
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /SECTION -->
Код Ajax фильтрует бренд каждый раз, когда пользователь нажимает «Выбрать»:
@section Scripts {
<script>
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);
}
});
});
});
});
</script>
}
Вот код контроллера:
[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 и когда я нажимаю на него, открывается такое представление представление для меня.
Кто-нибудь знает проблему? Я не хочу перезагружать страницу, но похоже, что возвращаю что-то еще. Я очень ценю любые инструкции.
Спасибо
Ответы 1
пытается отфильтровать данные о продукте по бренду, когда человек находится на странице категории продукта.
Сделайте запрос от HTML-клиента к серверной части, который возвращает частичное представление с помощью Ajax или Fetch API, а затем обновите целевой HTML-контент с помощью функции обратного вызова успеха, что является распространенным способом динамического обновления страницы просмотра без перезагрузки.
Я думаю, что Ajax работает правильно, потому что каждый раз, когда я нажимаю кнопку бренда, открываю сеть веб-сайта и выбираю Fetch/XHR. Сервер возвращается для меня вот так Fetch/XHR и когда я нажимаю на него, открывается такое представление представление для меня.
Я предполагаю, что ваш запрос возвращает ожидаемый частичный контент просмотра продуктов, отфильтрованных по брендам. Для обновления содержимого HTML нам просто нужно установить целевой HTML-контейнер с возвращаемым ответом.
Основываясь на вашем коде, мы можем обнаружить, что вы используете селектор идентификатора $('#product').html(response); для обновления страницы просмотра, но мы не можем найти элемент html с id = "product" на вашей странице просмотра.
Основываясь на вашей HTML-структуре, вы можете попытаться изменить код, как показано ниже, чтобы обновить родительский HTML-контейнер продуктов.
//...
success: function (response) {
$('#store .row').html(response);
//...
Не могли бы вы создать для нас новый репозиторий для отладки кода? И, пожалуйста, скройте вашу конфиденциальную информацию.