ASP.NET中实现IEnumerable后控制器接收CardList为null的问题

问题原因 #

当CardList实现IEnumerable<Card>时，ASP.NET的JSON模型绑定器会将其识别为集合类型，但前端发送的JSON结构是{Cards: [数组]}的对象格式，而非直接的数组，导致绑定失败，cards参数变为null。

未实现接口时，绑定器将CardList视为普通POCO对象，能正确匹配前端的Cards属性完成绑定，但此时CardList不具备可枚举能力，无法直接用foreach遍历。

解决方案 #

方案1：不实现IEnumerable，直接遍历内部集合（推荐） #

保留CardList作为普通对象，控制器中直接遍历其Cards属性，既保证模型绑定正常，又能实现遍历需求。

修改CardList类，移除IEnumerable实现：

public class CardList
{
    public List<Card> Cards { get; set; }

    public CardList()
    {
        Cards = new List<Card>();
    }
}

修改控制器的Create方法，遍历cards.Cards：

[HttpPost]
[Route("Cards/Create/")]
public IActionResult Create([FromBody] CardList cards)
{
    if (cards != null && cards.Cards != null)
    {
        foreach (var card in cards.Cards)
        {
            if (!string.IsNullOrWhiteSpace(card.Term) && !string.IsNullOrWhiteSpace(card.Definition))
            {
                CardsRepository.AddCard(card);
            }
        }
        return Json(new { success = true, message = "Card saved successfully " });
    }

    var errors = ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage);
    return Json(new { success = false, message = "Validation error", errors = errors });
}

方案2：实现IEnumerable并调整模型绑定逻辑 #

如果需要CardList具备可枚举能力，可以让它直接继承List<Card>，这样既满足IEnumerable要求，又能兼容对象绑定：

修改CardList类：

public class CardList : List<Card>
{
    // 如需额外属性可在此添加
}

同时调整前端发送的JSON结构，直接发送数组（去掉外层的Cards包装）：

// 修改saveCardDataToServer中的fetch body部分
body: JSON.stringify(cards)

控制器方法保持不变，此时foreach (var card in cards)可以正常遍历，模型绑定也能成功。

额外修复：阻止表单默认提交行为 #

前端表单的submit事件会触发默认的页面跳转，导致fetch请求可能未完成就中断，需要在事件处理中阻止默认行为：

document.querySelector('form.cards').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交
    saveCardDataToServer();
});

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