JQuery 模式弹出问题中的 ASP.net MVC 3 不显眼的客户端验证答案

【问题标题】：ASP.net MVC 3 Unobtrusive Client Validations in JQuery Modal Pop up IssueJQuery 模式弹出问题中的 ASP.net MVC 3 不显眼的客户端验证
【发布时间】：2011-09-30 03:48:44
【问题描述】：

当我尝试在应用程序中实现 ASP.net MVC 3 Unobtrusive Client Validations 时，呈现的 html 没有生成由 JQuery 生成的 span 标签。

我只有以下渲染 html，我使用 JQuery 模式弹出窗口作为我的部分视图的容器。

<input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />

但是，当我使用不显眼的客户端验证而没有弹出 JQuery 模式时，它在同一应用程序中正常工作，如下所示。

<div class="editor-field">
  <input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
  <span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>

当我在 JQuery Modal Popup 中使用 Unobtrusive Client 验证时，有什么需要实现的吗？

JQuery 弹出代码

 $(document).ready(function () {
        $('#actionPanelDialogs div').dialog({
            autoOpen: false,
            modal: true,
            width: 700,
            appendToBody: true
        });


        $('#actions a').click(function (event) {
            event.stopPropagation();
            event.preventDefault();
            var link = $(this);
            var action = link.attr('href');
            var dialogDivId = link.attr('rel');

            var dialogDiv = $('#' + dialogDivId);

            $.get(action, null, function (data) {
                dialogDiv.html(data);

                dialogDiv.dialog('open');                

            });
            return false;
        });
 });

【问题讨论】：

你能发布你的弹出窗口的javascript代码吗？

标签： asp.net-mvc-3 jquery unobtrusive-validation

【解决方案1】：

您必须手动触发对添加到 DOM 的任何新元素的解析。

jQuery.validator.unobtrusive.parse("#modalPopup");

如果您使用的是 jQuery UI

$( ".selector" ).dialog({
   open: function(event, ui) {
      jQuery.validator.unobtrusive.parse(ui);
   }
});

【讨论】：

来自 jQuery 文档：注意：ui 对象是空的，但包含在内是为了与其他事件保持一致。因此您可能必须使用选择器来查找所需的元素解析

【解决方案2】：

找到问题了，

我使用表单 html 来创建表单元素，如下所示。

<form  action="@Url.Action("Create", "Person")" enctype="multipart/form-data" method="post" id="contactForm">

当我使用 Html 助手时，它可以正常工作。

@{using (Html.BeginForm("Create", "Person", new { enctype = "multipart/form-data", id = "contactForm" }))

【讨论】：

【解决方案3】：

对于使用引导模式的任何人，请使用以下代码：

$('#myModal').on('shown.bs.modal', function () {
    jQuery.validator.unobtrusive.parse($(this));
})

感谢 Josh 的勇气。

【讨论】：

【解决方案4】：

尝试了所有方法，这对我有用：

$(".showModal").click(function () {
            var id = $(this).attr("data-id");
            $("#modal").load("/Controller/Action?id=" + id, function () {
                $("#modal").modal();
                $.validator.unobtrusive.parse($("#modal"));
            })
        });

【讨论】：