使用 jquery 选择器和 ajax 将表行值传递给控制器答案

【问题标题】：pass table row values to controller using jquery selector and ajax使用 jquery 选择器和 ajax 将表行值传递给控制器
【发布时间】：2021-08-20 00:14:50
【问题描述】：

我正在尝试通过单击其按钮来传递行值，使用 jquery 选择和 Ajax 将其传递给控制器。经过多次尝试，它终于正确地获得了单行的值，但它只是在 Ajax 之前停止，我不知道为什么。这是我的看法

@model ExitApplication.MyModel.TheUserListViewModel
@{
    ViewBag.Title = "Edit user data";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit user data</h2>
@Html.AntiForgeryToken()

<table id="tableId">
    <thead>
        <tr>
            <th>
                @Html.Label("User ID")
            </th>
            <th>
                @Html.Label("Account")
            </th>
            <th>
                @Html.Label("Lob")
            </th>
            <th>
                @Html.Label("Group")
            </th>
            <th>
                @Html.Label("Start Date")
            </th>
            <th>
                @Html.Label("Training start Date")
            </th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    @for (int i = 0; i < Model.theUserTables.Count; i++)
    {
        <tbody>

            <tr data-id="@Model.theUserTables[i].Group">
                <td>
                    @Html.DisplayFor(modelItem => modelItem.theUserTables[i].UserID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem.theUserTables[i].Account)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem.theUserTables[i].Lob)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem.theUserTables[i].Group)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem.theUserTables[i].StartDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem.theUserTables[i].TrainingDate)
                </td>
                <td>
                    @Html.HiddenFor(modelItem => modelItem.theUserTables[i].PersonID)
                </td>
                <td>
                    <a href="javascript:;" class="EditID" data-id="@Model.theUserTables[i].Group">Update User Data</a>
                </td>
            </tr>
        </tbody>
    }

</table>

这是脚本：

$(document).ready(function () {
            $('#tableId').DataTable({
                dom: 'Bfrtip',
                "buttons": [
                    'copy',
                    'excel'],
            });
        });

        $(document).ready(function () {
            var token = $("[name='__RequestVerificationToken']").val();
            var headers = {};
            headers['__RequestVerificationToken'] = token;
            $('table tr').click(function () {
                var $tds = $(this).find('td'),
                    UserID = $tds.eq(0).text(),
                    Account = $tds.eq(1).text(),
                    Lob = $tds.eq(2).text(),
                    Group = $tds.eq(3).text(),
                    StartDate = $tds.eq(4).text(),
                    TrainingDate = $tds.eq(5).text()
                $.ajax({
                    type: 'POST',
                    url: '/Temp/EditUserData',
                    headers: headers,
                    data: { UserID, Account, Lob, Group, StartDate, TrainingDate},
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        window.location.href = "IndexTranNewRequest";
                    }
                })
            });
        });

控制器中的方法：

[HttpPost]
        public ActionResult EditUserData(string UserID, string Account, string Lob, string Group, string StartDate, string TrainingDate)
        { }

提前感谢您的宝贵时间。

【问题讨论】：

在浏览器控制台中看到任何错误？另外，为什么你有window.location.href = "IndexTranNewRequest";？
完全没有错误。它正确地获取数据并将其传递给 ajax 中的数据，但它永远不会通过将数据传递给控制器中的方法来完成其工作。对于window.location.href = "IndexTranNewRequest";，我只想保存到数据库后，它会重定向到页面“IndexTranNewRequest”

标签： jquery ajax asp.net-mvc jquery-selectors

【解决方案1】：

问题在于成功。当我对其进行哈希处理时，它工作并将数据传递给控制器。我不知道为什么，但它应该是从 ajax 发生的重定向。

$(document).ready(function () {
            var token = $("[name='__RequestVerificationToken']").val();
            var headers = {};
            headers['__RequestVerificationToken'] = token;
            $('table tr').click(function () {
                var $tds = $(this).find('td'),
                    UserID = $tds.eq(0).text(),
                    Account = $tds.eq(1).text(),
                    Lob = $tds.eq(2).text(),
                    Group = $tds.eq(3).text(),
                    StartDate = $tds.eq(4).text(),
                    TrainingDate = $tds.eq(5).text()
                $.ajax({
                    type: 'POST',
                    url: '/Temp/EditUserData',
                    headers: headers,
                    data: { UserID, Account, Lob, Group, StartDate, TrainingDate},
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    
                })
            });
        });

【讨论】：