Ajax.BeginForm（）发布方法未返回部分视图

Question

I have a MVC application and I'm trying to insert properties of objects. For that, I made a modal popup via jQuery dialog. I don't want it interfering with other actions that the user is doing, so I made an Ajax.BeginForm. I hoped that when I do the insert, it will close on return PartialView(), but it opens the popup View on full screen instead of closing the dialog. Also, it is important that the base view should be dynamic, so you can open the dialog on any page and not make a postback.

I've read the other similar issues and couldn't resolve my problem.

There are some similar issues, but none of them

Please, help me to achieve the proper function if possible. Code below:

JS:

<script>
            $(document).ready(function () {
                var url = "";
                $("#dialog-alert").dialog({
                    title: 'Error encountered!',
                    autoOpen: false,
                    resizable: false,
                    width: 350,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true
                });

                if ('@TempData["msg"]' != "") {
                    $("#dialog-alert").dialog('open');
                }

                $("#lnkServer").on("click", function (e) {
                    //e.preventDefault(); //use this or return false
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new Server" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#lnkIssType").on("click", function (e) {
                    //e.preventDefault(); //use this or return false
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new Issue Type" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#lnkUser").on("click", function (e) {
                    //e.preventDefault(); //use this or return false
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new User" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#lnkDept").on("click", function (e) {
                    //e.preventDefault(); //use this or return false
                    url = $(this).attr('href');
                    $('#dialog-edit').dialog({ title: "Add a new Department" });
                    $("#dialog-edit").dialog('close');
                    $("#dialog-edit").dialog('open');
                    return false;
                });

                $("#dialog-edit").dialog({
                    autoOpen: false,
                    resizable: false,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        //$(".ui-dialog-titlebar-close").hide();
                        $(this).load(url);
                    }
                    //buttons: {
                    //    "Cancel": function () {
                    //        $(this).dialog("close");
                    //    }
                    //}
                });
            });

        function onSuccess() {
            $("#dialog-edit").dialog('close');
        }
    </script>

Form:

<div id="container">
        @using (Ajax.BeginForm("AddDept", new AjaxOptions { OnSuccess = "onSuccess" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <div>
                <fieldset>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Department_Name)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.Department_Name, htmlAttributes: new { @class = "form-control text-box single-line input-properties", placeholder = "Collections" })
                    </div>
                    <div class="editor-label">
                        @Html.ValidationMessageFor(model => model.Department_Name)
                    </div>

                    <input type="submit" value="Submit" class="btn btn-default btn-add-properties" />
                </fieldset>
            </div>
        }
    </div>

Controller:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AddDept([Bind(Include = "Department_Name")] Department @dept)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    db.Departments.Add(@dept);
                    db.SaveChanges();
                    TempData["Msg"] = "Data has been saved successfully";
                    return PartialView();
                    //return Redirect(System.Web.HttpContext.Current.Request.UrlReferrer.PathAndQuery);
                }
            }
            catch
            {
                TempData["Msg"] = "Probably the record already exists. If not, contact Georgi Georgiev, RA Dept.";
                return PartialView();
            }
            return PartialView(@dept);
            }

Answer 1

My problem was probably due to that my Ajax.BeginForm popup View relied on different ActionResult in the controller compared to the Background View's.

Anyway, it turns out that I couldn't achieve my functionality without having a POST through Ajax.

Here's what I did (in Layout view):

$("#dialog-edit").dialog({
                    autoOpen: false,
                    resizable: false,
                    width: 400,
                    show: { effect: 'drop', direction: "up" },
                    modal: true,
                    draggable: true,
                    open: function (event, ui) {
                        //$(".ui-dialog-titlebar-close").hide();
                        $(this).load(url);
                    },
                    buttons: [{
                        text: "Submit",
                        "class": "btn-add-properties",
                        click: function () {
                            var form = $('form', this);
                            $.post(form.prop('action'),
                                   form.serialize(),
                                   function (response) {
                                       alert("success");
                                   })
                                   .fail(function () {
                                       alert("error");
                                   });
                            $("#dialog-edit").dialog('close');
                        }
                    }]
                });

The ajax post is the function under the dialog button.