Question

我正在ASP.NET MVC中开发一个Web应用程序（Food blog），我想让用户输入一个Recipe。配方当然包含很多成分。我有以下课程：

 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 visibale，其余的不可见。然后，只要用户添加一个成分，您就可以使下一个DropDownListFor可见，让用户添加另一个成分。

Answer 2

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

public int IngredientsID;

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

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

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

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

2 个答案: