Discuss the CheckBoxList verification in ASP. net mvc, mvccheckboxlist

Discuss the CheckBoxList verification in ASP. net mvc, mvccheckboxlist

In ASP. net mvc 4, CheckBoxList is often usedCheckBoxList. In "MVC extension generation CheckBoxList and horizontal arrangement ",HtmlHelperHorizontal or vertical displayCheckBoxList. In "MVC generates CheckBoxList and verifies it", a setCheckBoxListBut if you wantCheckBoxListVerification, this method is not very good.

 

For example, in the e-commerce product module, there are multiple attributes under a certain category, and some attribute values are single-choice.DropDownListDisplay attribute values. If multiple attribute values are selected, useCheckBoxListDisplay attribute values.

 

There are two groups:CheckBoxList, We need to select at least one item for each group; otherwise, an error is returned:

 

If you do not select any option, click "Submit", two groupsCheckBoxListThe following error is reported:

 

If you select any option in group 1, the errors in group 1 will disappear, and the selected items in group 1 will be displayed below (the selected items are usually submitted to the server ), two groups of Errors still exist:

 

If any of the two groups is selected, the errors of the two groups disappear and the selected items of the two groups are shown below:

 

If you do not select any option in group 1, the text of group 1 check box disappears at the bottom of the page, and an error occurs in group 1:

 

In short, the example in this article is:
1. ensure that at least one item in each group's CheckBoxList is selected
2. display the check box

 

In fact, the above verification and display are fully implemented with jQuery!

 

In Home/Index. cshtml, When you click Submit or select/deselectCheckBoxListTo traverse allCheckBox, As long as each group is selectedCheckBoxIf the number is 0, an error is returned.

 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<ul id="props">list-style-type: none">
    <li>
Group 1:
<Input type = "checkbox" name = "1" value = ""/> potato
        &nbsp;
<Input type = "checkbox" name = "2" value = "tomato"/> tomato
        &nbsp;
<Input type = "checkbox" name = "3" value = "watermelon"/> Watermelon
        &nbsp;
        <span class="err"></span>
    </li>
    <li>
Group 2:
<Input type = "checkbox" name = "4" value = "Pumpkin"/> pumpkin
        &nbsp;
<Input type = "checkbox" name = "5" value = "winter melon"/> Winter Melon
        &nbsp;
<Input type = "checkbox" name = "6" value = "Bitter Gourd"/> Bitter Gourd
        &nbsp;
        <span class="err"></span>
    </li>
</ul>
<Input id = "btnSubmit" type = "submit" value = "submit"/>
<ul id="result">
    
</ul>
@section scripts
{
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
// You must select one item for each checkboxlist group by clicking the submit button.
            $('#btnSubmit').on("click", function () {
                checkCblist();
            });
// Select or deselect
            $('#props').on("change", "input[type=checkbox]", function () {
                checkCblist();
// Obtain the selected value
                var temp = $(this).val();
                if ($(this).is(":checked")) {
                    $('<li/>', { html: temp }).appendTo('#result');
                } else {
                    $('#result li').filter(function () { return $.text([this]) === temp; }).remove();
                }
            });
// Check each group of CheckBoxList. If no CheckBoxList is selected, an error is returned.
            function checkCblist() {
// Traverse the checkboxlist under each li group. If no checkboxlist is selected, an error is returned.
                $('#props li').each(function () {
                    if ($(this).find("input:checked").length == 0) {
$ (This). find ('. err'). text ("select at least one option. CSS (" color "," red ");
                    } else {
                        $(this).find('.err').text("");
                    }
                });
            }
        });
    </script>
}

 

Above,
○checkCblistMethod to traverse eachli, If each groupCheckBoxListSelectedCheckBoxIf the number is 0, an error message is displayed.
○ Click "Submit" to triggercheckCblistMethod.
○ Checking or uncheck this option is also triggeredcheckCblistMethod. And if you selectCheckBox, As shown belowCheckBoxIf you deselect the check boxCheckBoxDelete at the bottomCheckBox.
○filterMethod to receive anonymous function parameters whose return type is bool and filter out the elements that meet the condition.