Razor Pages应用UI值提交问题：空引用异常求助

1. 定义模型类 #

先确保技能（Capability）和评分项（ScoreEntry）的模型类已正确定义：

public class Capability
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class ScoreEntry
{
    public int CapabilityId { get; set; }
    public int Score { get; set; }
}

2. 在PageModel中初始化集合 #

在Razor Page的后端代码（.cshtml.cs文件）里，必须在OnGet方法中同时初始化技能列表和对应的评分列表，保证每个技能都有匹配的评分项：

public class CapabilityRatingModel : PageModel
{
    // 展示用的技能列表
    public List<Capability> Capabilities { get; set; }
    // 用于绑定用户输入的评分列表，需加[BindProperty]实现自动绑定
    [BindProperty]
    public List<ScoreEntry> Scores { get; set; }

    public async Task OnGet()
    {
        // 从Web API或数据库获取技能数据（示例用模拟数据）
        Capabilities = await FetchCapabilities();
        
        // 初始化评分列表，每个技能对应一个空的评分项
        Scores = Capabilities.Select(c => new ScoreEntry { CapabilityId = c.Id }).ToList();
    }

    // 模拟获取技能数据的方法
    private Task<List<Capability>> FetchCapabilities()
    {
        return Task.FromResult(new List<Capability>
        {
            new Capability { Id = 1, Name = "C#开发" },
            new Capability { Id = 2, Name = "ASP.NET Core" },
            new Capability { Id = 3, Name = "数据库设计" }
        });
    }

    // 提交评分的Post方法
    public async Task<IActionResult> OnPost()
    {
        if (!ModelState.IsValid)
        {
            // 验证失败时重新加载技能列表，避免视图报错
            Capabilities = await FetchCapabilities();
            return Page();
        }

        // 调用Web API将评分提交到数据库
        await SubmitScoresToDatabase(Scores);
        return RedirectToPage("/RatingSuccess");
    }

    // 模拟提交评分到API的方法
    private Task SubmitScoresToDatabase(List<ScoreEntry> scores)
    {
        // 这里写实际的API调用逻辑
        return Task.CompletedTask;
    }
}

3. 视图（.cshtml）中正确绑定 #

在视图里循环技能列表，通过index关联技能和对应的评分项，确保绑定路径有效：

@page
@model CapabilityRatingModel

<form method="post">
    <h3>技能评分</h3>
    @for (int index = 0; index < Model.Capabilities.Count; index++)
    {
        <div class="mb-3">
            <label class="form-label">@Model.Capabilities[index].Name</label>
            <!-- 绑定已初始化的评分项，不会触发空引用异常 -->
            <input type="number" asp-for="Scores[index].Score" min="0" max="10" class="form-control" />
            <!-- 隐藏字段保存技能ID，确保提交时能关联到对应技能 -->
            <input type="hidden" asp-for="Scores[index].CapabilityId" />
        </div>
    }
    <button type="submit" class="btn btn-primary">提交评分</button>
</form>

关键注意点 #

• 必须保证Scores列表的长度和Capabilities完全一致，每个技能对应一个ScoreEntry实例，否则视图绑定Scores[index].Score时会触发空引用异常。
• Scores属性必须标记[BindProperty]，否则Post提交时无法自动收集用户输入的评分数据。
• 若Post提交后模型验证失败，需重新加载Capabilities列表，避免视图因技能数据为空报错。

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