将 HTML 表数据从视图作为列表传递到 ASP.NET Core 中的控制器操作方法答案

【问题标题】：Pass HTML table data from view as list to Controller action method in ASP.NET Core将 HTML 表数据从视图作为列表传递到 ASP.NET Core 中的控制器操作方法
【发布时间】：2022-11-15 01:41:13
【问题描述】：

在控制器操作方法中获取空值。无法循环表数据行。

模型：班级：

 public class Generation
    {
        public int Generation1Count { get; set; }
        public int Generation1TotalSum { get; set; }
        public int Generation2Count { get; set; }
        public int Generation2TotalSum { get; set; }
        public int Generation3Count { get; set; }
        public int Generation3TotalSum { get; set; }
        public List<Memberdetails> Memberdetails { get; set; }
    }

public class Memberdetails
{
    public string MemberType { get; set; }
    public string MemberCategory { get; set; }
    public int TotalSum { get; set; }
    public int MemberCount { get; set; }
}

控制器：

public ActionResult Index()
        {
            Generation model = new Generation();
            model.Memberdetails = populateMemberDetails();
            return View(model);
        }

   private static List<Memberdetails> populateMemberDetails()
    {
        List<Memberdetails> list = new List<Memberdetails>();
        list.Add(new Memberdetails { MemberCategory = "A", MemberType = "Generation1", MemberCount = 12, TotalSum = 2636 });
        list.Add(new Memberdetails { MemberCategory = "B", MemberType = "Generation2", MemberCount = 12, TotalSum = 4747 });
        list.Add(new Memberdetails { MemberCategory = "A", MemberType = "Generation2", MemberCount = 12, TotalSum = 47474 });
        return list;
    }

    [HttpPost]
    public JsonResult Save(Generation generation)
    {
        return null;
    }

查看：表格行循环不起作用。这是正确的方法吗？

@model CLPConfigurations.Models.Generation

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
           $("body").on("click", "#btnSave", function () {
             var generation={};
                var membersDetails = new Array();
                $("#tblDetails TBODY TR").each(function(){   
                    var memberDetails = {};
                     memberDetails.MemberType = $(this).find("TD").eq(0).html();
                    memberDetails.MemberCategory = $(this).find("TD").eq(1).html();
                     memberDetails.TotalSum = $(this).find("TD").eq(2).html();
               memberDetails.MemberCount = $(this).find("TD").eq(3).html();
               
                    membersDetails.push(memberDetails);
                });

           generation.Memberdetails = membersDetails;

                //Send the JSON array to Controller using AJAX.
               
                
                $.ajax({
                    type: "POST",
                    url: "/Home/Save",
                    data: JSON.stringify(generation),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("success");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="frmDetails">
        <table id="tblDetails" class="table simpleHomeSummary-grid">
            <thead>
                <tr>
                    <th>MemberType</th>
                    <th>MemberCategory</th>
                    <th>TotalSum</th>
                    <th>MemberCount</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Memberdetails)
                {
                    <tr>
                        <td>@item.MemberType</td>
                        <td>@item.MemberCategory</td>
                        <td>@item.TotalSum</td>
                        <td>@item.MemberCount</td>
                    </tr>
                }
            </tbody>
        </table>
        <br />
        <input id="btnSave" type="button" value="Save" />
    </form>
</body>
</html>

期待控制器操作方法 \ 的视图值，但获取值。不知道如何将值从视图传递到控制器操作方法。

【问题讨论】：

标签： html jquery asp.net asp.net-mvc html-table

【解决方案1】：

那是因为您的表单未提交。首先，在您的视图中替换此行：

<input id="btnSave" type="button" value="Save" />

有了这个：

<input id="btnSave" type="submit" value="Save" />

其次，指定您的表单在提交时应调用的操作：

<form id="frmDetails" action="/YourController/Save" method="post">

并将一些代码添加到操作 Save 中（除了返回 null）。至少这样，看看您的表单是否已提交：

return Json(new { Result = "Form successfully submitted." }, JsonRequestBehavior.AllowGet); // Because returned type is JsonResult

【讨论】：

试过这个提交，但这也不起作用:(
更新我的答案，再试一次
OP 正在使用 ajax 提交表单；这将其更改为使用回发，这对用户体验产生了很大影响。