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>

最后，我向jax函数添加了对AjaxOptions对象的onSuccess属性的调用，我将其命名为newOpts。注入HTML的主要形式称为#mainform

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

现在，对于从Ajax调用动态添加到View的HTML元素，将进行客户端验证。

感谢您的帮助。

使用AjaxOptions.OnSuccess将客户端验证添加到部分视图

1 个答案: