ASP.NET Core Razor Pages中如何通过颜色选择器设置对象属性

让我帮你排查下代码里的问题，其实都是几个小细节没注意到，调整后就能正常工作了：

问题分析与修正步骤 #

1. 错误的输入框类型 #

你写的type="favcolor"是无效的HTML类型，标准的颜色选择器类型是type="color"，浏览器只有识别这个类型才会渲染出颜色选择器控件。

2. 重复的name属性导致模型绑定失败 #

你同时使用了asp-for="Product.Color"和name="Color"，asp-for标签助手会自动生成符合模型绑定规则的name属性（应该是Product.Color），手动指定name="Color"会覆盖这个值，导致后端无法将表单值正确映射到Product.Color属性上。

3. 路由参数的潜在问题 #

提交按钮的asp-rout-id="Inventory.ProductID"需要确保Inventory.ProductID是当前视图中可用的有效变量，比如你在视图模型里有没有包含这个属性，或者是不是应该直接绑定到Product.ProductID？这个要看你的具体场景，如果是编辑现有产品，要确保ID参数能正确传递到后端的Action方法。

修正后的完整代码 #

<form method="post">
    <div>
        <label asp-for="Product.Color"></label>
        <input asp-for="Product.Color" type="color" value="#ff0000"/>
    </div>
    <button type="submit" asp-rout-id="@Model.Product.ProductID">Save</button>
</form>

后端额外注意事项 #

确保你的Product类里的Color属性是string类型，因为颜色选择器返回的是类似#ff0000的字符串格式：

public class Product
{
    public int ProductID { get; set; }
    public string Color { get; set; }
    // 其他属性...
}

另外，对应的控制器Action方法要正确接收Product参数（或者包含Product的视图模型），比如：

[HttpPost]
public IActionResult Edit(int id, Product product)
{
    if (ModelState.IsValid)
    {
        // 保存product.Color的逻辑
        _context.Update(product);
        _context.SaveChanges();
        return RedirectToAction(nameof(Index));
    }
    return View(product);
}

这样调整后，颜色选择器选中的值就能正确绑定到Product.Color属性了～

内容的提问来源于stack exchange，提问作者Noémie Harvey