我在我的应用程序中启用了不显眼的客户端验证,并且我有(类似的)这个模型:
public class MyModel
{
[Required]
public string Name { get; set; }
[Range(0, 100)]
public int? Age { get; set; }
}
我有以下 /Home/Index 视图:
@model MyModel
@using (Html.BeginForm("Test", "Home"))
{
<div id="my-form">
@Html.Partial("Model")
</div>
<input type="submit" value="Go" />
}
使用部分“模型”:
@model MyModel
<div>
@Html.LabelFor(x => x.Name)
@Html.TextBoxFor(x => x.Name)
@Html.ValidationMessageFor(x => x.Name)
</div>
<div>
@Html.LabelFor(x => x.Age)
@Html.TextBoxFor(x => x.Age)
@Html.ValidationMessageFor(x => x.Age)
</div>
一切都很好,我收到了很好的验证错误消息。
现在我想动态加载表单/部分“模型”,即远程@Html.Partial并添加以下内容:
<a href="#" id="load-form">Load the form</a>
<script type="text/javascript">
$(function () {
$("#load-form").click(function () {
$.post(
"/Home/Test",
null,
function (result) {
$("#my-form").html(result);
$.validator.unobtrusive.parse($("#my-form"));
},
"html");
});
});
</script>
其中 /Home/Test 很简单return Partial("Model", new MyModel());
但是现在客户端验证不再起作用,如果我查看返回的 DOM 和 HTML,则不会呈现 data- 属性,即:
在 /Home/Index 中使用 Html.Partial()
<div>
<label for="Name">Name</label>
<input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
<div>
<label for="Age">Age</label>
<input data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Age" name="Age" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span>
</div>
XHR 响应
<div>
<label for="Name">Name</label>
<input id="Name" name="Name" type="text" value="" />
</div>
<div>
<label for="Age">Age</label>
<input id="Age" name="Age" type="text" value="" />
</div>
即使我在部分视图中显式添加Html.EnableClientValidation();
和Html.EnableUnobtrusiveJavaScript();
显示验证内容也不会呈现。
如何让我的 AJAX 部分呈现验证属性和消息?或者我还能做错什么?