数据注释不会在部分视图上引发客户端验证

时间:2014-01-15 15:45:49

标签: jquery asp.net asp.net-mvc validation asp.net-mvc-4

我正在开发一个asp.net MVC Web应用程序,我有以下主要观点: -

@model TMS.ViewModels.ServerOnIT360Only
<div id ="VMTable2">

                        <div class="pagedList" data-tms-target="#VMTable">
                         @Html.PagedListPager(Model.Resources , page => Url.Action("IT360Asset","Server", new { page }),
                         PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.ClassicPlusFirstAndLast, new AjaxOptions { UpdateTargetId = "VMTable2" , LoadingElementId="progress2" }))

                        </div>
                             <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress2" />

                        @Html.Partial("~/Views/Server/_ServerTable2.cshtml",Model)
                    <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress3" />
                             <div class="pagedList" data-tms-target="#VMTable">
                         @Html.PagedListPager(Model.Resources , page => Url.Action("IT360Asset","Server", new { page }),
                         PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.ClassicPlusFirstAndLast, new AjaxOptions { UpdateTargetId = "VMTable2" , LoadingElementId="progress3"}))

                        </div>  </div>

以下_ServerTable2.cshtml局部视图,将在用户点击分页号码时呈现: -

@model TMS.ViewModels.ServerOnIT360Only
<table class="table table-striped table-bordered bootstrap-datatable datatable">
    <tr>
        //code goes here....
    </tr>

@foreach (var item in Model.Resources) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.RESOURCENAME)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.SystemInfo.MODEL)
        </td>


        //code goes here
         <td id = "@item.RESOURCEID">



@using (Ajax.BeginForm("IT360Asset","Server", new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId =   item.RESOURCEID.ToString() ,
 LoadingElementId = item.RESOURCEID.ToString() + "imag",
 HttpMethod = "POST"


}


)){


    @Html.AntiForgeryToken()
   <span class="f"> @Html.DisplayNameFor(model=>model.Server.RoleID)</span>

     @Html.DropDownListFor(model => model.Server.RoleID, ((IEnumerable<TMS.Models.TechnologyRole>)ViewBag.TechRole).Select(option => new SelectListItem
{
    Text = (option == null ? "None" : option.Name),
    Value = option.RoleID.ToString(),
    Selected = (Model.Server != null) && (option.RoleID == Model.Server.RoleID)
}), "Choose...", new  {@class="SmallDropDown" })
    @Html.ValidationMessageFor(model =>model.Server.RoleID)



   <span class="f">Rack</span>

     @Html.DropDownListFor(model =>model.Server.RackID, ((IEnumerable<TMS.Models.TMSRack>)ViewBag.Racks).Select(option => new SelectListItem {
        Text = (option == null ? "None" : option.Technology.Tag), 
        Value = option.TMSRackID.ToString(),
        Selected = (Model != null) && (Model.Server != null) && (option.TMSRackID == Model.Server.RackID)
    }), "Choose...",new  {@class="SmallDropDown" })
    @Html.ValidationMessageFor(model =>model.Server.RackID)


    @Html.Hidden("ResourceID", item.RESOURCEID)
    @Html.Hidden("Product",item.ComponentDefinition.COMPONENTNAME)
    @Html.Hidden("Model", item.SystemInfo.MODEL)


 <input type="submit" value="Add To TMS" class="btn btn-primary"/>
    <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="@(item.RESOURCEID.ToString())imag"/>
}
</tr>
}

</table>

  @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

现在,当用户导航到主视图,并且他点击了Ajax.BeginForm时,所有客户端验证都能正常工作(基本上是[Required]验证)。但是,如果用户导航到页码2并调用仅呈现局部视图的操作方法;然后所有客户端验证将停止工作? 任何人都可以建议我如何在呈现部分视图时强制这些客户端验证工作。目前客户端验证只有在action方法直接呈现主视图时才有效,但在点击只会呈现_ServerTable2.cshtml局部视图的分页后,客户端验证将无效,用户甚至可以提交表单如果所有必填字段都为空。 任何人都可以建议导致这个问题的原因,以及我如何解决这个问题?

由于

1 个答案:

答案 0 :(得分:1)

我假设你的js包中有jquery.validate.unobtrusive。否则你需要添加它。

你需要运行

$.validator.unobtrusive.parse("Selector to form need validation");

加载ajax内容后,为ajax加载的内容启用客户端验证。

最简单的方法是添加:

<script>
    $(document).ready(function() {
        $.validator.unobtrusive.parse("#VMTable2 form");
    });
</script>

对你的偏爱。但是,这可能会导致一些问题,因为您的初始非Ajax页面内容使用相同的部分内容。

如果上面提示你有任何脚本错误,那么你需要添加

$.validator.unobtrusive.parse("#VMTable2 form");

改为你的Paginator的AjaxOptions的“OnComplete”。