JQuery dialog: how to get the dialog to update with server side errors/messages

Question

I am attempting to use a JQuery dialog to popup a window upon let's say, an add button, which will therefore show a dialog with a Html.BeginForm() form within.

Either by using the buttons from the dialog, or putting a dialog within, I wish to submit the form, and then get the form back, either to show an update that the add is successful, or to show that there are some issues with the form (eg: server side errors)

EG:

public ActionResult EventSave(EventManageModel model)
{
        if (fake error, db save failed)
            ModelState.AddModelError("_FORM", "DB save failed!");
        return PartialView("EventManage", model);
}

I think I got the client side validation right, by using :

$.validator.unobtrusive.parse("#EventManage");

But my big question is actually server side validation/server side data retrieval. I don't think Remote Validation works for me because this kind of errors would be more/less form-based errors instead of a specific textbox for example.

How can I get this to work? I have really no clue, I have tried theoretically everywhere to get this to work.

At the moment, when the dialog form submits, I have something like this:

      "Save": function () {
                    $.validator.unobtrusive.parse("#EventManage");

                    if ($("#EventManage").valid()) {

                        $.ajax({
                            url: "/Home/EventSave",
                            type: 'POST',
                            data: $("#EventManage").serialize(),
                            success: function (result) {
                                $("#EventManage").html(result);
                            },
                            error: function (result) {
                                $("#EventManage").html(result);
                            }
                        });
                    }
                },

I am not getting what I want however, the dialog doesn't seem to be updating to and updated partial view, with no errors.

I am following this example actually, on how to get it to work:

http://iwantmymvc.com/dialog-form-with-jqueryui-and-mvc-3

Please give some tips on how to get this thing done? :)

EDIT:

My EventManage partial form:-

@model Harrods.Web.Models.EventManageModel


<div>
@using (Html.BeginForm("EventSave", "Home", FormMethod.Post, new { id = "EventManage", @class = "Dialog" }))
{
    @Html.ValidationSummary(false, "Please correct the errors below and try again:", new { @class = "ui-state-error ui-corner-all" })<br />
        <br />
        @Html.AntiForgeryToken()
        <fieldset>
        <legend>Event Details</legend>
        <br />
        @Html.Hidden("Id")
        <div class="editor-label-dialog">
            @Html.LabelFor(m => m.Event_Name)
        </div>
        <div class="editor-field-dialog">
            @Html.TextBoxFor(m => m.Event_Name)
            <br />
            @Html.ValidationMessageFor(m => m.Event_Name)
        </div>
        <p class="clear"></p>
        <br />
        <div class="editor-label-dialog">
            @Html.LabelFor(m => m.Event_Date)
        </div>
        <div class="editor-field-dialog">
            @Html.TextBoxFor(m => m.Event_Date)
            <br />
            @Html.ValidationMessageFor(m => m.Event_Date)
        </div>
        <p class="clear"></p>
        <br />
        <input type="submit" class="addNew" value="Save" />
        <div class='loading' style='display: none'><img src="@Url.Content("~/Assets/img/loading.gif")" title="Loading" /></div>
        </fieldset>
}
</div>

EDIT2

It seems like I got it to work for >> success: function (result)

but it doesn't go into the error: function (result)

even though there's already an error.

Answer 1

In order to show error messages that are not specific to some given input and that were added to the modelstate you could use the ValidationSummary helper. So put the following somewhere inside the partial:

@Html.ValidationSummary(true)