提交按鈕不在模態上發布

Question

我有一個帶有兩個按鈕的引導程序模態表單。 該表單與一個名為“ DeleteWidgetConfirmed”的動作相關聯。我試圖從數據庫中刪除一個小部件，並且從前端將面板從前端刪除，但似乎並未從數據庫中刪除。

這是我的模態

<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中，我已經覆蓋了事件的默認行為。

我最終想要實現的是

1. 在按鈕的onclick事件中刪除面板（有效）
2. 在數據庫中刪除與該面板相關的條目。
3. 執行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，您可以使用data-attribute來輕松實現。

如果執行此操作，則需要將操作方法​​裝飾為POST：

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