Question

我在带有两个按钮的bootstrap模态上有一个表单。此表单与名为＆＃34; DeleteWidgetConfirmed＆＃34;的动作相关联。我试图从数据库和前端删除一个小部件，该面板从前端删除，但似乎没有从数据库中删除。

这是我的模态

<div class="modal fade" id="deleteWidgetModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Delete widget?</h4><!--add depending on which panel you have clicked-->
        </div>
        <div class="modal-body" id="myModalBody">
            <!--Depending on which panel insert content-->
            @using (Html.BeginForm("DeleteWidgetConfirmed", "Dashboard", FormMethod.Post))
            {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                Do you wish to delete this widget?

                <div class="form-group">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" value="DeleteWidgetConfirmed" class="btn btn-danger btn-ok" id="delete-widget">Delete</button>
                    </div>
                </div>
            </div>
            }
        </div>
    </div>
</div>

这是我的行动：

// POST: DashboardModels/Delete/5
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteWidgetConfirmed(int? id)
    {
        if(id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }

        DashboardModel dashboardModel = db.dashboards.Find(id);
        db.dashboards.Remove(dashboardModel);
        db.SaveChanges();
        return new EmptyResult();
    }

从我的javascript中我从面板中获取ID并将其存储到变量中，然后从表单中获取action属性并将ID附加到action属性。

$(document).ready(function () {
$('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
    var panel = this;
    //get id here

    //toggle the modal
    $('#deleteWidgetModal').modal('show');
    var widgetID = $(this).closest('.panel.panel-default').attr('data-widgetid');

    document.getElementById('delete-widget').onclick = function (event) {
        event.stopPropagation();

        //we make an ajax call to the controller on click
        $.ajax({
            url: '@Html.Raw(Url.Action("Dashboard", "DeleteWidgetConfirmed"))',
            data: { id: widgetID},
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function(data){
                var parentElement = $(panel).closest(".col-md-4.column");
                var targetElement = $(panel).closest(".panel.panel-default");
                targetElement.remove();

                //parentElement.addClass("expand-panel");
                checkEmptyPanelContainers();
                $('#deleteWidgetModal').modal('hide');
            },
            error: function (response) {
            }
        })           
    }
})

}）;

我有一种预感，可能在我的javascript中，我已经覆盖了事件的默认行为。

我最终想要实现的是

在onclick事件中，按钮可以删除面板（工作正常）
删除数据库中与该面板相关的条目。
执行post方法时不刷新。

Answer 1

尝试使用AJAX异步发布到您的控制器：

$(document).ready(function () {
    $('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
        var panel = this;
        //get id here

        //toggle the modal
        $('#deleteWidgetModal').modal('toggle');
        var widgetID = $(this).closest('.panel.panel-default').attr('data-widgetid');

        $.ajax({
             url: '/Dashboard/DeleteWidgetConfirmed/',
             type: 'POST',
             data: { id: widgetid },
             dataType: 'json',
             contentType: 'application/json; charset=utf-8',
             error: function (xhr) {
                // request failed, handle here!
             },
             success: function (result) {
                // request succeeded! handle that here. close the modal? remove the item from the UI?
             }
          });
        }
    });
});

如何处理成功回调取决于UI，您可以非常轻松地使用数据属性。

如果你这样做，你需要将你的动作方法装饰为POST：

[HttpPost]
public ActionResult DeleteWidgetConfirmed(int id) {
    ...
}

提交按钮不在模态上发布

1 个答案: