Question

由于大多数在场回答的人可能都知道，EF核心并没有实现多对多的关系。有一个常见的工作，即创建一个中间表（连接表），并定义您想要包含在多对多关系中的每个模型之间的一对多关系，以及中介一。传统结构看起来像这样（使用我的个人课程）：

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

我的界面非常简单。相关代码直接在下面。

视图模型

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

        }
    });
}

我猜测我必须在JS文件中做一些魔术，为View页面中的Deck.DeckCard表单输入元素准备数据。谁能引导我朝着正确的方向前进？

Answer 1

似乎你在代码中使用了ID，但由于Deck没有被持久存在，所以没有ID（例如，它将具有默认值，0为int）。

请尝试使用导航属性。

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

如何使用EF核心向中间表添加行

1 个答案: