如何在没有提交按钮的情况下显示过滤项目？

Question

我有一个过滤器，可以按制造商过滤我的产品。问题是我希望在单击复选框时显示产品，而不必单击“保存”按钮。

@model FilterViewModel
@{
    var formController = "";
    var formAction = "";

    if (Model.FilterType == "name")
    {
        formController = "Home";
        formAction = "ProductSearch";
    }
    if (Model.FilterType == "manufacturer")
    {
        formController = "Manufacturer";
        formAction = "ManufacturerInfo";
    }
    if (Model.FilterType == "category")
    {
        formController = "Home";
        formAction = "ProductCategory";
    }
}

<h5>Filter</h5>
<br />
<form id="filterForm" asp-area="" asp-controller="@formController" asp-action="@formAction" method="get">
    @if (Model.ManufacturerFilterViewModel.Count > 0)
    {
        <h6>Producător</h6> <!-- category filter -->
        <hr />
        @foreach (var manufacturer in Model.ManufacturerFilterViewModel)
        {
            string labelVaue = $"{manufacturer.Name} ({manufacturer.Quantity})";

            <div>
                <input type="checkbox" id="@manufacturer.Name" name="Manufacturer" value="@manufacturer.Name" />
                <label for="@manufacturer.Name">@labelVaue</label>
            </div>
        }
        <button type="submit" class="btn btn-sm btn-primary">Save</button>

        <br /><br />
    }

Answer 1

您可以在使用 JavaScript 单击复选框时提交表单。您的表单示例如下：

<script type="text/javascript">
var form = document.getElementById("filterForm"); // get the form
var inputs = document.getElementsByName("Manufacturer"); // get the checkboxes
inputs.forEach(function(input) { // iterate through the checkboxes ...
    input.addEventListener("click", function () { // ... and register a listener on click ...
        form.submit(); // ... that submits the form
    });
});
</script>

但您可能想使用jQuery。另请参阅此question 了解更多信息。