AjaxOptions.OnSuccessを使用して部分ビューにクライアント側の検証を追加

Question

私は部分ビューのクライアント側の検証を有効にしようとしていて、自分自身が立ち往生しています。 AjaxOptions OnSuccessプロパティにコードを追加しましたが、何も起こりません。私はjQueryに比較的新しいことを指摘しておきたいと思います。正直言って、最初のMVCアプリケーションを自分のやり方で学ぶことで自分のやり方を工おうとしています。誰かがこれをやるより良い方法を持っているなら、私に知らせてください。

ご協力いただければ幸いです。

次のように私のビューのコードは次のとおりです。ここで

@model NorthwindLight.Models.Order 

@using NorthwindLight.HtmlHelpers 

@using NorthwindLight.Models 

@{ 

    ViewBag.Title ="Create"; 

    AjaxOptions newOpts = new AjaxOptions(); 

    newOpts.UpdateTargetId ="tabledata"; 

    newOpts.InsertionMode =InsertionMode.InsertAfter; 

    newOpts.OnSuccess ="function (tabledata) {$.validator.unobtrusive.parse($(tabledata));};"; 

    } 

    <h2>Create</h2> 

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

    @using (Html.BeginForm("Create", "Order", FormMethod.Post, new { name = "mainform", id = "mainform" })) { 

    @Html.ValidationSummary(true) 

    <fieldset> 

     <legend>Order</legend> 

     ... Code for entering Order ommitted for brevity 

     <legend>Order Details</legend> 

    <br /> 

    <table> 

     <thead> 

      <tr> 

       <th>Product</th> 

       <th>Unit Price</th> 

       <th>Quantity</th> 

       <th></th> 

      </tr> 

     </thead> 

     <tbody id="tabledata"> 

     @if (Model.OrderDetails == null) 

     { 

      @Html.Partial("OrderDetailPartial", new OrderDetail()) 

     } 

     else 

     { 

      foreach (var orderDetail in Model.OrderDetails) 

      { 

       @Html.Partial("OrderDetailPartial", orderDetail) 

      } 

     } 

     </tbody> 

    </table> 

    @Ajax.ActionLink("New Record", "OrderDetailPartial", newOpts) 

    </fieldset> 

    } 

    <div> 

     <a href="javascript:document.mainform.submit();">Create</a> | 

     @Html.ActionLink("Cancel", "Index") 

    </div> 

は、私は、ネット上の例をたくさん見てきました

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/DeleteRow.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/ui.core.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/ui.datepicker.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

_Layout.cshtmlに含まれているスクリプトタグであることこれに似ているようですが、私はそれらのいずれかを働かせることができませんでした。

Answer 1

別のフォーラムの助けを借りてこれを行う方法が見つかりました。最初のステップでは、部分ビューに新しいFormContextを作成します（存在しない場合）。

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

次に、このjQueryスクリプトをスクリプトフォルダに追加します。私は私が私が、その後_Layout.cshtmlにスクリプトタグを追加

function Success(formName) { 
    $(formName).removeData("validator"); 
    $(formName).removeData("unobtrusiveValidation"); 
    $.validator.unobtrusive.parse(formName); 
} 

PartialViewValidation.jsと呼ばれます。

<script src="@Url.Content("~/Scripts/PartialViewValidation.js")" type="text/javascript"></script> 

は最後に、私はnewOptsと呼ばAjaxOptionsオブジェクトのプロパティにするonSuccess jQueryの関数の呼び出しを追加しました。 HTMLの中に注入されることをメインフォームが#mainform呼ばれ

newOpts.OnSuccess = "Success('#mainform')"; 

クライアント側の検証は現在、動的Ajax呼び出しからビューに追加されたHTML要素のために行われます。

ありがとうございます。

Answer 2

MickySmigの答えは正しいです。FormContextコードを配置してください。モデルタイプの前にある@modelタグの前に部分的に表示されます。