2011-09-20 8 views
11

フォームの中央にパーシャルビューとしてパーソナルデータをレンダリングする簡単なフォワードフォームがあります。このフォームで作業するためのクライアント側の検証はできません。 私はgenerate htmlを追跡し始め、標準のフォームと部分的なビューでレンダリングされた同じモデルフィールドを思いついた。MVC3 Razorパーシャルビューレンダリングにデータ検証属性が含まれていません

最初の呼び出し@html.partialで入力要素が正しく入力されていることに気がつきましたが、ajaxリクエストでpartialviewを再ロードすると次のようになります。

まず、私の部分図のヘッダーです。これは、メインページの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> 

はAでレンダリング同じモデルのフィールドであります標準ビュー:

 <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> 

部分ビューのレンダリングでは、input要素にdata-val-xxx属性がないことに注意してください。

これは間違いありませんか?これらの属性がないとクライアント側の検証がどのように機能するのかわかりません。

+0

を参照してください[ '@using(Html.BeginSubForm())'解答](http://stackoverflow.com/a/8750181)への[ASP.NET MVC 3:控えめな検証を生成BeginFormレイアウト上にある](http://stackoverflow.com/questions/4997269/asp-net-mvc-3-generate-unobtrusive-validation-when-beginform-is-on-the-layout)。 –

答えて

18

控えめな検証属性を作成するには、FormContextが存在する必要があります。あなたの部分図の最上部に以下を追加します。

if (this.ViewContext.FormContext == null) 
{ 
    this.ViewContext.FormContext = new FormContext(); 
} 
+0

FormContextをチェックしたところ、FormContextはすでに設定されていたので、元のとおりに動作します。 –

+0

部分ビューをメインビューに移動し、検証が正しく機能します。フォームを書き直してそのまま残しておきたいと思っていましたが、私は本当にこの作業をする方法を知りたいと思います。 –

+2

PartialViewには '@using Html.BeginForm()'または '@using Ajax.BeginForm()'が宣言されていないため、PartialViewには 'FormContext'はありません。ビューから呼び出された場合は、FormContextが渡されます。コントローラ内のアクションから呼び出された場合、FormContextは渡されません。この場合、PartialViewはFormContextをインスタンス化する必要があります。これはPartialViewの一番上にある私の答えにコードブロックを追加することによって行われます。 – counsellorben

9

あなたはデータの検証タグがあるようにしたい場合は、あなたがFormContextにする必要があります。したがって、あなたが動的にフォームの一部を生成している場合、あなたはあなたの部分図に以下の行を含める必要があります。

@{ if(ViewContext.FormContext == null) {ViewContext.FormContext = new FormContext(); }} 

あなたは、あなたが動的に控えめ検証あなたが/削除を追加するたびに再バインドを確認する必要がありますアイテム:

$("#form").removeData("validator"); 
$("#form").removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse("#form"); 
+0

あなたは答えが大いに役立ちます。どうもありがとう。 – bubuxu

+0

@dazbradburyこれらを含める場所は?私も同じ問題を抱えていると教えてください –

関連する問題