ASP.NET Core Razor页面点击列表条目后如何填充编辑表单字段值

你要的效果完全可以实现，按以下步骤操作即可：

1. 修改首页编辑按钮，传递对应咖啡id #

给编辑链接加路由参数，把当前循环到的咖啡条目id传给后端方法：

<a asp-action="GetCoffeeItem" asp-route-id="@item.Id">Edit</a> 

点击编辑按钮时，对应咖啡的id会自动作为参数传入GetCoffeeItem方法。

2. 后端查询数据并传递到编辑页 #

如果你用的是Razor Page模式 #

给编辑页的PageModel添加绑定属性，接收id后查询数据赋值给属性：

public class EditModel : PageModel
{
    private readonly CoffeeItemProvider _provider;
    // 绑定特性支持前后端数据双向传递
    [BindProperty]
    public CoffeeItem CurrentCoffee { get; set; }

    public EditModel(CoffeeItemProvider provider)
    {
        _provider = provider;
    }

    // 处理编辑页的GET请求
    public async Task<IActionResult> OnGetAsync(int id)
    {
        // 注意：你现有GetCoffeeItem返回值是FoodItem，如果CoffeeItem是它的子类，需要做类型转换
        CurrentCoffee = await _provider.GetCoffeeItem(id) as CoffeeItem;
        if (CurrentCoffee == null) return NotFound();
        return Page();
    }

    // 处理编辑表单提交的更新逻辑
    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid) return Page();
        await _provider.UpdateCoffeeItem(CurrentCoffee.Id, CurrentCoffee);
        return RedirectToPage("Index");
    }
}

如果你用的是MVC模式 #

修改GetCoffeeItem方法，查询到数据后传给编辑视图：

public async Task<IActionResult> GetCoffeeItem(int id)
{
    var item = await _db.CoffeeItems.FirstOrDefaultAsync(i => i.Id == id);
    if (item == null) return NotFound();
    return View("Edit", item);
}

3. 编辑页表单自动填充值 #

Razor的asp-for标签助手会自动读取绑定模型的属性值填充输入框，不需要手动写value属性，删掉原有代码里的value=""即可：

<!-- 如果是Razor Page模式，表单写法 -->
<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="CurrentCoffee.Id" />
    <div class="form-group">
        <label asp-for="CurrentCoffee.Name" class="control-label"></label>
        <input asp-for="CurrentCoffee.Name" class="form-control" />
        <span asp-validation-for="CurrentCoffee.Name" class="text-danger"></span>
    </div>
    <!-- 价格、描述等其他字段写法完全一致，对应CurrentCoffee的属性即可 -->
    <button type="submit" class="btn btn-primary">保存修改</button>
</form>

<!-- 如果是MVC模式，表单写法，先给视图加模型声明@model CoffeeItem -->
@model CoffeeItem
<form asp-action="UpdateCoffeeItem" method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <!-- 其他字段同理 -->
    <button type="submit" class="btn btn-primary">保存修改</button>
</form>

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