How to filter data with checkbox categories

tyg9o 0
Viewed 49

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:

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:

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; }
}
asp.net-core .net c# html
2 Answers

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

Quasipickle0

You can try to use a partial view.When selecting a checkbox,refresh the partial view which contains the filtered result in 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);
     
}
Yiyi You0
Related