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

以下是 _Layout.cshtml 中包含的脚本标签

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

我在网上看到很多与此类似的示例，但我无法让其中任何一个起作用。

Answer 1

我在另一个论坛的帮助下找到了一种方法。第一步是在局部视图中创建一个新的 FormContext（如果尚不存在）。

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

然后您将下面的这个 jQuery 脚本添加到您的脚本文件夹中。我叫我的 PartialViewValidation.js

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

然后我在 _Layout.cshtml 中添加了一个脚本标签。

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

最后，我在 AjaxOptions 对象的 onSuccess 属性中添加了对 jQuery 函数的调用，我称之为 newOpts。注入 HTML 的主窗体称为#mainform

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

现在对通过 Ajax 调用动态添加到视图的 HTML 元素进行客户端验证。

感谢您的帮助。

Answer 2

MickySmig 的回答是正确的，只要确保将 FormContext 代码放在 @model 标记之前，这意味着在局部视图中您的模型类型之前。