Question

I am interested in creating an AJAX form submit in a jQuery overlay. I am not sure how to approach this, do I just toss a partial view into the overlay?

I want to pass to the server the data in the form of a model so I can save it the the data base, I need to be able to create some sort of indication as to whether or not the request succeed. Can anyone guide me through this?

I am kinda new with AJax.

Answer 1

You could use jQuery UI Dialog. For example let’s suppose that you have a view model:

public class MyViewModel
{
    public string Foo { get; set; }

    [Required]
    public string Bar { get; set; }
}

and a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Modal(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return PartialView(model);
        }

        return Json(new { success = true });
    }
}

In this example the Index action will serve the main view which will simply contain a link allowing to show the form as a modal dialog.

Here’s the Index.cshtml view:

@Ajax.ActionLink(
    "show form in modal", 
    "modal", 
    new AjaxOptions { OnSuccess = "onModalLoad" }
)

<div id="modal"></div>

and the Modal.cshtml partial which will contain the form:

@model MyViewModel

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "onSubmitSuccess" }))
{
    <div>
        @Html.LabelFor(x => x.Foo)
        @Html.EditorFor(x => x.Foo)
        @Html.ValidationMessageFor(x => x.Foo)
    </div>
    <div>
        @Html.LabelFor(x => x.Bar)
        @Html.EditorFor(x => x.Bar)
        @Html.ValidationMessageFor(x => x.Bar)
    </div>

    <button type="submit">OK</button>
}

The last step is to wire everything using javascript. Here are the 2 callbacks used:

var onModalLoad = function (result) {
    $('#modal').html(result).dialog();
}

var onSubmitSuccess = function (result) {
    if (!result.success) {
        $('#modal').html(result);
    } else {
        alert('thanks for submitting');
        $('#modal').dialog('close');
    }
};

and that’s it.

Don’t forget to reference the jquery-ui and jquery.unobtrusive-ajax scripts to your page:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>