jquery - jquery 对话框中的服务器端验证

Question

抱歉我的语言 - 我只能阅读英语:)

我想在 asp.net mvc 中做这样的事情:
1.向用户展示一个页面
2.打开模态对话框(jquery-ui)并显示部分 View
3.在客户端验证用户输入数据
4.如果没问题则验证服务器上的输入数据
5a.如果没问题的话我想重新加载页面
5b.如果有错误我想向用户显示它
6. 用户可以随时使用按钮关闭对话框。

我有宽度 5a 和 6 的问题。

在 Firefox 中，当我进行服务器验证并单击关闭按钮(对话框('close'))时，当我重定向到调用验证数据的页面时。如果我单击对话框标题中的“x”，则关闭即可。在歌剧中也是同样的情况。

在 Firefox 中，当我在服务器传递对话框上插入良好的数据和验证时，附加功能不会关闭(它在 Opera 中工作)。
我在 MVC 方面没有丰富的经验，不知道我做得是否正确。请查看我的代码并告诉我它是否错误，我不应该这样做。

Controller 代码:

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

表单 View 如下所示:

// 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;
});

Answer 1

呵呵。
这就是我喜欢编程的原因。 解决方案非常简单，我将其发布在这里以避免其他人花一天时间搜索该错误。
在我的解决方案中，当我重新加载对话框的内容时，我忘记将函数附加到按钮关闭。这就是为什么在服务器验证重定向到此操作(主页/创建)后单击关闭按钮的原因。

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

在此代码之后，我添加了此代码及其工作原理。

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