Close jQuery modal dialog in MVC4 app

Question

I am creating a jquery modal dialog in an MVC4 application using javascript. But am unable to close the dialog upon submitting the ajax form inside the modal dialog.

Link to create dialog:

@Html.RouteLink("Add item",
                        new
                        {
                            Action = "AddItem",
                            Controller = "User"
                        },
                        new
                        {
                            @class = "openDialog",
                            data_dialog_id = "addItemDialog",
                            data_dialog_title = "Add item",
                            title = "Add item"
                        })

The addItem method returns an ajax form (code below) as a partialview, which is rendered inside the modal dialog. Ajax is used so that only one part of the page is updated upon submit:

@model WebApp.AppModels.UserAddItemModel

@using (Ajax.BeginForm("AddItem", "User", null, new AjaxOptions()
                                                        {
                                                            HttpMethod = "POST",
                                                            Url = Url.Action("AddItem", "User"),
                                                            InsertionMode = InsertionMode.Replace,
                                                            UpdateTargetId = "Item" 
                                                        }, new { id = "AddItemForm" }))
{
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        <fieldset>
            <legend>Add Item</legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.ItemName)
                    @Html.TextBoxFor(m => m.ItemName)
                    @Html.ValidationMessageFor(m => m.ItemName)
                </li>
            </ol>
                <input type="submit" class="left" value="Submit" name="action:submit-additem" />
                <input type="submit" class="right" value="Cancel" name="action:cancel-additem" />
        </fieldset>
}

Submitting the form invokes the addItem action method, and replaces the div contents as expected. But I would also like the form to close on submit. Any suggestions would be great.

Answer 1

Add this parameter in ajax begin form

@model WebApp.AppModels.UserAddItemModel

@using (Ajax.BeginForm("AddItem", "User", null, new AjaxOptions()
                                                            {
                                                                HttpMethod = "POST",
                                                                Url = Url.Action("AddItem", "User"),
                                                                InsertionMode = InsertionMode.Replace,
                                OnSuccess = "updateSuccess",
                                                                UpdateTargetId = "Item" 
                                                            }, new { id = "AddItemForm" }))
    {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>Add Item</legend>
                <ol>
                    <li>
                        @Html.LabelFor(m => m.ItemName)
                        @Html.TextBoxFor(m => m.ItemName)
                        @Html.ValidationMessageFor(m => m.ItemName)
                    </li>
                </ol>
                    <input type="submit" class="left" value="Submit" name="action:submit-additem" />
                    <input type="submit" class="right" value="Cancel" name="action:cancel-additem" />
            </fieldset>
    }

    function updateSuccess()
    {
    // closing code goes here
    }