提交按钮不在模态上发布 - javascript

我有一个带有两个按钮的引导程序模态表单。该表单与一个名为“ 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中，我已经覆盖了事件的默认行为。

我最终想要实现的是

在按钮的onclick事件中删除面板（有效）
在数据库中删除与该面板相关的条目。
执行post方法时，请不要刷新。

参考方案

尝试使用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) {
    ...
}

使用php重新加载内容 - javascript

在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…

尽管刷新，jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器（php文件）的可折叠内部加载列表视图。但是，尽管刷新了jQuery元素，但jQuery格式并未应用于添加的HTML。我的页面在这里：http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码（仅相关代码）<script> lastRecor…

JavaScript处理期间数组内部的数组 - javascript

我正在尝试使用Ajax处理表单，并且在处理复选框时遇到了问题。我以为我可以在数组中做一个数组，将选中的框添加到数据对象中，但这似乎不起作用。它不会显示为控制台中对象的一部分或类似内容。我尝试了一些变化，但没有任何效果。这是当前的样子：var formData = { 'fname' : $('input[name=fname]&…

将简单的javascript代码转换为c＃ - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意，将javascript代码重写为c＃这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…