jQuery的对话框服务器端验证对话框、服务器端、jQuery

2023-09-10 13:43:54 作者:现在的你╰会在何处ζ°

对不起我的语言 - 英语我只能读:) 我想在asp.net mvc的是这样的: 1.显示用户页面 2.打开模态对话框(jQuery的-UI),并显示局部视图 在客户端 3.验证用户输入的数据 4.如果是OK,然后验证服务器输入数据 5A。如果它是确定的话,我想重新加载页面 5B。如果有一个误差我想要显示其用户 6.用户可以在任何时间就可以了按钮关闭对话框。 我有问题的宽度5A和6 在Firefox当我做服务器的验证,然后单击关闭按钮(对话框(亲密)),当我得到重定向到被调用来验证数据的页面。如果我点击X在对话框标题已经很接近了确定。在歌剧这是同样的情况。 另外在Firefox当我插入一个好的数据和验证服务器通对话框不关闭(在歌剧它的工作)。 我没有在MVC大赛经验,不知道如果我这样做的权利。请看看我的code和告诉我,如果这是错误的,我不应该这样做的。

sorry for my language - in English i can only read :) i want to do in asp.net mvc something like this: 1. show user a page 2. open modal dialog (jquery-ui) and show partial view 3. validate user input data on client side 4. if it's OK then validate input data on server 5a. if it's OK then i want reload page 5b. if there is a errors i want show its to user 6. user can close dialog at any time with button on it. i have problem width 5a and 6. in Firefox when i do server validate and click close button (dialog('close')) when i get redirect to page that was call to validate data. if i click 'x' in header of dialog box it's close OK. In opera it's the same situation. additional in Firefox when i insert a good data and validation on server pass dialog box don't close (it's work in opera). i don't have big experience in mvc and don't know if i do it right. please look at my code and tell me if it's wrong and i shouldn't do it that way.

CONTROLER code:

controler code:

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的索引页面

// javascript on index page

<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 表单视图看起来像这样:

I import js files in order: jquery-1.6.1.js, jquery-ui-1.8.13.js, jquery.validate.js, jquery.validate.unobtrusive.js the form view looks like that:

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

推荐答案

嘿嘿。 这就是为什么我喜欢编程。  解决的方法很简单,我就在这里发布,以避免其他人花了一天时间搜索了错误。 我的解决方案我忘了附加功能键关闭,当我重新加载该对话框的内容。这就是为什么在关闭按钮,点击后,服务器的验证重定向到这个动作(首页/创建)。

heh. this is why i love programming. the solution is very simple and i post it here to avoid other people to spent a day searching that bug. in my solution i forget to attach function to button close when i reload content of the dialog box. this is why click on the close button after server validation redirect to this action (Home/Create).

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

在此之后codeI添加此code和它的工作。

after this code i add this code and its working.

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