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

Question

对不起,我的语言-英语我只能阅读:)

我想在asp.net mvc的是这样做的:
1,显示用户页面
2.打开模态对话框(jQuery的UI),并显示局部视图
3.验证用户客户端输入数据
4.如果可以,则验证服务器
5a 上的输入数据.如果没关系那么我想重新加载第
5b 页.如果有错误我想向用户
6 显示它.用户可以随时用按钮关闭对话框.

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

当我做服务器验证时点击关闭按钮(对话框('关闭'))当我重定向到调用验证数据的页面时在Firefox中.如果我在对话框的标题中单击"x",它就会关闭.在歌剧中,情况也是如此.

另外在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;
});

Answer 1

嘿嘿.
这就是为什么我喜欢编程.
解决方案非常简单,我在这里发布,以避免其他人花了一天时间搜索该bug.
在我的解决方案中,当我重新加载对话框的内容时,我忘记将功能附加到按钮关闭.这就是在服务器验证重定向到此操作(Home/Create)后单击关闭按钮的原因.

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

在此代码之后,我添加此代码及其工作.

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