Thiết kế website giá rẻ

Question

I want use foreach for list in C#. I get the error Type ‘WordStudy.Models.CardList’ can only be used in ‘foreach’ statements if it implements ‘IEnumerable’ or ‘IEnumerable’, or if it has a suitable ‘GetEnumerator’ method whose return type has a ‘Current’ property and a ‘MoveNext’ method. When I implemented IEnumerable in my class it gets null.

script.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>
                    </div>
                    <div class="card-body row">
                        <div class="term col">
                            <h3>Term</h3>
                            <input class="form-control w-100" name = "term" >
                        </div>
                        <div class="definition col">
                            <h3>Definition </h3>
                            <input class="form-control w-100" name="definition" >
                        </div>
                    </div>
            </div> `;
    let newCard = document.createElement('div');
    newCard.classList.add('card');
    newCard.classList.add('mt-3');
    newCard.innerHTML = newCardHTML;

    let addNewCard = document.querySelector('.cards');
    let referenceNode = document.getElementById('create-cards');
    addNewCard.insertBefore(newCard, referenceNode);

}
function saveCardDataToServer() {
    let cards = [];
    document.querySelectorAll('.cards > .card   ').forEach((card) => {

        let termInput = card.querySelector('input[name="term"]');
        let definitionInput = card.querySelector('input[name="definition"]');

        if (termInput && definitionInput) {
            let term = termInput.value.trim();
            let definition = definitionInput.value.trim();
            cards.push({
                Term: term,
                Definition: definition
            });
        }
        else {
            console.error("Input elements not found in card:", card);
        }
    })

    fetch('/Cards/Create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({Cards: cards})
    })
        .then(response => response.json())
        .then((data => {
            if (data.success) {
                console.log("Data successfully saved: ", data);
                window.location.href = "/Cards/Learning";
            } else {
                console.error("Error saving card: ", data.message);
            }
        }))
}
document.addEventListener('DOMContentLoaded', function() {
  let newCard = document.querySelector('.new-card');
  newCard.addEventListener('click', function() {
    addCard();
  });
  document.querySelector('form.cards').addEventListener('submit', function() {
    saveCardDataToServer();
  });
});

View

@model CardList

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="~/js/script.js">
    </script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" asp-append-version="true">    
</head>

<body>

<main class="main">
  <div class="container">
        <div class="new-module d-flex justify-content-between mt-5">
            <h1>Create new module</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>Title</h3>
            <input class="form-control w-100" placeholder="Enter a name">
        </div>
        <form asp-controller="Cards" asp-action="Create" method="post" class="cards">
            <div class="card mt-6" id="card">
                <div class="header d-flex justify-content-between p-3">
                    <h4 class="card-counter">1</h4>
                </div>
                <div class="card-body row">
                    <div class="term col">
                        <h3>Term</h3>
                        <input class="form-control w-100" name = "term" >
                    </div>
                    <div class="definition col">
                        <h3>Definition </h3>
                        <input class="form-control w-100" name = "definition"  >
                    </div>
                </div>
            </div>

            <input type="submit" value="Create" 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"  type="button">
            <h3>+ Add card</h3>
        </button>
  </div>

</main>
</body>

</html>

Models

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

CardList’s model with implemented IEnumerable

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

    public CardList()
    {
        Cards = new List<Card>();
    }
    
    public IEnumerator<Card> GetEnumerator()
    {
        return Cards.GetEnumerator();
    }

    IEnumerator IEnumerable.GetEnumerator()
    {
        return GetEnumerator();
    }
}

Controller. When I implement IEnumerable CardList cards get null in Create.

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

    public IActionResult Create()
    {
        return View();
    }
    [HttpPost]
    [Route("Cards/Create/")]
    public IActionResult Create([FromBody] CardList cards)
    
    {
        if (cards != null)
        {
            foreach (var card in cards)
            {
                if (!string.IsNullOrWhiteSpace(card.Term) && !string.IsNullOrWhiteSpace(card.Definition))
                {
                    CardsRepository.AddCard(card);
                }

            }

            return Json(new { success = true, message = "Card saved successfully " });
        }

        var errors = ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage);
        return Json(new { success = false, message = "Validation error", errors = errors });
    }

When I delete IEnumerable CardList card get data, however I cannot use foreach.

Thiết kế website giá rẻ

Danh mục

When I implement IEnumerable in class it doesn’t get data through fetch api