Asp.net-Mvc-3

MVC3 Razor 部分視圖渲染不包括數據驗證屬性

  • February 7, 2012

我有一個非常直接的表單,它將個人數據呈現為表單中心的部分視圖。我無法讓客戶端驗證在此表單上工作。我開始追踪生成的 html,並想出了在標準表單和局部視圖上呈現的相同模型欄位。

我注意到在第一次呼叫@html.partial 時正確填充了輸入元素,只有在通過 ajax 請求重新載入部分視圖時才會發生以下情況。

首先是我的局部視圖的標題,它位於首頁面上的 Ajax.BeginForm 中。

@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 );
}

這是局部視圖中的剃刀標記:

@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 屬性。

它是否正確?如果沒有這些屬性,我看不到客戶端驗證如何工作,還是我在這裡遺漏了一些基本的東西?

為了創建不顯眼的驗證屬性,aFormContext必須存在。在局部視圖頂部添加以下內容:

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");

引用自:https://stackoverflow.com/questions/7487747