OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter user17341708
  • Start date Start date
U

user17341708

Guest
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

Code:
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

Code:
@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

Code:
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

Code:
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.

Code:
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.

<p>I want use foreach for list in C#. I get the error <em>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</em>. When I implemented IEnumerable in my class it gets null.</p>
<p>script.js</p>
<pre><code>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();
});
});
</code></pre>
<p>View</p>
<pre><code>@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>
</code></pre>
<p>Models</p>
<pre><code>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; }
}
</code></pre>
<p>CardList's model with implemented IEnumerable</p>
<pre><code>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();
}
}
</code></pre>
<p>Controller. When I implement IEnumerable <code>CardList cards</code> get null in Create.</p>
<pre><code>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 });
}
</code></pre>
<p>When I delete IEnumerable <code>CardList card</code> get data, however I cannot use foreach.</p>
 

Latest posts

Top