Ajax post data null when being sent to controller

Question

I have a VM spitting data from a db table into a datatable in my view. I have a delete button rigged, to where if the button in the requested col is selected, the rows for that data entry will be deleted. My delete button is being handled by an Ajax call to my controller function... however when I am debugging the controller, the param seems to contain all null data. Am I missing something here? I also have a button in a partial table above this one (not displayed) being handled the same way and this one has zero issues..

View:

<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 call:

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

VM:

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

    public int CommandID { get; set; }

    public string CommandValue { get; set; }

}

Controller function:

        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

In your code the td tag did not have id, you need get value of td tag as below

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 call change to

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