javascript - Ajax发送数据到 Controller 时为空

Question

在我看来，我有一个虚拟机将数据从数据库表传输到数据表中。我安装了一个删除按钮，如果选择了请求的列中的按钮，则该数据条目的行将被删除。我的删除按钮是通过对我的 Controller 函数的 Ajax 调用来处理的...但是，当我调试 Controller 时，参数似乎包含所有空数据。我在这里错过了什么吗？我在该按钮上方的部分表格中也有一个按钮(未显示)，以相同的方式处理，而该按钮的问题为零..

查看:

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

}

Controller 功能:

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

Answer 1

在您的代码中，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;
            }
        });
    });
});