Запись данных в модель через html добавленный с помощью (JS, ASP NET)

Question

Динамически создаю новую карточку и записываю в Term и Definition данные. В модель записываются данные только из первой карточки.

Js файл

var currentCardNumber = 1;
function addCard() {
    currentCardNumber++;
    let newCardHTML = `
                    <div class="header d-flex justify-content-between p-3">
                        <h4 class="card-counter">${currentCardNumber}</h4>
                        <!--<img src="~/img/trash.svg" class="remove-card  img-fluid" height="40px" width="35px" alt="удалить карточку">-->
                    </div>
                    <div class="card-body row">
                        <div class="term col">
                            <h3>Термин</h3>
                            <input class="form-control w-100" asp-for="Cards[${currentCardNumber-1}].Term" name = "Cards[${currentCardNumber-1}].Term" placeholder="Введите термин">
                        </div>
                        <div class="definition col">
                            <h3>Определение</h3>
                            <input class="form-control w-100" asp-for="Cards[${currentCardNumber-1}].Definition" name = "Cards[${currentCardNumber-1}].Definition" placeholder="Введите определение">
                        </div>
                      
                    </div>
            `;
    let newCard = document.createElement('div');
    newCard.classList.add('card');
    newCard.classList.add('mt-3');
    newCard.innerHTML = newCardHTML;

    const binUrl = "/img/trash.svg";
    var img = new Image();
    img.classList.add("bin");
    img.classList.add("img-fluid");
    img.src = binUrl;

    let addImg = newCard.querySelector('.header');
    addImg.appendChild(img);

    let addNewCard = document.querySelector('.new-card');
    let referenceNode = document.getElementById('create-cards');
    addNewCard.insertBefore(newCard, referenceNode);
    saveCardsHTML();
    /*saveCardDataToServer(cardData);*/
    updateCounter();
    
}

View

@model CardList
<body>

<main class="main">


    <div class="container">
        <div class="new-module d-flex justify-content-between mt-5">
            <h1>Создать новый модуль</h1>
            <a class="btn btn-primary" asp-controller="Cards" asp-action="learning" type="submit">Создать</a>
        </div>

        <div class="card mt-5 p-2 pb-3">
            <h3>Название</h3>
            <input class="form-control w-100" placeholder="Введите название">
        </div>

        <form asp-controller="Cards" asp-action="Create" method="post" class="cards">
            <div class="card mt-6">
                <div class="header d-flex justify-content-between p-3">
                    <h4 class="card-counter">1</h4>
                    <img src="~/img/trash.svg" class="remove-card  img-fluid" height="40px" width="35px" alt="удалить карточку">
                </div>
                <div class="card-body row">
                    <div class="term col">
                        <h3>Термин</h3>
                        <input class="form-control w-100" asp-for="Cards[0].Term" name="Cards[0].Term" placeholder="Введите термин">
                    </div>
                    <div class="definition col">
                        <h3>Определение</h3>
                        <input class="form-control w-100" asp-for="Cards[0].Definition" name="Cards[0].Definition" placeholder="Введите определение">
                    </div>
                </div>
            </div>

            <input type="submit" value="Создать" id="create-cards" class="btn btn-primary mt-2"/>
        </form>
        <button class="new-card w-100 d-flex justify-content-center align-items-center mt-4 mt-s rounded-2" style="height: 5rem" onclick="addCard()" type="button">
            <h3>+ Добавить карточку</h3>
        </button>

    </div>

</main>
<script >
        window.onload = function (){restoreCardsHTML();};
        window.onbeforeunload = function (){ saveCardsHTML();};
    </script>
</body>

Модель

public class Card
{
    public int CardId { get; set; }
    [Required]
    public string Term { get; set; } = string.Empty;
    public string Definition { get; set; } = string.Empty;
}

public class CardList
{
    public List<Card> Cards { get; set; }
}

Контроллер

public class CardsController : Controller
{
    [HttpGet]
    public IActionResult Learning()
    {
        var cards = CardsRepository.GetCards();
        return View(cards);
    }

    public IActionResult Create()
    {
        return View();
    }


    [HttpPost]
    public IActionResult Create(CardList model)
    {
        if (ModelState.IsValid)
        {
            foreach (var card in model.Cards)
            {
                CardsRepository.AddCard(card);
            }

            return RedirectToAction(nameof(Learning));
        }

        return View(model);
    }
}

При добавлении второй карточки в HTML напрямую данные отображаются с двух карточек.

БЛОГ НА HUSL

Запись данных в модель через html добавленный с помощью (JS, ASP NET)

Ответы (0 шт):