如何使用 chosen.js 在 MVC 中实现客户端验证
How to implement client side validation in MVC with chosen.js
我正在为多个 selection 使用 chosen.js
,用 asp.net
mvc3
实现。客户端验证不适用于此多 select 控件。
我的实现方式是,使用 Html.Dropdownlist
帮助程序,一旦 dom 从 JavaScript $("#dropdown1").chosen()
.
加载
它将 Select 替换为 div。
代码如下
回调代码
function (data) {
$("#divnewdata").html(data);
$("#ddlcode1").chosen({
disable_search_threshold: 10,
no_results_text: "Oops, nothing found!",
disable_search: false,
});
$("#ddlCode1_chosen").find('.chosen-choices').removeClass('form-control').addClass('form-control');
$("#ddlcode2").chosen({
disable_search_threshold: 10,
no_results_text: "Oops, nothing found!",
disable_search: false,
});
$("#ddlcode2_chosen").find('.chosen-choices').removeClass('form-control').addClass('form-control');
$.validator.setDefaults({
ignore: []
});
}
正在从布局页面加载 java 脚本
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
$('form').validate({
ignore: []
});
</script>
<script src="~/Scripts/Common/Common.js"></script>
</head>
正在尝试下载部分视图
<script>
$(document).ready(function () {
$.validator.unobtrusive.parse("#formAddcodes");
$.validator.setDefaults({
ignore: []
});
});
</script>
<link href="~/Content/chosen.css" rel="stylesheet" />
<script src="~/Scripts/chosen.jquery.min.js"></script>
<script src="~/Scripts/Codes/Codes.js"></script>
@using (Html.BeginForm("AddCodes", "Codes", FormMethod.Post, new { id = "formAddcodes" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.code1, htmlAttributes: new { @class = "col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.code1, Model.Code1List as SelectList, new { @class = "form-control", id = "ddlcode1", multiple = "multiple" })
@Html.ValidationMessageFor(model => model.code1, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.code2, htmlAttributes: new { @class = "col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.code2, Model.code2List as SelectList, new { @class = "form-control", id = "ddlcode2", multiple = "multiple" })
@Html.ValidationMessageFor(model => model.code2, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Add" class="btn btn-primary" />
</div>
</div>
</div>
}
chosen
通过隐藏原始 <select>
元素来更新 html,默认情况下忽略隐藏元素。您可以使用以下脚本修改此行为
$.validator.setDefaults({
ignore: []
});
或
$('form').validate({
ignore: []
});
我正在为多个 selection 使用 chosen.js
,用 asp.net
mvc3
实现。客户端验证不适用于此多 select 控件。
我的实现方式是,使用 Html.Dropdownlist
帮助程序,一旦 dom 从 JavaScript $("#dropdown1").chosen()
.
它将 Select 替换为 div。
代码如下
回调代码
function (data) {
$("#divnewdata").html(data);
$("#ddlcode1").chosen({
disable_search_threshold: 10,
no_results_text: "Oops, nothing found!",
disable_search: false,
});
$("#ddlCode1_chosen").find('.chosen-choices').removeClass('form-control').addClass('form-control');
$("#ddlcode2").chosen({
disable_search_threshold: 10,
no_results_text: "Oops, nothing found!",
disable_search: false,
});
$("#ddlcode2_chosen").find('.chosen-choices').removeClass('form-control').addClass('form-control');
$.validator.setDefaults({
ignore: []
});
}
正在从布局页面加载 java 脚本
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
$('form').validate({
ignore: []
});
</script>
<script src="~/Scripts/Common/Common.js"></script>
</head>
正在尝试下载部分视图
<script>
$(document).ready(function () {
$.validator.unobtrusive.parse("#formAddcodes");
$.validator.setDefaults({
ignore: []
});
});
</script>
<link href="~/Content/chosen.css" rel="stylesheet" />
<script src="~/Scripts/chosen.jquery.min.js"></script>
<script src="~/Scripts/Codes/Codes.js"></script>
@using (Html.BeginForm("AddCodes", "Codes", FormMethod.Post, new { id = "formAddcodes" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.code1, htmlAttributes: new { @class = "col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.code1, Model.Code1List as SelectList, new { @class = "form-control", id = "ddlcode1", multiple = "multiple" })
@Html.ValidationMessageFor(model => model.code1, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.code2, htmlAttributes: new { @class = "col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.code2, Model.code2List as SelectList, new { @class = "form-control", id = "ddlcode2", multiple = "multiple" })
@Html.ValidationMessageFor(model => model.code2, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Add" class="btn btn-primary" />
</div>
</div>
</div>
}
chosen
通过隐藏原始 <select>
元素来更新 html,默认情况下忽略隐藏元素。您可以使用以下脚本修改此行为
$.validator.setDefaults({
ignore: []
});
或
$('form').validate({
ignore: []
});