扩展SelectListItem类后下拉框无法赋值，控制器出现空引用异常

老兄，你遇到的这个异常，说白了就是c.IssueSelected在控制器里是null，所以访问CardColor才会炸。核心原因要么是表单没把CardColor的值传过来，要么是模型绑定没正确创建你自定义的SelectListItem子类实例。咱分两种场景给你解决方案：

方案一：最靠谱的后端取值（推荐） #

如果你的CardColor是和每个选项绑定的固定值（比如每个Issue本身就有对应的颜色），完全没必要从前端传这个值——前端传的值可能被篡改，而且多此一举。直接在控制器里根据选中项的Value（比如Issue的ID）去数据源里查对应的颜色就行：

首先确保你的自定义类是正确继承的：

public class CustomSelectListItem : SelectListItem
{
    public string CardColor { get; set; }
}

然后控制器的Post方法改成这样：

[HttpPost]
public async Task<ActionResult> CardCreate(UpdateCardFormOptions c)
{
    // 先判断选中的Value是否有效
    if (!string.IsNullOrEmpty(c.IssueSelected?.Value))
    {
        // 假设Value是Issue的ID，这里替换成你实际获取数据的逻辑
        var targetIssue = await _yourIssueRepository.GetByIdAsync(c.IssueSelected.Value);
        var cardColor = targetIssue?.CardColor;
        return View("StringView", cardColor);
    }
    // 处理未选中的情况
    return View("StringView", "No issue selected");
}

这种方式既安全又省心，不用折腾前端的JS。

方案二：前端传递CardColor（仅特殊场景用） #

如果非要从前端传CardColor，那得给表单加隐藏字段，并用JS监听下拉框的选中事件，把对应的颜色值同步到隐藏字段里，这样提交时才能一起传到后台：

第一步：视图里调整代码 #

手动渲染下拉框（因为默认的DropDownListFor不会帮你加自定义属性），并添加隐藏字段：

@using (@Html.BeginForm())
{
    <select id="IssueSelect" name="IssueSelected.Value">
        <option value="">Select an issue</option>
        @foreach (var option in Model.IssueOptions)
        {
            <!-- 给每个option加自定义data属性存CardColor -->
            <option value="@option.Value" data-card-color="@option.CardColor" 
                    @(option.Selected ? "selected" : "")>
                @option.Text
            </option>
        }
    </select>
    <!-- 隐藏字段用来传递CardColor -->
    @Html.HiddenFor(m => m.IssueSelected.CardColor, new { id = "SelectedCardColor" })
    
    <button type="submit">Submit</button>
}

<script>
// 监听下拉框选中变化
$('#IssueSelect').change(function() {
    var selectedOption = $(this).find('option:selected');
    // 从data属性里取颜色值
    var color = selectedOption.data('card-color');
    // 更新隐藏字段的值
    $('#SelectedCardColor').val(color);
});
</script>

第二步：确保模型类正确 #

你的UpdateCardFormOptions里的IssueSelected必须是自定义的子类，不能是默认的SelectListItem：

public class UpdateCardFormOptions
{
    public CustomSelectListItem IssueSelected { get; set; }
    // 其他属性...
}

第三步：控制器Get方法生成选项 #

在返回视图的Get方法里，生成带CardColor的自定义选项：

public async Task<IActionResult> CardCreate()
{
    var model = new UpdateCardFormOptions();
    // 从数据源获取Issue列表，生成CustomSelectListItem
    var issues = await _yourIssueRepository.GetAllAsync();
    model.IssueOptions = issues.Select(i => new CustomSelectListItem
    {
        Value = i.Id.ToString(),
        Text = i.Title,
        CardColor = i.CardColor
    }).ToList();
    return View(model);
}

这样提交表单时，隐藏字段的CardColor就会被传到后台，模型绑定就能正确实例化CustomSelectListItem，你就不会再遇到空引用异常了。

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