Úkol kolekce objektů

1. Zadání úkolu

Příklad, jak by mohla stránka vypadat:

2. Grafická nápověda

Logika aplikace

Vstup dat: Data z formuláře se nejprve zabalí do nové instance objektu (new Polozka) a následně se metodou .Add() vloží do seznamu.

Správa dat: Diagram ukazuje, jak tlačítka v tabulce volají metody .Remove() (pro smazání jednoho kusu) nebo .Clear() (pro vymazání všeho), čímž přímo modifikují obsah centrálního seznamu."

Výstup dat: Aby uživatel data viděl, musíme seznam projít cyklem @foreach, který pro každou položku vytvoří řádek v tabulce.

3. Řešení úkolu

Třída Položka

namespace kolekce_objektu_cviceni.Models
{
    public class Polozka
    {
        public string Nazev { get; set; } = "";
        public int Mnozstvi { get; set; }
    }
}

Třída Položka slouží jako datový model (šablona). Definuje vlastnosti Název a Množství, které musí mít každé jednotlivé zboží. Instance této třídy budeme ukládat do seznamu.

Razor komponenta

@page "/"
<PageTitle>Správa skladu</PageTitle>
 
<h1>Skladové zásoby</h1>
 
<div class="mb-3">
    <input placeholder="Název zboží" @bind="novyNazev" /> <!--Input pro název nové položky-->
    <input placeholder="Množství" type="number" @bind="noveMnozstvi" /> <!--Input pro množství položky-->
    <button class="btn btn-primary" @onclick="PridatZbozi">Přidat položku (.Add)</button>   <!--Tlačítko pro přidání nové položky-->
</div>
 
<hr />
 
<p>Celkem položek ve skladu: <strong>@sklad.Count</strong></p>  <!--Metoda .Count() spočítá počet záznamů v seznamu-->
 
<table class="table table-striped"> <!--Vytvoření tabulky-->
    <thead>
        <tr>
            <th>Název</th>
            <th>Množství</th>
            <th>Akce</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var polozka in sklad) //Cyklus, který postupně projede jednotlivé záznamy v kolekci
        {
            <tr>
                <td>@polozka.Nazev</td> <!--Výpis názvu a množství položek-->
                <td>@polozka.Mnozstvi ks</td>
                <td>
                    <button class="btn btn-danger btn-sm" @onclick="() => OdebratZbozi(polozka)">Odebrat (.Remove)</button> <!--Tlačítko pro odebrání položky-->
                </td>
            </tr>
        }
    </tbody>
</table>
 
<button class="btn btn-warning" @onclick="VymazatVse">Vymazat celý sklad (.Clear)</button>  <!--Tlačítko pro vymazání obsahu skladu-->
 
@code {
    private List<Models.Polozka> sklad = new List<Models.Polozka>();    // Kolekce objektů - položek
 
    private string novyNazev = "";  // Pomocné proměnné pro vstupy z inputů
    private int noveMnozstvi = 1;
 
    private void PridatZbozi()  // Metoda pro přidání položky do seznamu
    {
        if (!string.IsNullOrEmpty(novyNazev) && noveMnozstvi > 0) // Kontrola, zda není název prázdný nebo množství záporné číslo
        {
            // Vytvoříme novou instanci třídy Položka a rovnou ji vložíme do seznamu pomocí .Add()
            sklad.Add(new Models.Polozka { Nazev = novyNazev, Mnozstvi = noveMnozstvi });
   
            novyNazev = ""; // Vyčistíme inputy pro další zadání
            noveMnozstvi = 1;
        }
    }
 
    private void OdebratZbozi(Models.Polozka polozkaKOdebrani)  // Metoda pro odebrání konkrétní položky
    {
        sklad.Remove(polozkaKOdebrani); // Metoda .Remove() najde v seznamu konkrétní objekt a odstraní ho
    }
 
    private void VymazatVse()   // Metoda pro vymazání všech položek
    {
        sklad.Clear();  // Metoda .Clear() smaže úplně vše ze seznamu
    }
}

V části @code se vytváří seznam sklad (typ List<Polozka>). Tento seznam je dynamický – na začátku je prázdný, ale během chodu programu se mění jeho velikost pomocí metod:

.Add(): Metoda PridatZbozi vezme data z inputů, vytvoří nový objekt Položka a přidá ho na konec seznamu.

.Remove(): Metoda OdebratZbozi přijímá jako parametr konkrétní položku (tu, na kterou jsme klikli v tabulce) a vyhledá ji v seznamu, aby ji odstranila.

.Clear(): Metoda VymazatVse odstraní kompletně všechny položky ze seznamu najednou.

V horní části je formulář s inputy, které jsou pomocí @bind propojené s proměnnými, a tlačítko pro přidání. Níže se nachází tabulka, která pomocí cyklu @foreach prochází celou kolekci sklad. Vlastnost .Count se automaticky aktualizuje a vypisuje aktuální počet položek ve skladu. Uvnitř tabulky je pro každý řádek vygenerováno tlačítko "Odebrat", které volá logiku pro odstranění daného řádku.