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

Question

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

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

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

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

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

控制器代码：

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

[HttpPost]
public ActionResult Create(UserDTO model)
{
    if(model.Email != "[email protected]")
    {
     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;
});

Answer 1

呵呵。
这就是我喜欢编程的原因。

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

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

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

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