發送到控制器時，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;
            }
        });
    });
});