2011-07-25 18 views
9

こんにちは、私はMVC 3(かみそり)でajaxのウィザードをプロトタイプしています。私が気付いている奇妙なのは、ビューの一部をUpdateTargetIdに戻すとビューがプラグインされますが、控えめなJavaScriptは追加/適用されません。パーツビューをajaxブロックの外側にロードすると、例えば、MVC 3、(かみそり)読み込み部分のバリデーション

@Html.Partial("Company") 

それはので、私は標準ライブラリのいずれかが欠けていないよと マイウェブの設定がすべて良いです完璧に動作します。私は少し困惑して現時点ではそう

私の見解は以下の通りです:

@using(Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea" })){ 

    <div id="stepArea"></div> 
    <input id="btnSubmit" type="submit" value="submit" /> 
} 

コントローラー:

public ActionResult Step(FormCollection formCollection) 
{ 
    if (this.Request.IsAjaxRequest()) 
    { 
     switch ((TempData["step"] as string)) 
     { 
      case "Company": 
       TempData["step"] = "Person"; 
       return PartialView("Company"); 

      case "Person": 
       TempData["step"] = "Pay"; 
       return PartialView("Person"); 

      case "Settlement": 
       return PartialView("Pay"); 

      default: 
       TempData["step"] = "Company"; 
       return PartialView("UserType"); 
     } 
    } 
    return View(); 
} 

私の質問は、部分的なビューからの検証がinitalisedする/パーシャルリフレッシュから実装することができますか?

答えて

10

に属性を追加する必要があります。 パズルの最後の部分。部分的なビューを返した後に検証が機能します。 jquery.validate.unobtrusive not working with dynamic injected elements完璧に動作

<script type="text/javascript"> 

    function validateAjaxForm() { 
     $("form").removeData("validator"); 
     $("form").removeData("unobtrusiveValidation"); 
     $.validator.unobtrusive.parse("form"); 
     return $('#form').valid(); 
    } 
</script> 


@{ Html.EnableClientValidation(true); } 
@using (Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea", OnBegin = "return validateAjaxForm();" }, new { id = "form" })) 
{ 
    <div id="stepArea"></div> 
    <input id="btnSubmit" type="submit" value="submit" /> 
} 

+0

残念ながら、その解決策には大きな問題があります。私の答えを見てください。 – chris

9

FormContextがビュー内でnullの場合は、初期化してみてください。これは控えめな検証「データval- *は」少数のフォーラムを読んで、いくつかの実験を行った後、生成した制御

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

ありがとう私はそれを行こうと思います。 – Nickz

+3

それは邪魔にならないdata-val- *を追加しました。これで、アクションを送信するajax.beginformによる検証トリガーを作成する方法を見つける必要があります。不思議なことにバリデーションがトリガーされません。 – Nickz

0

Nickzソリューションに大きな問題があります。これにより、別の回避策が見つかるまで私の髪を引き出すことができました。

// forces creation of a new validator, which in turn causes 
    // an extra submit event handler to be attached!!! 
    $("form").removeData("validator"); 
    $("form").removeData("unobtrusiveValidation"); 
    $.validator.unobtrusive.parse("form"); 

あなたがそれを行うときはそのまま古いイベントハンドラを残したまま、あなたは$.validator.unobtrusive.parse()を呼び出すたびに、新しいイベントハンドラは、フォームのイベントを提出するに添付されます。これは、上記のコードを複数回実行すると、送信イベントが発生したときにバリデータが不必要に複数回実行されることを意味します。これは私にとって重大なパフォーマンス上の問題を引き起こしました。

$.extend($.validator.unobtrusive, { 
    updateParse: function (selector) { 
     /// <summary> 
     /// Custom alternative for the built in method $.validator.unobtrusive.parse() which can updates an existing validator. 
     /// Use this only when a validator has not yet been initialized, i.e. when $.validator.unobtrusive.parse() 
     /// has not yet been called before. 
     /// This is intended for use after you dynamically add/remove/modify validatable elements to a form via AJAX. 
     /// Parses all the HTML elements in the specified selector. It looks for input elements decorated 
     /// with the [data-val=true] attribute value and enables validation according to the data-val-* 
     /// attribute values. 
     /// </summary> 
     /// <param name="selector" type="String">Any valid jQuery selector.</param> 
     var $forms = $(selector) 
      .parents("form") 
      .andSelf() 
      .add($(selector).find("form")) 
      .filter("form"); 

     $(selector).find(":input[data-val=true]").each(function() { 
      $.validator.unobtrusive.parseElement(this, true); 
     }); 

     $forms.each(function() { 
      var form = $(this); 
      var info = form.data("unobtrusiveValidation"); 
      if (info) { 
       var validator = form.data("validator"); 
       if (validator) { 
        validator.settings.rules = info.options.rules; 
       } 
       else { 
        throw "validator not yet initialized for this form yet -- use $.validator.unobtrusive.parse() instead"; 
       } 
      } 
     }); 
    } 

これは、既存のバリデータオブジェクトの検証ルールを更新し、代わりの提出余分を加えながら新しいバリデータの作成を強制します:だから私は、私はupdateParseという名前parse()方法にカスタムの代替を書くことになりましたイベントハンドラ。 私の選択では、parse()メソッドは、バリデータがすでに存在する場合にのみ動作します。

関連する問題