如何在 ASP.NET MVC 中的另一个对象中创建另一个对象的列表

Question

我正在 ASP.NET MVC 中开发一个 Web 应用程序（美食博客），我希望允许用户在其中输入食谱。食谱当然包含很多成分。 我有以下课程：

 public class Recipe
{
    public string Name { get; set; }
    public int ID { get; set; }
    public string Auhtor { get; set; }
    public string Category { get; set; }
    public string Text { get; set; }
    public List<Ingredient> Ingredients { get; set; }
    public byte[] Picture { get; set; }
}

public class Ingredient
{
    public int ID { get; set; }
    public double Amount { get; set; }
    public string Unit { get; set; }
    public string Name { get; set; }
}

在 html 中，我想创建一个页面，用户可以在其中输入包含大量成分的食谱。 到目前为止的创建视图如下所示：

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Recipe</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Text, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Text, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group" id="Ingredient">
        @Html.LabelFor(model => model.Ingredients, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10" id="IngredientDiv">
            <label>Ingredient</label>
        </div>


    </div>
    <div class="AddEl">
        <p><a>Tilføj endnu en ingredients</a></p>
    </div>
    <div class="RemoveEl">
        <p><a>Fjern en ingredients</a></p>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Picture, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Picture, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Picture, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>

    <script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>
    <script>
    //Ajax to navigate between days
        $(document)
        .ready(function () {

            var counter = 1;
            $('.AddEl').click(function () {
                var el = $('#IngredientDiv').clone().attr('id', 'element_' + ++counter).appendTo('#Ingredient');
            });

            $('.RemoveEl').click(function () {
                var el = $(this).parents('.elem');
                if (counter > 1) {
                    el.remove();
                    counter--;
                }
            });

            });
    </script>
</div>

}

如何将成分链接到此视图？ 如您所见，我已经编写了代码来动态添加和删除成分 div 的元素。

感谢您的帮助！

Answer 1

不确定您想如何在视图中显示 List<Ingredient>，但您可以通过在控制器中添加 view.bag 来拥有 List<Ingredient>：

 ViewBag.Ingredients= new SelectList(db.GetIngredient(), "Value", "Text");

在您看来，您可以拥有：

@Html.DropDownListFor(model => model.Ingredients, new SelectList(ViewBag.Ingredients, "Value", "Text")

您可能需要更多@Html.DropDownListFor，并且您可以保持第一个 DropDownListFor 可见，其余不可见。然后，一旦用户添加了一种成分，您就可以使下一个 DropDownListFor 可见，让用户添加另一种成分。

Answer 2

首先你需要让用户在表之间存在关系。在配方类中添加新属性：

public int IngredientsID;

然后需要将你的两个实体类封装在一个视图模型中。您可以使用视图包完成相同的操作，但使用视图模型是最佳实践。像这样创建视图模型：

public class FoodViewModel {

  public Recipe Recipe {get; set;}
  public IEnumerable<Ingredient> Ingredients {get; set;}

}

从上下文中检索成分列表并将其提供给您的视图模型并将您的视图模型传递给您的视图 .cshtml

public ActionResult New()
{
  var _list = _context.Ingredients.ToList();
  var viewModel = new FoodViewMode 
  {
    Ingredients = _list
  };
  return View(viewModel);
}

现在，使用 FoodViewModel 强烈键入您的视图 .cshtml。

@model Models.FoodViewModel

您需要在视图 .cshtml 中进行一些更改，因为您的视图模型包含两个实体模型。您需要在此处使用完全限定名称。例如

@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

会变成：

@Html.LabelFor(model => model.Receipe.Name, htmlAttributes: new { @class = "control-label col-md-2" })

我们使用的是 "model.Receipe.Name"，而不是 "model.Name"。

现在获取下拉列表，您可以这样做：

@Html.DropDownListFor(x => x.Recipe.IngredientsID, new SelectList(Model.Ingredients, "ID", "Name"));

希望它能解决您的问题。