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请求并保存数据，则可以执行以下操作（只需将以下代码包含在模态中关闭按钮上的click事件中）：

$.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中，因为那是您的部分文件存在的地方，请尝试一下，您会看到的。

Answer 2

因此，经过大量的研究，我提出了以下解决方案：

查看

Index.cshtml

<table>
@foreach (var item in Model)
    <tr>
            <td>
                <button class="btn btn-primary" onclick="ActionAway(@item.AID)">Action Event</button>
            </td>
    </tr>
    }
        </tbody>
</table>

<div class="modal fade" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Action This Event</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv1">

            </div>
        </div>
    </div>
</div>
</div>

<script>
    var ActionAway = function (theid) {
        var url = "/Database/Edit?id=" + theid;

        $('#myModalBodyDiv1').load(url, function () {
            $('#myModal1').modal("show");
        })
    }

</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 colspan="2">
                <input type="submit" value="Save" class="btn btn-primary" id="btnSave"/>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        </td>
        </tr>
    </table>
     </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script>
    $(document).ready(function () {
    $("#btnSave").click(function () {
        $.ajax({
            success: function () {
                $("#myModal").modal("hide");
            }
        })
    })
})
</script>

我能够离开控制器而无需进行任何更改。再次感谢您的所有帮助！

如何在ASP.NET MVC中通过AJAX调用关闭“弹出”窗口的提交按钮？

2 个答案: