MVC视图中Menu类List<Ingrediants>属性的增改问题

1. 修正并确认模型结构 #

首先统一类名拼写（Ingrediants建议改为Ingredient避免绑定问题），同时初始化集合避免空引用：

public class Menu
{
    public string Name { get; set; }
    public decimal Price { get; set; } // 用decimal处理价格更精准，替代float
    public List<Ingredient> Ingredients { get; set; } = new List<Ingredient>();
}

public class Ingredient
{
    public string Name { get; set; }
    // 可按需添加Quantity、Unit等其他属性
}

2. 视图层实现增改逻辑 #

2.1 渲染现有配料与基础属性 #

通过索引遍历集合生成输入框，确保MVC模型绑定能识别集合元素：

@model Menu

<!-- 基础属性输入区域 -->
<div class="form-group">
    <label asp-for="Name"></label>
    <input asp-for="Name" class="form-control" />
    <span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="Price"></label>
    <input asp-for="Price" class="form-control" />
    <span asp-validation-for="Price" class="text-danger"></span>
</div>

<!-- 配料管理区域 -->
<div id="ingredients-container">
    <h4>配料列表</h4>
    @if (Model.Ingredients.Any())
    {
        for (int i = 0; i < Model.Ingredients.Count; i++)
        {
            <div class="ingredient-item mb-3">
                <div class="input-group">
                    <input asp-for="Ingredients[i].Name" class="form-control" placeholder="配料名称" />
                    <button type="button" class="btn btn-danger remove-ingredient">删除</button>
                </div>
                <span asp-validation-for="Ingredients[i].Name" class="text-danger"></span>
            </div>
        }
    }
</div>

<!-- 操作按钮 -->
<button type="button" id="add-ingredient" class="btn btn-primary mt-2">添加新配料</button>
<button type="submit" class="btn btn-success mt-3">保存菜单</button>

2.2 动态增删配料的JS逻辑 #

通过JS生成带连续索引的输入框，删除后重新索引避免绑定断层：

$(document).ready(function () {
    // 添加新配料
    $("#add-ingredient").click(function () {
        var container = $("#ingredients-container");
        var index = $(".ingredient-item").length;
        
        var newItem = `<div class="ingredient-item mb-3">
            <div class="input-group">
                <input name="Ingredients[${index}].Name" class="form-control" placeholder="配料名称" />
                <button type="button" class="btn btn-danger remove-ingredient">删除</button>
            </div>
            <span class="text-danger field-validation-valid" data-valmsg-for="Ingredients[${index}].Name" data-valmsg-replace="true"></span>
        </div>`;
        
        container.append(newItem);
    });

    // 删除配料
    $(document).on("click", ".remove-ingredient", function () {
        $(this).closest(".ingredient-item").remove();
        reindexIngredients();
    });

    // 重新索引配料项
    function reindexIngredients() {
        $(".ingredient-item").each(function (index) {
            var input = $(this).find("input[name^='Ingredients']");
            input.attr("name", `Ingredients[${index}].Name`);
            var validationSpan = $(this).find("span[data-valmsg-for^='Ingredients']");
            validationSpan.attr("data-valmsg-for", `Ingredients[${index}].Name`);
        });
    }
});

3. 控制器接收绑定数据 #

直接接收Menu模型，MVC会自动完成集合属性的绑定：

[HttpPost]
public IActionResult SaveMenu(Menu menu)
{
    if (ModelState.IsValid)
    {
        // 执行数据库增改逻辑，例如：
        // _context.Menus.Update(menu);
        // _context.SaveChanges();
        return RedirectToAction("MenuList");
    }
    return View(menu);
}

关键注意事项 #

• 必须保证集合索引连续（0、1、2...），否则模型绑定会忽略断层后的元素。
• 集合属性必须初始化，避免视图遍历时报空引用错误。
• 若Ingredient有更多属性，只需在输入模板中添加对应字段，比如Ingredients[${index}].Quantity。

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