如何传递localStorage数组到MVC控制器并解决参数为null问题

后端收不到ids参数，本质是三个叠加的配置错误：

• AJAX的两个核心配置互斥：同时开了traditional: true（传统表单序列化模式）和contentType: "application/json; charset=utf-8"（JSON请求体模式），两种模式的序列化规则完全不兼容，jQuery最终生成的请求格式既不符合表单规范，也不符合JSON规范，后端的模型绑定根本识别不出来
• 参数类型完全不匹配：前端传的是字符串组成的数组，但控制器把参数声明为单个string类型，就算请求格式全对，模型绑定也没法把数组里的多个值塞到一个单字符串参数里
• JSON序列化逻辑缺失：在设置了application/json的contentType时，jQuery不会自动帮你把传入的JS对象转成合法的JSON字符串，后端拿到的请求体是完全无效的

除了参数收不到的问题，现有代码还有几个会直接导致运行失败的问题：

• 前端JS语法错误：AJAX配置的结尾多写了一个闭合大括号}});，点击按钮就会直接抛语法错误
• 返回值解析配置错配：设了dataType: "json"，但控制器返回的是渲染好的HTML视图（ViewResult），jQuery收到返回内容时会硬按JSON格式解析，直接报错
• 控制器逻辑错误：在foreach循环内部直接return，第一次遍历就退出方法，根本收集不全匹配结果；new List<bookList>()把循环里的变量名当成了泛型类型，根本编译不通过

不用引入额外的JSON请求逻辑，用MVC最适配的传统表单传参方式就能解决：

前端视图修改 #

删掉冲突的配置，加上空值兜底：

<script>
function getFavouriteBooks() {
    const rawIds = localStorage.getItem("bookIds");
    // 空值兜底，避免存储值为空时JSON.parse报错
    const ids = rawIds ? JSON.parse(rawIds) : [];

    $.ajax({
        type: "POST",
        traditional: true,
        url: '@Url.Action("Favourites", "Home")',
        data: { ids: ids },
        success: function (result) {
            alert("收藏列表加载完成");
        }
    });
}
</script>
<button onClick="getFavouriteBooks()">Display Favourites</button>

控制器修改 #

修正参数类型，整理过滤逻辑：

public async Task<ViewResult> Favourites(string[] ids) {
    // 原有拉取全量书籍数据的逻辑保留
    var data = await YourApiClient.GetAllBooksAsync();
    
    // 空值兜底，避免空引用
    if (data == null || ids == null || !ids.Any())
    {
        return View("Index");
    }

    var bookList = JsonConvert.DeserializeObject<Book[]>(data);
    // 用LINQ直接过滤匹配的书籍，不需要嵌套循环
    var matches = bookList.Where(book => ids.Contains(book.Id)).ToList();
    
    return View("Index", matches.ToArray());
}

说明：traditional: true是jQuery专门适配传统MVC框架的配置，开启后序列化数组时会自动生成ids=1&ids=2&ids=3格式的表单参数，MVC默认的模型绑定可以直接识别这种格式，自动绑定到string[]类型的入参上，不需要额外加请求特性。

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