Razor Pages中列表修改被数据绑定覆盖的问题排查

问题描述 #

开发Razor Pages应用时，删除列表项（如“Laptop bag”）后，页面显示正常，但生成的HTML中HiddenFor输出的Description值与直接输出Model.HardwareList[i].Description不一致，后续POST操作后列表数据完全错误。已确认删除逻辑中索引匹配正确，删除后的集合在服务器端是正确的。

问题根源 #

1. ModelState缓存干扰：Html.HiddenFor会优先读取ModelState中保存的旧表单数据，而非当前最新的Model值，导致生成的Hidden字段值错误。
2. 列表未持久化：Razor Pages的PageModel每次请求都是全新实例，未持久化的HardwareList会在新请求时被重置为空列表，依赖表单Hidden传递数据时会因旧值干扰导致绑定错误。
3. 重复添加选项：GetData方法每次调用都向HardwareNames添加重复项，导致下拉选项越来越多。
4. 必填字段未赋值：Hardware模型中Quantity、TopdeskId为必填项，添加新项时未赋值会触发ModelState验证错误，干扰绑定逻辑。

解决方案 #

1. 持久化列表数据 #

使用TempData保存HardwareList，确保跨请求时数据不丢失（需安装Newtonsoft.Json包）：

using Newtonsoft.Json;

public class HardwareModel : PageModel
{
    [BindProperty]
    public List<Hardware> HardwareList { get; set; } = new List<Hardware>();

    [BindProperty]
    public List<string> HardwareNames { get; set; } = new List<string>();
    [BindProperty]
    public string ChosenNewHardware { get; set; }

    [BindProperty]
    public int HardwareIdxToDelete { get; set; }

    public void OnGet()
    {
        // 从TempData恢复列表
        if (TempData["HardwareList"] != null)
        {
            HardwareList = JsonConvert.DeserializeObject<List<Hardware>>(TempData["HardwareList"].ToString());
        }
        GetData();
    }

    public void OnPost()
    {
        if (TempData["HardwareList"] != null)
        {
            HardwareList = JsonConvert.DeserializeObject<List<Hardware>>(TempData["HardwareList"].ToString());
        }
        GetData();
        // 保存列表到TempData
        TempData["HardwareList"] = JsonConvert.SerializeObject(HardwareList);
    }

    public void OnPostAddNew()
    {
        if (TempData["HardwareList"] != null)
        {
            HardwareList = JsonConvert.DeserializeObject<List<Hardware>>(TempData["HardwareList"].ToString());
        }

        if (!string.IsNullOrEmpty(ChosenNewHardware) && !HardwareList.Any(h => h.Description == ChosenNewHardware))
        {
            HardwareList.Add(new Hardware
            {
                Description = ChosenNewHardware,
                UnitPrice = 10,
                Quantity = 1, // 必填字段赋值
                TopdeskId = "temp" // 根据业务逻辑替换为实际值
            });
        }

        ModelState.Clear(); // 清理ModelState，确保HtmlHelper读取最新Model值
        GetData();
        TempData["HardwareList"] = JsonConvert.SerializeObject(HardwareList);
    }

    public void OnPostRemove()
    {
        if (TempData["HardwareList"] != null)
        {
            HardwareList = JsonConvert.DeserializeObject<List<Hardware>>(TempData["HardwareList"].ToString());
        }

        if (HardwareIdxToDelete >= 0 && HardwareIdxToDelete < HardwareList.Count)
        {
            HardwareList.RemoveAt(HardwareIdxToDelete); // 直接按索引删除，更可靠
        }

        ModelState.Clear();
        GetData();
        TempData["HardwareList"] = JsonConvert.SerializeObject(HardwareList);
    }

    public void GetData()
    {
        HardwareNames.Clear(); // 先清空再添加，避免重复选项
        HardwareNames.Add("Dell P2419H");
        HardwareNames.Add("Laptop bag");
        HardwareNames.Add("Backpack");
        HardwareNames.Add("Mouse");
    }
}

2. 优化前端表单代码 #

删除不必要的Hidden字段，避免重复传递整个列表：

删除按钮表单修改

<div class="col-md-1">
    <form method="post" asp-page-handler="Remove">
        <input type="hidden" name="HardwareIdxToDelete" value="@i" />
        <button type="submit" class="btn btn-danger">X</button>
    </form>
</div>

添加新项表单修改

<div class="d-flex flex-column align-items-end pr-5">
    <form method="post" asp-page-handler="AddNew">
        @{
            var usedNames = Model.HardwareList.Select(h => h.Description).ToList();
        }
        <select class="child_input" id="ChosenNewHardware" name="ChosenNewHardware">
            @foreach (var name in Model.HardwareNames)
            {
                if (usedNames.Contains(name))
                {
                    <option disabled>@name</option>
                }
                else
                {
                    <option>@name</option>
                }
            }
        </select>
        <button type="submit">Add hardware</button>
    </form>
</div>

3. 可选：调整Model必填字段 #

如果业务允许，可修改Hardware模型，将非必要的必填字段改为可选：

public class Hardware
{
    [Key]
    public int Id { get; set; }
    public Request Request { get; set; } // 移除[Required]
    public string TopdeskId { get; set; } // 移除[Required]
    public string Description { get; set; }
    [Required]
    public int Quantity { get; set; }
    [Required]
    public double UnitPrice { get; set; }
    public string Remarks { get; set; }
}

验证效果 #

修改后，删除项时HiddenFor会输出正确的Description值，后续POST操作后列表数据保持一致，下拉选项也不会重复。

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