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

我一直在尝试为部分视图启用客户端验证，并且发现自己卡住了。我已经将代码添加到AjaxOptions的OnSuccess属性，但没有任何反应。我应该指出，我对jQuery相对比较陌生，说实话，我努力通过学习，随时了解我的第一个MVC应用程序。如果有人有更好的方式做到这一点，请让我知道。使用AjaxOptions.OnSuccess将客户端验证添加到部分视图

任何帮助将不胜感激。

我的观点的代码如下：

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

我见过很多例子的网，似乎与此类似，但我无法让他们中的任何人工作。

来源

2012-04-06 MickySmig

我找到了一种方法可以在另一个论坛的帮助下做到这一点。第一步是在部分视图中创建一个新的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>

最后，我加入到jQuery函数到AjaxOptions的的onSuccess属性的调用对象，我把它叫做newOpts。主要形式的HTML注入到被称为#mainform

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

客户端验证现在发生的动态添加到查看从Ajax调用了HTML元素。

感谢您的帮助。

来源

2012-04-08 15:41:17 MickySmig

这也解决了我的问题。我在@ElieSaber在另一个答案中提到的'@ model'声明之前添加了代码。（未在下面进行测试） – Jared 2013-01-21 19:35:30

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

来源

2012-07-27 13:06:02

分享一些代码。 – osyan 2012-10-11 07:23:15

@osyan不确定Elie是否需要这样做，因为所有其他相关代码（除了'@ model'）都在它们引用的答案中提供。 – Jared 2013-01-21 19:46:01

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

回答

相关问题