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

Question

我有一个虚拟机，将数据从数据库表分散到数据表中。 我有一个删除按钮，如果选择了所请求列中的按钮，该数据条目的行将被删除。 我的删除按钮正在通过对控制器函数的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 });
    }

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