проверка на стороне сервера в диалоге jquery - PullRequest
Новая
       17

проверка на стороне сервера в диалоге jquery

6 голосов
/ 13 июня 2011

извините за мой язык - на английском я могу только читать :)

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

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

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

дополнительные в Firefox, когда я вставляю хорошие данные, и диалоговое окно проверки сервера не закрывается (это работает в опере).
У меня нет большого опыта в 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;
});

1 Ответ

6 голосов
/ 13 июня 2011

хех.
Вот почему я люблю программирование.
Решение очень простое, и я публикую его здесь, чтобы другие люди не тратили день на поиск этой ошибки.
В моем решении я забываю прикрепить функцию к кнопке закрытия, когда я перезагружаю содержимое диалогового окна. вот почему нажмите кнопку «Закрыть» после проверки сервера и перенаправьте на это действие (Главная / Создать). 

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

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

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