server side validation in jquery dialog

Question

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:

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 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.

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

Answer 1

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"));

after this code i add this code and its working.

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