I want to filter products in my e-commerce project, but I have a problem: I want my filtering to change dynamically, I choose a brand from the selected list and the necessary filtering is done. When the second filter is done, my first filter is reset and the last filtering becomes valid.
I need such a URL structure:
/?SelectedVendor=Asus&SelectedMemory=4+GB
FilterViewModel.cs
public class FilterViewModel
{
public List<string> Vendors { get; set; }
public List<string> Memories { get; set; }
public string SelectedVendor { get; set; }
public string SelectedMemory { get; set; }
}
CategoryController.cs
[HttpGet]
public ViewResult Gaming(int productPage = 1, FilterViewModel model=null)
{
ProductListViewModel productList = new ProductListViewModel()
{
Products =
_productService.GetProductsByCategoryId(1).OrderBy(p => p.Id).Skip((productPage - 1) * pageSize).Take(pageSize),
FilterTypes = new FilterViewModel()
{
Vendors = _productService.Products.Select(I => I.Vendor).Distinct().OrderBy(I => I).ToList(),
Memories = _productService.Products.Select(I => I.MemoryCapacity).Distinct().OrderBy(I => I).ToList(),
}
};
if (!string.IsNullOrEmpty(model.SelectedVendor))
{
productList.Products = productList.Products.Where(I => I.Vendor.Contains(model.SelectedVendor));
productList.FilterTypes.Memories = productList.Products.Select(I => I.MemoryCapacity).Distinct()
.OrderBy(I => I).ToList();
}
if (!string.IsNullOrEmpty(model.SelectedMemory))
{
productList.Products = productList.Products.Where(I => I.MemoryCapacity == model.SelectedMemory);
}
return View(productList);
}
FilterPartial.cshtml
<div class="col-md-3">
<div class="filter filter-first">
<h6 class="font-weight-bold">Brand</h6>
<form method="get" asp-controller="@controllerName" asp-action="@actionName">
@foreach (var vendor in Model.Vendors)
{
<div class="mt-2 mb-2 pl-2">
<input type="submit" value="@vendor" asp-for="SelectedVendor"/>
</div>
}
<h6 class="font-weight-bold">Memory</h6>
@foreach (var memory in Model.Memories)
{
<div class="mt-2 mb-2 pl-2">
<input type="submit" asp-for="SelectedMemory" value="@memory"/>
</div>
}
</form>
</div>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…