MVC: проверка клиента перестает работать во всплывающем окне SimpleModal AJAX после однократного открытия и закрытия - PullRequest
1 голос
/ 18 августа 2010

У меня есть представление с простым модальным всплывающим окном.Если щелкнуть гиперссылку, появится всплывающее окно, и если вы попытаетесь отправить всплывающую форму, не заполняя какую-либо информацию, рядом с текстовым полем появится соответствующее сообщение об ошибке проверки.Если вы закроете модальное всплывающее окно и снова нажмете гиперссылку, похоже, что при нажатии кнопки «Отправить» проверка на стороне клиента не выполняется.Он просто позволяет отправить его, а затем перехватит его при проверке на стороне сервера.Зачем открывать модальное всплывающее окно, а затем закрывать его, а затем снова открывать, чтобы проверка перестала работать?Я использую базовый мод OSX, который является демо в SimpleModal Demos .Любые предложения будут ценны.Я проверил этот сайт, но если у кого-то есть предыдущий пост, который может быть полезен, это тоже будет оценено.

Вот мой частичный файл просмотра:

<%@ 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 Ответ

2 голосов
/ 19 августа 2010

Из-за способа, которым SimpleModal обрабатывает содержимое модального режима, похоже, что он теряет привязку проверки.

Одним из вариантов будет использование параметра persist: true, но вы, вероятно, захотите удалить все заполненные значения формы.

Например:

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