jquery客户端验证无法在MVC3局部视图中工作

Question

我似乎无法使用以下部分视图进行客户端验证.此视图位于父视图中的divTSettings div内.从stackoverflow和其他网站尝试了很多东西,似乎没什么用.有任何想法吗？

<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>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>


@using (Ajax.BeginForm("CreateT", "TAdmin", null,
        new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divTSettings"},
                       new { id = "CreateTForm" }))
{
    <div>
        <label>Name:</label>
        <input type="text" name="tName" id="tName"/>
        @Html.ValidationMessage("tName")
        <input type="submit" value="Submit"/>
    </div>
}

<script type="text/javascript">
$(function() {
    $('#CreateTForm').validate({
        rules: {
            tName: {
                required: true
            }
        },
        messages: {
            tName: {
                required: 'Name required'
            }
        }
    });
    $("#CreateTForm").removeData("validator");
    $("#CreateTForm").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("#CreateTForm");
});
</script>

Answer 1

有任何想法吗？

是的,您应该做的第一件事就是<script>从局部视图中删除所有这些标签.部分视图不应包含任何脚本.部分视图应仅包含标记.我已经重复了很多次,仍然看到人们把脚本放在那里.脚本应该在您的布局或您已在其中呈现部分的主视图中注册,可能通过覆盖布局中注册的一些脚本部分,以便所有脚本插入到HTML文档的末尾,就在结束</body>标记之前.这就是他们所属的地方.

好了,现在来看实际的问题:不显眼的验证不能在动态添加元素到DOM的情况下开箱即用 - 例如向服务器发送AJAX请求,返回局部视图,这个局部视图是然后注入DOM.

为了使其工作,您需要使用不显眼的验证框架注册这些新添加的元素.为此,您需要调用$.validator.unobtrusive.parse新添加的元素:

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

您应该将此代码放在将部分注入DOM的AJAX成功处理程序中.注入新元素后,只需调用此函数即可.

如果您不是使用jQuery($ .ajax,$ .post,...)手动编写AJAX请求,但依赖于某些Ajax.BeginForm和Ajax.ActionLink帮助程序为您完成工作,则需要订阅AjaxOptions中的OnSuccess回调并将此代码放在那里.