ASP.NET Core MVC - 将 HTML 表转换为 json 并使用 ajax 发送到控制器答案

【问题标题】：ASP.NET Core MVC - Convert HTML table to json and send to controller using ajaxASP.NET Core MVC - 将 HTML 表转换为 json 并使用 ajax 发送到控制器
【发布时间】：2021-05-05 05:02:06
【问题描述】：

我正在尝试将 html 表数据发送到控制器，但似乎我做错了什么。

请看我的表格

<table id="List" class="table table-borderless">
                        <thead>
                            <tr>
                                <th>
                                    Leave ID
                                </th>
                                <th>
                                    Leave Type
                                </th>
                                <th>
                                    Date
                                </th>
                                <th>
                                    Reason
                                </th>
                                <th>
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

这就是我使用模态向表格添加数据的方式

function AddToList() {
            var LeaveApplicationID = 1;
            var LeaveTypeID = $('#LeaveTypeID').val();
            var LeaveType = $('#LeaveTypeID').find(':selected').text();
            var Date = $('#LeaveDate').val();
            var Reason = $('#Reason').val();

            var html = '';

            html += "<tr>";
            html += "<td>" + LeaveApplicationID + "</td>";
            html += "<td>" + LeaveTypeID +"</td>";
            html += "<td>" + LeaveType + "</td>";
            html += "<td>" + Date + "</td>";
            html += "<td>" + Reason + "</td>";
            html += "<td>";
            html += "<button class='btn btn-warning btn-xs'>";
            html += "<span class='fa fa-pencil'></span>";
            html += "</button>";
            html += "<button class='btn btn-danger btn-xs'><span class='fa fa-trash'></span></button></td > ";
            html += "<tr>";

            $('#List').append(html);
        }

单击按钮时，将调用函数 SaveDetails()

function SaveDetails() {

            var LeaveList = [];
            LeaveList.length = 0;

            $.each($("#List tbody tr"), function () {
                LeaveList.push({
                    LeaveApplicationID : $(this).find('td:eq(0)').html(),
                    LeaveTypeID : $(this).find('td:eq(1)').html(),
                    Date : $(this).find('td:eq(3)').html(),
                    Reason : $(this).find('td:eq(4)').html()
                });
            });

            var data = JSON.stringify({
                leaveApplicationDetails: LeaveList
            });

            console.log(data);

             $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                type: "POST",
                url: "@Url.Action("SaveLeaveApplicationDetails")",
                data: data,
                success: function (data) {
                    console.log(data);
                }
            });
        }

this is the output of the json string

根据输出我认为我得到了正确的结果

但是，当我试图发送到控制器时，我得到一个空值。

这是我的控制器。

控制器

public IActionResult SaveLeaveApplicationDetails(List<LeaveApplicationDetails> leaveApplicationDetails)
        {
            
            return Json(leaveApplicationDetails);
        }

你认为我哪里错了？谢谢...

已编辑：

enter image description here

output

namespace HRMS.Models
{
    public class LeaveApplicationHeader
    {
        [Key]
        public int LeaveApplicationID { get; set; }
        public string LeaveApplicationCode { get; set; }
        public DateTime DateFiled { get; set; }
        public int EmployeeID { get; set; }
        public Employee EmployeeCode { get; set; }
        public int DepartmentID { get; set; }
        public Department DepartmentCode { get; set; }
        public int WithPay { get; set; }
        public int WithoutPay { get; set; }
        public int SLBalance { get; set; }
        public int VLBalance { get; set; }
        public int SLBalanceCertification { get; set; }
        public int VLBalanceCertification { get; set; }
        public int LeaveStatusID { get; set; }
    }

    public class LeaveApplicationDetails
    {
        [Key]
        public int LeaveApplicationID { get; set; }
        public int LeaveTypeID { get; set; }
        public DateTime Date { get; set; }
        public string Reason { get; set; }
    }

    public class LeaveApplication
    {
        public LeaveApplicationHeader LeaveApplicationHeader { get; set; }

        public LeaveApplicationDetails LeaveApplicationDetails { get; set; }
    }
}

另一个编辑：不工作：

$.each($("#List tbody tr"), function () {
            LeaveList.push({
                LeaveApplicationID: 1,
                LeaveTypeID: $(this).find('td:eq(1)').text(),
                Date: $(this).find('td:eq(3)').text(),
                Reason: $(this).find('td:eq(4)').text()
            });
        });

        Worked:
    

LeaveList.push({
            LeaveApplicationID: 1,
            LeaveTypeID: 1,
            Date: "2020-07-05",
            Reason: "test1"
        });
        LeaveList.push({
            LeaveApplicationID: 2,
            LeaveTypeID: 2,
            Date: "2020-07-05",
            Reason: "test2"
        });

【问题讨论】：

嗨@JeffreyEstrera，有什么更新吗？
你好我试过你的建议，但我仍然得到一个空值。
能否提供新输出的json字符串？
请看我的postt上的编辑。这是控制台上写的
var data = JSON.stringify(LeaveList); console.log(data);查看日志。

标签： ajax asp.net-core-mvc

【解决方案1】：

试试这个修改：

var leaveApplicationDetails = JSON.stringify(LeaveList);

$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: "json",
    type: "POST",
    url: "@Url.Action("SaveLeaveApplicationDetails")",
    data: {leaveApplicationDetails: leaveApplicationDetails},
    success: function (data) {
        console.log(data);
    }
});

【讨论】：

bruh im 仍然得到一个 null T_T huhuhu 太伤心了，我花了 3 天时间试图解决这个问题 T_T
没有JSON.stringify（只需var leaveApplicationDetails = LeaveList）你能试试吗？
还要检查你的示例 json，这都是错误的。 ID不能全部为1，因为你的第一个字段是[Key]并且你的日期格式错误（检查年份）

【解决方案2】：

您只需将代码更改为

  var data = JSON.stringify(LeaveList);

然后在你的控制器中添加[FromBody]：

public IActionResult SaveLeaveApplicationDetails([FromBody]List<LeaveApplicationDetails> leaveApplicationDetails)
    {
        
        return Json(leaveApplicationDetails);
    }

编辑

你可以像我一样尝试做一个简单的演示。

查看：

<button id="click">
click
</button>
@section Scripts
{
    <script>        
        $("#click").click(function() {
            var LeaveList = [];
            LeaveList.length = 0;
            LeaveList.push({
                  LeaveApplicationID: 1,
                  LeaveTypeID: 1,
                  Date: "2020-07-05",
                  Reason: "test1"
                 });
            LeaveList.push({
                LeaveApplicationID: 2,
                LeaveTypeID: 2,
                Date: "2020-07-05",
                Reason: "test2"
            });
            var data = JSON.stringify(LeaveList);
            console.log(data);
            $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                type: "POST",
                url: "@Url.Action("SaveLeaveApplicationDetails")",
                data: data,
                success: function (data) {
                    console.log(data);
                }
            });
        })
    </script>
}

行动：

[HttpPost]
    public IActionResult SaveLeaveApplicationDetails([FromBody]List<LeaveApplicationDetails> leaveApplicationDetails)
    {
        return Json(leaveApplicationDetails);
    }

【讨论】：