6

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

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

我有问题宽度 5a 和 6。

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

当我在服务器传递对话框上插入良好的数据和验证时，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;
});

4

1 回答 1

6

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

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

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

$("#inputCloseModal").click(function () {
    dialog.dialog('close');
    return false;
});
于 2011-06-13T08:13:18.627 回答