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

Question

我正在开发一个网络应用程序(美食博客)在ASP.NET的MVC，我想让用户键入一个食谱。食谱当然包含很多成分。我有以下几个类：

 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中，我想创建一个页面，用户可以在其中输入包含大量配料的食谱。到目前为止，create-view如下所示：

@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;

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

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"));

我希望它能解决你的问题。