[英]How to filter data with checkbox categories
How do I filter products based on which checkbox category is selected?如何根据选择的复选框类别过滤产品? for example if "Pistols" checkbox is selected it only shows pistols.
例如,如果“手枪”复选框被选中,它只显示手枪。
view code:查看代码:
<div style="background-color: #454545;">
<ul class="category-ul">
<li>
<input type="checkbox" id="pistol" name="Pistols">
<label for="pistol">Pistols</label>
</li>
<li>
<input type="checkbox" id="smg" name="SMGs">
<label for="smg">SMGs</label>
</li>
<li>
<input type="checkbox" id="rev" name="Revolvers">
<label for="rev">Revolvers</label>
</li>
<li>
<input type="checkbox" id="shotgun" name="Shotguns">
<label for="shotgun">Shotguns</label>
</li>
<li>
<input type="checkbox" id="assault" name="AssaultRifles">
<label for="assault">Assault Rifles</label>
</li>
<li>
<input type="checkbox" id="rifle" name="Rifles">
<label for="rifle">Rifles</label>
</li>
</ul>
</div>
controller code: controller 代码:
public async Task<IActionResult> weapons(decimal MinPrice, decimal MaxPrice)
{
var firearms = from s in _context.Firearm
select s;
var max = firearms.Max(i => i.Price);
MaxPrice = max;
ViewData["MinimumPrice"] = MinPrice;
ViewData["MaximumPrice"] = MaxPrice;
ViewData["Maximum"] = MaxPrice;
if (MinPrice > 0 || MaxPrice < max)
{
firearms = firearms.Where(s => s.Price > MinPrice
&& s.Price < MaxPrice);
}
return View(await firearms.AsNoTracking().ToListAsync());
}
model code: model 代码:
public class Firearm
{
[Key]
public int id { get; set; }
public string Manufacturer { get; set; }
public string Model { get; set; }
public decimal Price { get; set; }
public string Category { get; set; }
public string Caliber { get; set; }
public string Barrel { get; set; }
public string Magazine { get; set; }
public string Sight { get; set; }
public string? PicturePath { get; set; }
}
If you only want a single category to be selected at a time (which I'm guessing might be the case because you said "checkbox category", not "checkbox categories"), then you need to use radio buttons instead of checkboxes.如果您只想一次选择一个类别(我猜可能是这种情况,因为您说的是“复选框类别”,而不是“复选框类别”),那么您需要使用单选按钮而不是复选框。
Next, you've set the name
of each radio differently.接下来,您为每个收音机设置了不同的
name
。 That means they won't interact and will be POSTed as separate fields.这意味着它们不会交互,并将作为单独的字段发布。 What you want to do is give them all the same name (ex: "type"), but a different value .
您想要做的是给它们都赋予相同的名称(例如:“类型”),但值不同。 When the form is submitted, the value of the field will then be the type selected.
提交表单后,该字段的值将成为所选类型。
You then bind that submitted value to a variable in your method definition:然后将该提交的值绑定到方法定义中的变量:
public async Task<IActionResult> weapons(decimal MinPrice, decimal
MaxPrice, string category)
Finally, add a condition in your LINQ to use the category.最后,在您的 LINQ 中添加一个条件以使用该类别。
You can try to use a partial view.When selecting a checkbox,refresh the partial view which contains the filtered result in ajax:您可以尝试使用局部视图。选中复选框时,刷新包含 ajax 中过滤结果的局部视图:
view:看法:
<div style="background-color: #454545;">
<ul class="category-ul">
<li>
<input type="checkbox" id="pistol" name="type">
<label for="pistol">Pistols</label>
</li>
<li>
<input type="checkbox" id="smg" name="type">
<label for="smg">SMGs</label>
</li>
<li>
<input type="checkbox" id="rev" name="type">
<label for="rev">Revolvers</label>
</li>
<li>
<input type="checkbox" id="shotgun" name="type">
<label for="shotgun">Shotguns</label>
</li>
<li>
<input type="checkbox" id="assault" name="type">
<label for="assault">Assault Rifles</label>
</li>
<li>
<input type="checkbox" id="rifle" name="type">
<label for="rifle">Rifles</label>
</li>
</ul>
</div>
<div id="content">
@Html.Partial("Test", value)
</div>
@section Scripts{
<script>
$('input[name=type]').change(function(){
$('input:checkbox').not(this).prop('checked', false);
var selected=$('input[name=type]:checked').val();
if (selected != undefined) {
$.ajax({
url: "weapons",
type: "POST",
data: { type: selected },
success: function (data) {
document.getElementById("content").innerHTML = data;
}
})
}
})
</script>
}
action:行动:
public async Task<IActionResult> weapons(string type)
{
...
return PartialView("Test", filteredList);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.