如何让我的弹出窗口在 ASP.NET MVC 中的 AJAX 调用中关闭提交按钮？

Question

我有一个列出一堆项目的视图。我正在尝试做到这一点，以便当用户单击这些项目之一（来自表格行）的“动作事件”时，将出现一个弹出窗口。然后，用户可以更新有关此项目的相同信息，并提交信息或关闭它。无论他们选择哪个选项，我都会尝试关闭弹出窗口。

我已经完成了 90%，但我似乎无法解决一个小细节 - 按下提交按钮后关闭弹出窗口！我看到的许多解决方案似乎都不起作用，而且我似乎在调整它们以解决我的问题时遇到了一些麻烦。鉴于以下代码，我需要做哪些更改才能使其正常工作？

这是我所拥有的：

查看

Index.cshtml

<table>
@foreach (var item in Model)
    <tr>
        <td colspan="5" align="right">
                <a href="javascript:void(0);" class="anchorDetail" data-id="@item.AID">Action Event</a>
            </td>
        </tr>
    }
</table>


<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="myModalContent"></div>
        </div>
    </div>
</div>

<script>
    var TeamDetailPostBackURL = '/Database/Edit';
        $(function () {
                $(".anchorDetail").click(function () {
                        var $buttonClicked = $(this);
                        var id = $buttonClicked.attr('data-id');
                        var options = { "backdrop": "static", keyboard: true };
                        $.ajax({
                                type: "GET",
                                url: TeamDetailPostBackURL,
                                contentType: "application/json; charset=utf-8",
                                data: { "Id": id },
                                datatype: "json",
                                success: function (data) {
                                        $('#myModalContent').html(data);
                                        $('#myModal').modal(options);
                                        $('#myModal').modal('show');                   

                                },
                                error: function () {
                                        alert("Dynamic content load failed.");                    
                                }
                        });
                });
        });

</script>

弹出视图

Edit.cshtml

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.AID)
        <table>
        <tr>
         <td>@Html.LabelFor(model => model.Comment)</td>
         <td>@Html.TextAreaFor(model => model.Comment, new { @class = "form-control", rows = "5" })</td>
        </tr>
        <tr>
         <td><input type="submit" value="Save" class="btn btn-primary" id="btnSave"/></td>
         <td><button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button></td>
        </tr>
    </table>
     </div>
}

控制器

DatabaseController.cs

    public ActionResult Index()
    {
        return View(db.ActionableEvents.ToList());
    }

    public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        ActionableEvents actionableEvents = db.ActionableEvents.Find(id);
        if (actionableEvents == null)
        {
            return HttpNotFound();
        }
        return View(actionableEvents);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "AID,Comment")] ActionableEvents actionableEvents)
    {
        if (ModelState.IsValid)
        {
            db.Entry(actionableEvents).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(actionableEvents);
    }

我确实在这里看到了这个资源：asp.net submit button close Jquery Ajax，但我只是不知道如何将其调整为我现在正在做的事情。

我现在拥有的取消按钮可以正常工作。有什么方法可以为我的提交按钮使用数据关闭并让它仍然像我为取消按钮一样保存数据？我还看到一些解决方案在提交按钮中使用了 onClick() 参数，但随后它会使用 window.close() 选项。我不想关闭整个窗口，也不想提示用户。

有什么好的方法可以解决这个问题？我希望我的提交按钮像我的取消按钮一样工作，只保存数据。提前感谢您的任何建议！！！

Answer 1

您能否在Index.cshtml 中尝试以下操作（确保您为表单设置了一个 ID 并在下方更正）：

$("form").submit(function(){
   $('#modal').modal('toggle');
});

如果您想向服务器发出 AJAX 请求并保存数据，您可以执行以下操作（只需将以下代码包含在模态关闭按钮上的单击事件中）：

$.ajax({
    type: "POST",
    url: "SaveData",
    content: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(data),
    success: function (result) {
        // do something
    },
    error: function (result) {
        // do something
    }
});

并且有一个类似于以下的 MVC 操作：

[HttpPost]
public JsonResult SaveData()
{
    // save data
}

编辑： 在第二次阅读您的问题后，您需要将 Edit.cshtml 设为部分视图，然后在 Index.cshtml 上将您的部分视图包含在模态的 div 中，如下所示：

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            @Html.Partial("_EditView")
        </div>
    </div>
</div>

你的 JS 应该是这样的：

$("form").submit(function () {
    e.preventDefault();

    formData = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "SaveData",
        content: "application/json; charset=utf-8",
        dataType: "json",
        data: formData ,
        success: function (result) {
            // do something
        },
        error: function (result) {
            // do something
        }
    });

    $('#modal').modal('toggle');
});

JS 应该在 Index.cshtml 中，因为那是你的部分存在的地方，试试吧，你会看到的。