如何通过jQuery将视图中的泛型列表传递给控制器Action

现有写法无法传参的核心原因有两个：

1. 视图中直接输出@Model.MyList只会输出该对象的ToString()结果（一般是类名），并未将C#泛型列表转换为前端可识别的JS数组结构
2. jQuery $.post默认使用表单编码格式提交，无法自动匹配复杂泛型列表的MVC模型绑定规则

1. 视图中将服务端列表序列化为JS数组 #

需要借助Newtonsoft.Json序列化C#列表为JSON字符串，同时用Html.Raw避免Razor自动转义特殊字符：

@model myViewModel
// ... 其他视图代码
<script>
// 将C#泛型列表转换为JS数组
var list = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.MyList));
</script>

2. 调整AJAX请求适配MVC参数绑定 #

推荐使用JSON格式提交，模型绑定兼容性更好：

$.ajax({
    url: '@Url.Action("MyAction", "MyController")',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ myList: list }),
    success: function (d) {
        console.log(d);
    }
});

3. 确认数据类定义符合绑定要求 #

GenericClass必须为公共类，且需要绑定的属性具备公共的get、set访问器：

public class GenericClass
{
    // 示例属性，可根据业务替换
    public int Id { get; set; }
    public string Content { get; set; }
}

可选：表单编码提交方式 #

如果要沿用$.post的默认表单提交格式，需要按MVC列表绑定规则格式化参数，示例如下：

var postData = {};
for(var i = 0; i < list.length; i++){
    postData[`myList[${i}].Id`] = list[i].Id;
    postData[`myList[${i}].Content`] = list[i].Content;
}
$.post("@Url.Action('MyAction', 'MyController')", postData, function (d) {
    console.log(d);
});

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