我有一个非常简单的表单,它将个人数据作为窗体中心的部分视图呈现。我无法获得客户端验证在此表单上工作。我开始追踪生成html,并在标准表单和部分视图上呈现相同的模型字段。
我注意到在第一次调用@html时正确填充了输入元素。当partialview通过ajax请求重新加载时,才会发生以下情况。
首先是我的部分视图的标题,这是在Ajax中。
@model MvcMPAPool.ViewModels.EventRegistration
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$(".phoneMask").mask("(999) 999-9999");
});
</script>
@{
var nPhn = 0;
var dTotal = 0.0D;
var ajaxOpts = new AjaxOptions{ HttpMethod="Post", UpdateTargetId="idRegistrationSummary", OnSuccess="PostOnSuccess" };
Html.EnableClientValidation( true );
Html.EnableUnobtrusiveJavaScript( true );
}
这是部分视图中的razor标记:
@Html.ValidationMessageFor(model=>Model.Player.Person.Addresses[0].PostalCode)
<table>
<tr>
<td style="width:200px;">City*</td>
<td>State</td>
<td>Zip/Postal Code</td>
</tr>
<tr>
<td>@Html.TextBoxFor(p=>Model.Player.Person.Addresses[0].CityName, new { style="width:200px;", maxlength=50 })</td>
<td>
@Html.DropDownListFor(p=> Model.Player.Person.Addresses[0].StateCode
, MPAUtils.GetStateList(Model.Player.Person.Addresses[0].StateCode))</td>
<td>
<div class="editor-field">
@Html.TextBoxFor(p=>Model.Player.Person.Addresses[0].PostalCode, new { style="width:80px;", maxlength=10 })
</div>
</td>
</tr>
</table>
这是部分视图呈现的字段:
<td>
<div class="editor-field">
<input id="Player_Person_Addresses_0__PostalCode" maxlength="10" name="Player.Person.Addresses[0].PostalCode" style="width:80px;" type="text" value="" />
</div>
</td>
下面是在标准视图中呈现的相同的模型字段:
<div class="editor-field">
<input data-val="true" data-val-length="The field Postal/Zip Code must be a string with a maximum length of 10." data-val-length-max="10" data-val-required="Postal or Zip code must be provided!" id="Person_Addresses_0__PostalCode" maxlength="10" name="Person.Addresses[0].PostalCode" title="Postal/Zip Code is required" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Person.Addresses[0].PostalCode" data-valmsg-replace="true"></span>
</div>
请注意,局部视图呈现在输入元素上没有data-val-xxx属性。
正确吗?如果没有这些属性,我不明白客户端验证如何工作,还是我在这里遗漏了一些基本的东西?
为了创建不显眼的验证属性,必须存在FormContext
。在局部视图的顶部添加以下内容:
if (this.ViewContext.FormContext == null)
{
this.ViewContext.FormContext = new FormContext();
}
如果您希望数据验证标记在那里,则需要在FormContext
中。因此,如果要动态生成表单的某些部分,则需要在部分视图中包含以下行:
@{ if(ViewContext.FormContext == null) {ViewContext.FormContext = new FormContext(); }}
然后,您需要确保每次添加/删除项时都动态地重新绑定不显眼的验证:
$("#form").removeData("validator");
$("#form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#form");