ASP.NET MVCの別のオブジェクトの中の別のオブジェクトのリストを作成する方法

Question

ASP.NET MVCでWebアプリケーション（Foodブログ）を開発しています。ここで、ユーザーがレシピを入力できるようにします。レシピには多くの成分が含まれています。 私は次のクラスがあります。

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> 

}

： 作成ビューをこれまでのように見えますか？ 私はすでに、ingredients-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") 

おそらくそれ以上の1つが@Html.DropDownListForで、最初のDropDownListForの表示と残りの表示を非表示にすることができます。その後、ユーザーが1つの成分を追加するとすぐに、次のDropDownListForを表示させて、ユーザーが別の成分を追加できるようにすることができます。

Answer 2

まず、テーブル間に関係があるユーザーを作る必要があります。レシピクラスに新しい属性を追加する：

public int IngredientsID; 

次に、両方のエンティティクラスをビューモデルにカプセル化する必要があります。ビューバッグで同じことを達成できますが、ビューモデルを使用することがベストプラクティスです。このようなビューモデルを作成します。

public class FoodViewModel { 

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

} 

強くビューを入力し、コンテキストから食材のリストを取得し、あなたのビューモデルに供給し、今

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

.cshtmlビューにビューモデルを渡します.cshtmlとFoodViewModel。

@model Models.FoodViewModel 

ビューモデルに2つのエンティティモデルが含まれているため、ビュー.cshtmlにいくつかの変更を加える必要があります。ここで完全修飾名を使用する必要があります。例えば

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

代わりの"model.Name"、我々は"model.Receipe.Name"を使用している：

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

がに変わります。

は今、あなたが行うことができますドロップダウンリストを取得するには：

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

私はそれはあなたの問題を解決することを願っています。