Ajax发布请求没有通过ID

时间:2015-06-03 08:49:17

标签: javascript html ajax asp.net-mvc-5 http-post

我目前正在通过javascript动态设置小部件的数据属性,然后我去删除小部件时获取属性,这样我就可以从数据库中删除小部件条目。我已经逐步完成了firebug中的代码,它似乎使得widgetID很好,但是当我去做一个ajax post请求时,它似乎没有附加路由值的ID。

这是模式:

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, new { id = "__AjaxAntiForgeryForm" }))
            {
                @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>

这是我为widget设置的小部件的呈现HTML:

<div class="panel panel-default" draggable="true" data-widgetid="4">
<div class="panel-heading">
<div class="panel-body">

然后我尝试发帖子:

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

        //anti forgery token
        var form = $('#__AjaxAntiForgeryForm');
        var token = $('input[name="__RequestVerificationToken"]', form).val();

        var URL = '/Dashboard/DeleteWidgetConfirmed';

        console.log(widgetID + " test1");
        //we make an ajax call to the controller on click
        $.ajax({
            url: URL,
            data: {
                __RequestVerificationToken: token,
                id: widgetID   
            },
            type: 'POST',
            dataType: 'json',
            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) {
                console.log(widgetID + " ERROR");
            }
        })           
    }
})

});

这是我从firebug中的NET面板获取的HTTP POST请求:

  

/仪表板/ DeleteWidgetConfirmed

这是我的控制器:

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

以下是我的回复传递的参数: this answer

0 个答案:

没有答案