Server side validation in jquery dialog

Question

Sorry for my language - in English I can only read :)

I want to do something like this in asp.net mvc:
1. show the user a page
2. open a modal dialog (jquery-ui) and show a partial view
3. Checking user input on the client side
4. if it is OK, then check the input on the server
5a. if it is ok, then I want to reload the page
5 B. if there are errors, I want to show them to the user
6. The user can close the dialog at any time using the button on it.

I have problem widths 5a and 6.

in Firefox, when I check the server and click the close button (dialog ("close")), when I get a redirect to the page that was the call to check the data. if I press "x" in the title bar of the dialog box, it will close. In opera, this is the same situation.

optionally in Firefox, when I insert good data and verify that the server transfer dialog box does not close (it works in opera).
I do not have much experience in mvc and I do not know if I am doing this correctly. look at my code and tell me if it is wrong and I should not do this.

the code:

public ActionResult Create()<br/> { return PartialView(new UserDTO()); } [HttpPost] public ActionResult Create(UserDTO model) { if(model.Email != " [e-mail] ") { ModelState.AddModelError("Email", "wrong email"); return PartialView(model); } return new EmptyResult(); } 

// javascript on the 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 is as follows:

 // 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.
that is why i like to program.
The solution is very simple, and I am posting it here so that other people do not spend a day looking for this error.
in my solution, I forgot to attach the function to the button when I reload the contents of the dialog box. therefore, click the close button after redirecting the server validation to this action (Home / Create).

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

after this code I add this code and its work.

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