Блог

извините за мой язык — на английском я могу только читать 🙂

я хочу сделать в asp.net mvc что-то вроде этого:
1. показать пользователю страницу
2. открыть модальный диалог (jquery-ui) и показать частичный просмотр
3. проверить введенные пользователем данные на стороне клиента
4. если все в порядке, то проверьте входные данные на сервере
5a. если все в порядке, то я хочу перезагрузить страницу
5b. если есть ошибки, я хочу показать их пользователю
6. пользователь может закрыть диалоговое окно в любое время с помощью кнопки на нем.

у меня проблема шириной 5a и 6.

в Firefox, когда я выполняю проверку сервера и нажимаю кнопку закрытия (dialog (‘закрыть’)), когда я получаю перенаправление на страницу, которая была вызвана для проверки данных. если я нажму «x» в заголовке диалогового окна, все будет в порядке. В opera та же ситуация.

дополнительно в Firefox, когда я вставляю правильные данные, и диалоговое окно проверки при передаче сервера не закрывается (это работает в opera).
у меня нет большого опыта работы с mvc, и я не знаю, правильно ли я это делаю. пожалуйста, посмотрите на мой код и скажите мне, если это неправильно, и я не должен делать это таким образом.

код контроллера:

 public ActionResult Create()<br/>
{
    return PartialView(new UserDTO());
}

[HttpPost]
public ActionResult Create(UserDTO model)
{
    if(model.Email != "fromasz@gmail.com")
    {
     ModelState.AddModelError("Email", "wrong email");
     return PartialView(model);
    }
 return new EmptyResult();
}
  

// javascript на индексной странице

 <script type="text/javascript">
var dialog;

    $(document).ready(function () {
        dialog = $("#divInsert").dialog({
            title: "Insert",
            resizable: false,
            modal: true,
            autoOpen: false
        });

        $("#aShowInsert").click(function () {
            $("#divInsert").empty();
            $("#divInsert").load("Home/Create", function () {
                $("#inputCloseModal").click(function () {
                    dialog.dialog('close');
                    return false;
                });
            });

            dialog.dialog("open");
            return false;
        });
    });
</script>
  

 <div id="divInsert" /> - its a dive where i loads form.
<a id="aShowInsert">add element</a> - link thats open dialog.
  

Я импортирую js-файлы по порядку: jquery-1.6.1.js, jquery-ui-1.8.13.js, jquery.validate.js, jquery.validate.unobtrusive.js

вид формы выглядит следующим образом:

 // import js..
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Surname)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Surname)
    @Html.ValidationMessageFor(model => model.Surname)
</div>
<div class="editor-label">
    @Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
</div>
<p>
    <input type="submit" value="Create" id="inputSubmit" />
    <input type="submit" value="Close" id="inputCloseModal" />
</p>
}

<script type="text/javascript">
$("#inputSubmit").click(function (e) {
    e.preventDefault();
    var form = $("#divInsert form");
    form.validate();

    if (form.valid()) {
        $.ajax({
            url: "/Home/Create",
            data: form.serialize(),
            type: "POST",
            success: function (data) {
                if (data === "") {
                    location.reload();
                }
                else {
                    $("#divInsert").html(data);

                    $.validator.unobtrusive.parse($("#divInsert"));
                }
            }
        });
    }

    return false;
});
  

хех.
вот почему я люблю программирование.
решение очень простое, и я публикую его здесь, чтобы другие люди не тратили день на поиск этой ошибки.
в моем решении я забываю прикрепить функцию к кнопке закрытия при перезагрузке содержимого диалогового окна. вот почему нажмите на кнопку закрыть после перенаправления проверки сервера на это действие (Home / Create).

 $("#divInsert").html(data);
$.validator.unobtrusive.parse($("#divInsert"));
  

после этого кода я добавляю этот код и его работу.

 $("#inputCloseModal").click(function () {
    dialog.dialog('close');
    return false;
});