c# - 如何让我的 Popup 在 ASP.NET MVC 中通过 AJAX 调用关闭提交按钮？

Question

我有一个列出一堆项目的 View 。我试图做到这一点，以便当用户点击其中一项(来自表格行)的“操作事件”时，将出现一个弹出窗口。然后用户可以更新关于该项目的相同信息，并提交信息或关闭它。无论他们选择哪个选项，我都会尝试让弹出窗口关闭。

我已经完成了 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>

弹出 View

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

Controller

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 Action 类似于:

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

编辑:第二次阅读您的问题后，您需要将 Edit.cshtml 设为部分 View ，然后在 Index.cshtml 上将您的部分 View 包含在模态的 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 中，因为那是你的部分存在的地方，试试吧，你会看到。