asp.net core mvcのエンティティのリストを作成

Question

asp.net core mvcでエンティティを作成したいと思います。エンティティは、運動トレーニングを表し、そしてそれは、運動セットの子コレクションがあります。

public class Workout 
{ 
    public DateTime Date { get; set; }   
    public string Name { get; set; } 
    public string Description { get; set; } 

    public virtual ICollection<Set> Sets { get; set; } 
} 

public class Set 
{ 
    public int Id { get; set; } 
    public int ExerciseId { get; set; } 
    public int WorkoutId { get; set; } 
    public decimal Weight { get; set; } 
    public int Reps { get; set; } 

    public virtual Exercise Exercise { get; set; } 
    public virtual Workout Workout { get; set; } 
} 

フォームは次のようになります。

「の設定を追加」ボタンを追加するにはJavaScriptを使用していますが関連する "関連"フィールドのグループをフォームに追加することができます。したがって、関連する "関連"フィールドはいくつでも設定できます。ここで

は、フォームを含むビューのための私の既存のコードです：私の質問はこれです

public async Task<IActionResult> Create([Bind("Id,Date,Description,Name")] Workout workout) 
{ 
    // do stuff 
} 

：どのように私はやる

@model Weightlifting.Models.Workout 

@{ 
    ViewData["Title"] = "Add Workout"; 
} 

<h2>Add Workout</h2> 

<form asp-action="Create"> 
    <div class="form-horizontal"> 
     <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
     <div class="form-group"> 
      <label asp-for="Date" class="col-md-2 control-label"></label> 
      <div class="col-md-10"> 
       <input asp-for="Date" class="form-control" /> 
       <span asp-validation-for="Date" class="text-danger" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label asp-for="Name" class="col-md-2 control-label"></label> 
      <div class="col-md-10"> 
       <input asp-for="Name" class="form-control" /> 
       <span asp-validation-for="Name" class="text-danger" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label asp-for="Description" class="col-md-2 control-label"></label> 
      <div class="col-md-10"> 
       <input asp-for="Description" class="form-control" /> 
       <span asp-validation-for="Description" class="text-danger" /> 
      </div> 
     </div>   
     <div class="form-group"> 
      <fieldset class="form-add-set"> 
       <label for="sets" class="col-md-2 control-label">Sets</label> 
       <div class="col-md-10"> 
        <div class="add-sets"> 
         <div class="form-inline add-set"> 
          <div class="form-group"> 
           <label class="control-label">Exercise</label> 
           <select class="form-control" asp-items="ViewBag.Exercises"></select>        
          </div> 
          <div class="form-group">                
            <label asp-for="Sets.First().Reps" class="control-label"></label> 
            <input asp-for="Sets.First().Reps" placeholder="Reps" class="form-control" /> 
            <span asp-validation-for="Sets.First().Reps" class="text-danger" />        
          </div> 
          <div class="form-group"> 
           <label asp-for="Sets.First().Weight" class="control-label"></label> 
            <input asp-for="Sets.First().Weight" class="form-control" /> 
            <span asp-validation-for="Sets.First().Weight" class="text-danger" /> 
          </div> 
          <div class="form-group"> 
           <button class="btn btn-remove-set" data-toggle="tooltip" title="Remove Set"><span class="glyphicon glyphicon-minus"></span></button> 
          </div> 
         </div>      
        </div> 
        <button class="btn btn-add-set">Add Set</button> 
       </div> 
      </fieldset> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Save" class="btn btn-primary" /> 
      </div> 
     </div> 
    </div> 
</form> 

<div> 
    <a asp-action="Index"><span class="glyphicon glyphicon-arrow-left"></span> Back</a> 
</div> 

@section Scripts { 
<script type="text/javascript"> 
    $(document).ready(function() {  
     var wrapper = $('.add-sets'); 

     $(".btn-add-set").click(function(e) { 
      e.preventDefault(); 
      $('.add-set:first-child').clone(true).appendTo(wrapper); 

      $('.add-set .btn-remove-set').show(); 
     }); 

     $('.btn-remove-set').click(function (e) { 
      e.preventDefault(); 
      $(this).parents('.add-set').remove(); 

      removeButton(); 
     }); 

     function removeButton() { 
      if ($('.add-set').length == 1) { 
       $('.add-set .btn-remove-set').hide(); 
      } 
     } 
    }); 
</script> 
} 

そしてここでは、へ、ビューポストことをコントローラのアクションでありますワークアウトモデルのSetコレクションへの "Sets"ポストができるようにフォームをコーディングしますか？

Answer 1

アクションメソッドから[Bind("Id,Date,Description,Name")]を削除します。

public async Task<IActionResult> Create(Workout workout) 
{ 
    // do stuff 
} 

次に、このようなあなたのSetプロパティにインデックスを適用します。

<div class="form-inline add-set"> 
           <div class="form-group"> 
            <label class="control-label">Exercise</label> 
            <select name="Sets[0].ExerciseId" class="form-control"><option value="1">Push Up</option> 
    <option value="1">Set Up</option> 
    </select> 

<div class="add-sets"> 
    <div class="form-inline add-set"> 
     <div class="form-group"> 
      <label class="control-label">Exercise</label> 
      <select name="Sets[0].ExerciseId" class="form-control" asp-items="ViewBag.Exercises"></select> 
     </div> 
     <div class="form-group"> 
      <label asp-for="Sets.First().Reps" class="control-label"></label> 
      <input asp-for="Sets.First().Reps" name="Sets[0].Reps" placeholder="Reps" class="form-control" /> 
      <span asp-validation-for="Sets.First().Reps" class="text-danger" /> 
     </div> 
     <div class="form-group"> 
      <label asp-for="Sets.First().Weight" class="control-label"></label> 
      <input asp-for="Sets.First().Weight" name="Workout.Sets[0].Weight" class="form-control" /> 
      <span asp-validation-for="Sets.First().Weight" class="text-danger" /> 
     </div> 
     <div class="form-group"> 
      <button class="btn btn-remove-set" data-toggle="tooltip" title="Remove Set"><span class="glyphicon glyphicon-minus"></span></button> 
     </div> 
    </div> 
</div> 

動的に新しい行を追加するときは、インデックス番号が連続している必要があります.0から始まり、繰り返しはスキップしないでください。