C# MVC Razor：如何将HTML元素序列化为C#集合？

要把页面上的家庭成员HTML元素序列化成C#集合，咱们可以分成前端数据收集和后端模型绑定两步来做，下面给你具体的实现方案：

1. 给页面元素加上可识别的标识 #

首先要确保每个家庭成员的各个字段能被JavaScript精准定位，你可以在渲染View的时候给每个字段加上特定的class，方便后续JS获取：

<ul class="family-list">
    @foreach (var member in Model.FamilyMembers)
    {
        <li class="family-member">
            <span class="fm-firstname">@member.FirstName</span>
            <span class="fm-lastname">@member.LastName</span>
            <span class="fm-age">@member.Age</span>
            <span class="fm-relationship">@member.Relationship</span>
        </li>
    }
</ul>
<button id="btn-serialize">序列化并提交</button>

2. 用JavaScript收集数据并发送到后端 #

接下来用JS遍历这些元素，把每个成员的信息组装成对象数组，再通过AJAX发送给MVC的Action。这里用jQuery举例子（原生JS逻辑完全一致）：

$(document).ready(function() {
    $('#btn-serialize').click(function() {
        // 初始化数组存储所有家庭成员数据
        var familyMembers = [];
        
        // 遍历每个家庭成员的li元素
        $('.family-member').each(function() {
            var $member = $(this);
            // 组装单个成员的对象
            var memberObj = {
                FirstName: $member.find('.fm-firstname').text().trim(),
                LastName: $member.find('.fm-lastname').text().trim(),
                Age: $member.find('.fm-age').text().trim(),
                Relationship: $member.find('.fm-relationship').text().trim()
            };
            familyMembers.push(memberObj);
        });
        
        // 发送AJAX请求到后端
        $.ajax({
            url: '/YourController/SerializeFamily', // 替换成你的Controller和Action名称
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ FamilyMembers: familyMembers }),
            success: function(result) {
                console.log('序列化成功！返回结果:', result);
                // 这里可以加成功后的逻辑，比如提示用户
            },
            error: function(xhr, status, err) {
                console.error('序列化失败:', err);
            }
        });
    });
});

3. 后端Action接收并绑定数据 #

在你的MVC Controller里创建一个POST类型的Action，直接用你定义的Authorization类作为参数，MVC的模型绑定会自动把前端传过来的JSON数据转换成对应的集合：

public class YourController : Controller
{
    [HttpPost]
    public IActionResult SerializeFamily(Authorization model)
    {
        // 这里model.FamilyMembers就是你要的C#集合了
        if (model.FamilyMembers != null && model.FamilyMembers.Any())
        {
            // 执行你的业务逻辑，比如保存到数据库、验证等
            return Json(new { Success = true, Message = $"成功接收{model.FamilyMembers.Count}个家庭成员" });
        }
        return Json(new { Success = false, Message = "没有获取到有效数据" });
    }
}

另一种方案：用表单提交（无需AJAX） #

如果你不想用AJAX，也可以用传统表单提交的方式。只需要在渲染View的时候给每个字段设置符合MVC模型绑定规则的name属性：

<form action="/YourController/SerializeFamily" method="post">
    @for (int i = 0; i < Model.FamilyMembers.Count; i++)
    {
        <div class="family-member">
            <!-- 隐藏域用来存数据，也可以用可见输入框让用户修改内容 -->
            <input type="hidden" name="FamilyMembers[@i].FirstName" value="@Model.FamilyMembers[i].FirstName" />
            <input type="hidden" name="FamilyMembers[@i].LastName" value="@Model.FamilyMembers[i].LastName" />
            <input type="hidden" name="FamilyMembers[@i].Age" value="@Model.FamilyMembers[i].Age" />
            <input type="hidden" name="FamilyMembers[@i].Relationship" value="@Model.FamilyMembers[i].Relationship" />
            
            <!-- 页面显示的内容 -->
            <p>@Model.FamilyMembers[i].FirstName @Model.FamilyMembers[i].LastName - @Model.FamilyMembers[i].Relationship (@Model.FamilyMembers[i].Age)</p>
        </div>
    }
    <button type="submit">提交数据</button>
</form>

后端的Action和上面完全一样，表单提交时MVC会自动把这些字段绑定到Authorization的FamilyMembers集合里。

注意事项 #

• 前端组装的对象属性名要和C#实体类的属性名完全一致（大小写不严格，但建议保持一致避免意外问题）
• 用AJAX时一定要设置contentType: 'application/json'，否则后端可能无法正确解析JSON数据
• 如果页面上的家庭成员是动态添加的（比如用户可以新增成员），JS遍历逻辑要能覆盖动态生成的元素

内容的提问来源于stack exchange，提问作者Delfino