提交按钮不在模态上发布

Question

I have a form on a bootstrap modal with two buttons. This form is tied to an action named "DeleteWidgetConfirmed" I am trying to remove a widget from the database and from the front end, the panel gets removed from the front end but does not seem to get removed from the database.

Here is my Modal

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

Here is my action:

// 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();
    }

From my javascript I get the ID from the panel and store it into a variable, I then get the action attribute from my form and append the ID to the action attribute.

$(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) {
            }
        })           
    }
})

});

I have a hunch that maybe within my javascript I have overridden the default behaviour of the event.

What I want to achieve ultimately is

1. within the onclick event for the button to remove the panels(which works)
2. remove the entry within the database related to that panel.
3. When executing the post method do not refresh.

Answer 1

Try using AJAX to asynchronously post to your controller:

$(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?
             }
          });
        }
    });
});

How you handle the success callback depends on the UI, you can use the data- attributes to do so quite easily.

You need to decorate your action method as POST if you do this:

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