选择插件验证 asp.net mvc

Question

我在我的 asp.net mvc 核心应用程序中使用选择的 js 插件进行多选下拉。我想验证用户是否在该多选列表框中选择了至少一个值。

我实际上想要在列表框旁边带有必需的红色边框列表框，但是它不起作用。我对单个选定的下拉列表及其工作使用相同的代码（但它没有选择插件）。我在所选的 github 中也找不到任何文档。

cshtml代码

           @Html.ListBoxFor(model => model.SelectedLanguages, new MultiSelectList(Model.Languages, "Value", "Text"), htmlAttributes: new { id = "LanguageDropDown", multiple = "multiple", @class = "listbox-text" })
           @Html.ValidationMessageFor(model => model.Languages)

型号

        [Display(Name = "Language(s)")]
        [Required(ErrorMessage = "Required")]
        public string Language { get; set; }
        public IEnumerable<SelectListItem> Languages { get; set; }
        public string[] SelectedLanguages { get; set; }

控制器（用于将数据加载到列表框）

 public IEnumerable<SelectListItem> GetLanguages()
        {
            using (var _dbcontext = new DataContext(DataContext.opsBuild.dbOptions))
            {
                List<SelectListItem> languages = _dbcontext.Languages.AsNoTracking()
                    .Where(n => n.IsActive == true)
                        .OrderBy(n => n.LanguageName)
                            .Select(n =>
                            new SelectListItem
                            {
                                Value = n.LanguageID.ToString(),
                                Text = n.LanguageName
                            }).ToList();
                return new SelectList(languages, "Value", "Text");
            }
        }

*** js块***

 $("#LanguageDropDown").chosen({
                placeholder_text_multiple: "Select Language(s)",
            });        

Answer 1

如下更改您的代码：

<form asp-action="test">
    @Html.ListBoxFor(model => model.Language, new MultiSelectList(Model.Languages, "Value", "Text"), htmlAttributes: new { id = "LanguageDropDown", multiple = "multiple", @class = "listbox-text" })
    @Html.ValidationMessageFor(m => m.Language)

    <div>
        <input type="submit" value="submit" />
    </div>
</form>
@section Scripts
{
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <link rel="stylesheet" href="~/lib/chosen_v1.8.7/docsupport/prism.css">
    <link rel="stylesheet" href="~/lib/chosen_v1.8.7/docsupport/style.css">
    <link rel="stylesheet" href="~/lib/chosen_v1.8.7/chosen.css">
    <script src="~/lib/chosen_v1.8.7/chosen.jquery.js"></script>
    <script src="~/lib/chosen_v1.8.7/docsupport/prism.js"></script>
    <script src="~/lib/chosen_v1.8.7/docsupport/init.js"></script>
    <script>      
        $("#LanguageDropDown").chosen({
            placeholder_text_multiple: "Select Language(s)"
        });
        $.validator.setDefaults({
            ignore: []
        });
    </script>
    <style>
        #LanguageDropDown-error {
            color: red;
        }
    </style>
}

结果：