时间戳

首页 > 解决方案 > 发送到控制器时，Ajax 发布数据为空

javascript - 发送到控制器时，Ajax 发布数据为空

问题描述

在我的视图中，我有一个 VM 将 db 表中的数据吐到数据表中。我有一个删除按钮，如果选择了请求的列中的按钮，则该数据条目的行将被删除。我的删除按钮正在由对我的控制器函数的 Ajax 调用处理......但是当我调试控制器时，参数似乎包含所有空数据。我在这里错过了什么吗？我在这个（未显示）上方的部分表格中还有一个按钮，以相同的方式处理，这个有零问题..

看法：

<div class="row">
    <div class="col-md-12" style="overflow-y:scroll">
        <table class="table table-striped table-hover table-bordered" id="Terminals">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.TerminalCommands.FirstOrDefault().TerminalID)</th>
                    <th>@Html.DisplayNameFor(model => model.TerminalCommands.FirstOrDefault().TerminalCommandLookup.Name)</th>
                    <th>@Html.DisplayNameFor(model => model.TerminalCommandValues.FirstOrDefault().Value)</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>

                @foreach (var item in Model.TerminalCommands)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.TerminalID, new { id = "deleteTerminalID", Value = item.TerminalID, @class = "form-control" })
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TerminalCommandLookup.Name, new { id = "deleteCommand", Value = item.TerminalCommandLookup, @class = "form-control" })
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.CommandValue, new { Class = "form-control", Value = item.CommandValue, Id = "deleteCmdValueValue" })
                        </td>
                        <td> 
                            <input id="btnDeleteTerminalCommand" type="submit" value="Delete" class="btn btn-danger">
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

Javascript调用：

  $(function () {
    $("#btnDeleteTerminalCommand").click((e) => {
        e.preventDefault();

        var data = {
            TerminalID: $("#deleteTerminalID").val(),
            CommandID: $("#deleteCommand").val(),
            CommandValue: $("#deleteCmdValueValue").val()
        };
        console.log("data");
        console.log(data);
        $.ajax({
             url: '@Url.Action("DeleteTerminalCommand", "TerminalCommand")',
            type: "POST",
            data: data,
            success: function (response) {
                console.log("Success");
                window.location.href = response.Url;
            }
        });
    });
});

虚拟机：

public class AddTerminalCommandVM
{
    public string TerminalID { get; set; }

    public int CommandID { get; set; }

    public string CommandValue { get; set; }

}

控制器功能：

        public ActionResult DeleteTerminalCommand(AddTerminalCommandVM removeCommand)
    {
        TerminalCommand removeTerminalCommand = new TerminalCommand();

        removeTerminalCommand.TerminalID = removeCommand.TerminalID;
        removeTerminalCommand.Command = removeCommand.CommandID;
        removeTerminalCommand.CommandValue = removeCommand.CommandValue;

        TCBL.DeleteTerminalCommand(removeTerminalCommand);

        var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index", "TerminalCommand");
        return Json(new { Url = redirectUrl });
    }

标签： javascriptasp.net-mvcrazor

解决方案

在您的代码中，td 标签没有 id，您需要获取 td 标签的值，如下所示

var data = {
            TerminalID: $(e.target.closest('tr')).find('td').eq(0).text(),
            CommandID: $(e.target.closest('tr')).find('td').eq(1).text(),
            CommandValue: $(e.target.closest('tr')).find('td').eq(2).text()
        };

AJAX 调用更改为

 $(function () {
    $("#btnDeleteTerminalCommand").click((e) => {
        e.preventDefault();

        var data = {
            TerminalID: $(e.target.closest('tr')).find('td').eq(0).text(),
            CommandID: $(e.target.closest('tr')).find('td').eq(1).text(),
            CommandValue: $(e.target.closest('tr')).find('td').eq(2).text()
        };
        alert(JSON.stringify(data));
        console.log("data");
        console.log(data);
        $.ajax({
            url: '@Url.Action("DeleteTerminalCommand", "Login")',
            type: "POST",
            data: data,
            success: function (response) {
                console.log("Success");
                window.location.href = response.Url;
            }
        });
    });
});

推荐阅读