在MVC4应用程序中关闭jQuery模式对话框

时间:2015-07-11 16:51:08

标签: javascript asp.net-mvc-4 razor

我正在使用javascript在MVC4应用程序中创建一个jquery模式对话框。但是在模态对话框中提交ajax表单时无法关闭对话框。

创建对话框的链接:

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

addItem方法返回一个ajax表单(下面的代码)作为partialview,它在模态对话框中呈现。使用Ajax以便在提交时仅更新页面的一部分:

@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>
}

提交表单会调用addItem操作方法,并按预期替换div内容。但我也希望表格在提交时结束。任何建议都会很棒。

1 个答案:

答案 0 :(得分:2)

在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
    }