EFコアを使用して中間テーブルに行を追加する方法

Question

EFコアは多対多の関係を実装していない可能性があります。中間テーブル（結合テーブル）を作成し、多対多の関係に含める各モデルと中間の1つのモデルとの間の1対多の関係を定義するという共通の回避策があります。従来の構造は、（私の個人的なクラスを使用して）次のようになります。

class Deck 
{ 
    public int ID {get; set;} 
    public string Name {get; set;} 
    public virtual ICollection<DeckCard> DeckCards {get; set;} 
} 

class Card 
{ 
    public int ID {get; set;} 
    public string Name {get; set;} 
    public virtual ICollection<DeckCard> DeckCards {get; set;} 
} 

class DeckCards 
{ 
    public int DeckID {get; set;} 
    public Deck Deck {get; set;} 
    public int CardID {get; set;} 
    public Card Card {get; set;} 
} 

私のインターフェースはかなりシンプルです。相対コードはすぐ下にあります。

のViewModel

class DeckVm 
{ 
    public Deck Deck {get; set;} 
    public IEnumerable<Card> Cards {get; set;} 
} 

ビュー

@model TheMorningStar.ViewModels.DeckVm 

@{ 
    ViewData["Title"] = "Build Your Deck"; 
} 

<h2><strong>Build Your Deck</strong></h2> 

@foreach (var item in Model.Cards) 
{ 
    <img id="@item.ID;@item.Name" class="card" style="width:175px;height:250px;" src="@Url.Content(item.Image)" /> 
} 


<form name="builder" asp-controller="Decks" asp-action="Create"> 
    <div class="form-horizontal"> 
     <h4>Deck</h4> 
     <hr /> 
     <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
     <div class="form-group"> 
      <div class="col-md-10"> 
       <input name="Deck.Name" class="form-control" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-10"> 
       <input name="Deck.Class" value="@ViewBag.ClassChoice" disabled /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-10"> 
       <input name="Deck.DeckCards" hidden /> 
      </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> 
    </div> 
</form> 


<div> 
    <a asp-action="Index">Back to List</a> 
</div> 

@section Scripts { 
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} 
} 
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script> 
<script type="text/javascript" src="~/js/AddCardCreateView.js"></script> 

AddCardCreateView（JSファイル、ビューファイルの最後の行を参照）

//<img> elements derived from Model.Cards are of type: 'card' 
var cards = document.getElementsByClassName('card'); 

//Holds card id's and represents the deck. 
var deckList = []; 

//For each element in the cards array: define event listener 
for (var i = 0; i < cards.length; i++) { 
    cards[i].addEventListener('click', function() { 
     //this.id references the id of generated <img> elements in the Decks.Create view. 
     var cardInfo = this.id.split(';'); 
     var cardId = cardInfo[0]; 
     var cardName = cardInfo[1]; 
     //cardCount is used to determine how many times a card id is found in the deckList array 
     var cardCount = 0; 

     //check the decklist for matching card id and increment cardCount 
     for (var x = 0; x < deckList.length; x++) { 
      if (deckList[x] === cardId) { 
       cardCount++; 
      } 
     } 

     if (cardCount < 3 && deckList.length < 30) { 
      deckList.push(cardId); 

     } 
    }); 
} 

私は、ViewページのDeck.DeckCardフォーム入力要素のデータを準備するために、JSファイルでいくつかの魔法を実行する必要があると思います。誰でも私をここの正しい方向に導くことができますか？

Answer 1

あなたのコードでIDを使用しているようですが、Deckは永続化されていないので、IDはありません（たとえば、intの場合はデフォルト値0になります）。

代わりにナビゲーションプロパティを使用してみてください。

Create(string Class, string Name, string JSONDeckList) 
{ 
    var deck = new Deck(); 

    deck.Class = Class; deck.Name = Name; 

    // cards should be a IEnumerable<Card> 
    foreach (var card in cards) { 
     deck.DeckCards.Add(new DeckCard { Deck = deck, Card = card }); 
    } 
}