MVC:客户端验证在打开和关闭一次后停止在SimpleModal AJAX弹出窗口中工作

时间:2010-08-18 07:33:31

标签: asp.net-mvc ajax validation modal-dialog simplemodal

我有一个带有simplemodal弹出窗口的视图。您单击超链接,它会弹出窗口,如果您尝试提交弹出窗体而不填写任何信息,它将在文本框旁边显示相应的验证错误消息。如果关闭模式弹出窗口并再次单击超链接,则单击提交时似乎不会进行客户端验证。它只是让它被提交,然后它将在服务器端检查它。为什么打开一个模态弹出窗口然后关闭它,然后重新打开第二次使验证停止工作?我正在使用SimpleModal Demos演示的基本osx模态。任何建议将不胜感激。我已经检查了网站,但如果有人有一个可能有用的上一篇文章也会受到赞赏。

这是我的部分视图文件:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NSS.Models.Company>" %>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    
<fieldset>
    <legend>New Company</legend>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Name)%>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Name)%>
        <%: Html.ValidationMessageFor(model => model.Company_Name)%>
    </div>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Phone)%>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Phone)%>
        <%: Html.ValidationMessageFor(model => model.Company_Phone)%>
    </div>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Fax)%>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Fax)%>
        <%: Html.ValidationMessageFor(model => model.Company_Fax)%>
    </div>

    <div class="editor-label">
        <%: Html.LabelFor(model => model.Company_Website)%>
    </div>

    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Company_Website)%>
        <%: Html.ValidationMessageFor(model => model.Company_Website)%>
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

该部分在.aspx:

的块中呈现
<div id='container'>
    <div id='content'>
        <div id='osx-modal'>
            <input type='button' name='osx' value='Demo' class='osx demo'/>
        </div>

        <!-- modal content -->
        <div id="osx-modal-content">
            <div id="osx-modal-title">Create a new Company</div>
            <div class="close"><a href="#" class="simplemodal-close">x</a></div>
            <div id="osx-modal-data">
                <h2>Create a new Company</h2>
                <% Html.RenderPartial("CreateForm", new NSS.Models.Company()); %>
                <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
            </div>
        </div>
    </div>
</div>

这是我的验证码:

public class Company_Validation
{
    [Required(AllowEmptyStrings=false, ErrorMessage = "Company Name is required")]
    [StringLength(50, ErrorMessage = "Company Name may not be longer then 50 characters")]
    public string Company_Name { get; set; }
}

1 个答案:

答案 0 :(得分:2)

由于SimpleModal处理模态内容的方式,听起来好像它正在丢失验证绑定。

一种选择是使用persist:true选项,但您可能希望确保清除任何填充的表单值。

例如:

$(element).modal({
    persist: true,
    onClose: function (dialog) {
        var modal = this;
        $('input, textarea', dialog.data[0]).val('');
        modal.close();
    }
});