部分视图作为Bootstrap模态客户端验证不起作用

时间:2015-12-01 15:30:27

标签: c# jquery asp.net-mvc

我很难将客户端验证工作在部分视图中的模式弹出窗口中。我使用按钮在主.cshtml文件中调用它。

<div>                        
   @Html.ActionLink("Add", "_MyPartial", "MyController", new { clientID = "0" }, new {@id = "btnAdd", })
</div>

部分视图非常好地加载模态弹出窗口,我可以对它进行CRUD。它看起来像这样。

@using(Html.BeginForm("_MyPartial", "MyController", FormMethod.Post, new { id = "frmClient" }))
{    
   <div class="modal-content panel panel-info">
      <div class="modal-header panel-heading">
         <button type = "button" class="close" data-dismiss="modal">&times;</button>                
      </div> 

      <div class="panel-body bootstrap-padding-overide">                    
         @Html.ValidationSummary(false, null, new { @id = "ValidationSummary", @class = "validationErrorBox" })                    
      </div>  

      <div class="modal-body panel-body bootstrap-padding-overide">
         <div>            
            @Html.LabelFor(m => m.selectName)
            @Html.TextBoxFor(m => m.selectName, new { @class = "form-control" })            
         </div>
         <div>
           <input type = "submit" name="submitButton" value="Submit" class="btn btn-default" />
         </div>
      </div>
   </div>    
}

@section MyScripts
{
   <script type="text/javascript">
     $.validator.unobtrusive.parse("#frmClient form");
   </script>
}

所以我在布局页面中加载了所有.js文件,并在ViewModel中加载了必填字段。

[Required(ErrorMessage = "Please Insert a Name")]
[Display(Name = "Persons Name")]
public string selectName { get; set; }

弹出容器位于layout.cshtml中,以及处理模态的Jquery ......

因此,当我提交它时,只是发布到控制器操作。我想知道是否有人可以建议我在哪里出错。

*已解决* 下面的海报让我得到了很大的帮助。由于缺乏理解,我做了很多按钮抨击。所以我想评论解决我在哪里工作。

我将以下内容放入html.BeginForm辅助方法内的部分页面中。所以在jQuery document.ready函数之前。请纠正我,我会修改。

@using (Html.BeginForm("_MyPartial", "MyControlloer", FormMethod.Post, new { id = "frmClient" }))
{
    <script type="text/javascript">
        $('form#frmClient').removeData("validator");
        $('form#frmClient').removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse($('form#frmClient'));
    </script>
}

3 个答案:

答案 0 :(得分:3)

由于部分视图加载,因此您必须重新添加表单验证,如下所述

    $("form").removeData("validator");
    $("form").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($('form'));

在部分视图加载处理程序或操作链接处理程序中添加这些行。

答案 1 :(得分:1)

我想你只是写错了选择器,这应该是:

$('form#frmClient').data('validator', null); 
$.validator.unobtrusive.parse('form#frmClient');

如果你已经在表单上有某个验证器并且需要重新绑定它,我会添加第一行。

答案 2 :(得分:0)

这一行对我来说很好!

$.validator.unobtrusive.parse("#formRegister");