Vytvoření aplikace Blazor seznamu úkolů

Pomocí následujícího Todo Razor příkazu přidejte do aplikace novou komponentu:

dotnet new razorcomponent -n Todo -o Pages

Možnost -n|--name v předchozím příkazu určuje název nové Razor součásti. Nová komponenta se vytvoří ve složce projektu s Pages možností -o|--output .

Otevřete komponentu v libovolném editoru souborů a na začátek souboru přidejte direktivu s Todo @page Razor relativní adresou URL /todo .

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

@code {

}

Uložte soubor Pages/Todo.razor.

Přidejte Todo komponentu na navigační panel.

Komponenta NavMenu se používá v rozložení aplikace. Rozložení jsou komponenty, které vám umožňují vyhnout se duplikování obsahu v aplikaci. Komponenta poskytuje v uživatelském rozhraní aplikace podnět, když aplikace načte adresu NavLink URL komponenty.

V obsahu navigačního prvku ( <nav class="flex-column"> ) NavMenu komponenty přidejte následující prvek pro <div> Todo komponentu.

V Shared/NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
    </NavLink>
</div>

Uložte soubor Shared/NavMenu.razor.

Sestavte a spusťte aplikaci spuštěním dotnet watch run příkazu v příkazovém prostředí ze složky TodoList . Po spuštění aplikace navštivte novou stránku Todo výběrem odkazu v navigačním panelu aplikace, který načte Todo stránku na /todo adrese .

Nechte aplikaci spuštěnou v příkazovém prostředí. Při každém uložení souboru se aplikace automaticky znovu vytvoří a stránka v prohlížeči se automaticky znovu načte.

Do kořenového adresáře projektu (složky) přidejte soubor, který bude obsahovat třídu představující položku TodoItem.cs TodoList seznamu todo. Pro třídu použijte následující kód jazyka TodoItem C#.

TodoItem.cs:

public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; }
}

Vraťte se Todo do komponenty a proveďte následující úlohy:

• Přidejte pole pro položky seznamu todo v @code bloku. Komponenta Todo používá toto pole k zachování stavu seznamu úkolů.
• Přidejte neuspořádaný kód seznamu a smyčku, která foreach vykreslí každou položku seznamu jako položku seznamu ( <li> ).

Pages/Todo.razor:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

Aplikace vyžaduje prvky uživatelského rozhraní pro přidání položek seznamu úkolů. Přidejte textové zadání ( <input> ) a tlačítko ( ) pod <button> neuspořádaný seznam ( <ul>...</ul> ):

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = new();
}

Uložte soubor a TodoItem.cs aktualizovaný Pages/Todo.razor soubor. V příkazovém prostředí se aplikace při uložení souborů automaticky znovu vytvoří. Prohlížeč stránku znovu načte.

Když je tlačítko vybrané, nic se nestane, protože obslužná rutina Add todo události není připojená k tlačítku.

Přidejte AddTodo metodu do Todo komponenty a zaregistrujte metodu pro tlačítko pomocí @onclick atributu . Při výběru tlačítka se volá metoda AddTodo jazyka C#:

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Pokud chcete získat název nové položky seznamu, přidejte do horní části bloku pole newTodo @code s řetězcem:

private string? newTodo;

Upravte element text <input> tak, aby se newTodo váže na @bind atribut :

<input placeholder="Something todo" @bind="newTodo" />

Aktualizujte AddTodo metodu a přidejte do seznamu s TodoItem určeným názvem . Vymažte hodnotu textového vstupu nastavením na newTodo prázdný řetězec:

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Uložte soubor Pages/Todo.razor. Aplikace se automaticky znovu vytvoří v příkazovém prostředí a stránka se znovu načte v prohlížeči.

Text nadpisu pro každou položku seznamu může být upravitelný a zaškrtávací políčko může uživateli pomoct sledovat dokončené položky. Přidejte zaškrtávací políčko pro každou položku seznamu todo a vytvořte vazbu její hodnoty na IsDone vlastnost . Změna @todo.Title elementu <input> vázaného na todo.Title pomocí @bind :

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

Aktualizujte hlavičku tak, aby se zobrazí počet položek seznamu, <h1> které nejsou dokončené ( IsDone je false ).

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

Dokončená Todo komponenta ( Pages/Todo.razor ):

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Uložte soubor Pages/Todo.razor. Aplikace se automaticky znovu vytvoří v příkazovém prostředí a stránka se znovu načte v prohlížeči.

Přidání položek, úpravy položek a označení položek seznamu todo provedených k otestování komponenty.

Po dokončení vypněte aplikaci v příkazovém prostředí. Mnoho příkazových prostředí přijímá stisknutím klávesy Ctrl + c příkaz k zastavení aplikace.

Pomocí následujícího Todo Razor příkazu přidejte do aplikace novou komponentu:

dotnet new razorcomponent -n Todo -o Pages

Možnost -n|--name v předchozím příkazu určuje název nové Razor součásti. Nová komponenta se vytvoří ve složce projektu s Pages možností -o|--output .

Otevřete komponentu v libovolném editoru souborů a na začátek souboru přidejte direktivu s Todo @page Razor relativní adresou URL /todo .

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

@code {

}

Uložte soubor Pages/Todo.razor.

Přidejte Todo komponentu na navigační panel.

Komponenta NavMenu se používá v rozložení aplikace. Rozložení jsou komponenty, které umožňují vyhnout se duplikaci obsahu v aplikaci. NavLinkKomponenta poskytuje upozornění v uživatelském rozhraní aplikace, když je načtena adresa URL součásti aplikace.

V neuspořádaném seznamu ( <ul>...</ul> ) NavMenu komponenty přidejte následující položku seznamu ( <li>...</li> ) a NavLink komponentu pro Todo komponentu.

V Shared/NavMenu.razor:

<ul class="nav flex-column">

    ...

    <li class="nav-item px-3">
        <NavLink class="nav-link" href="todo">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
        </NavLink>
    </li>
</ul>

Uložte soubor Shared/NavMenu.razor.

Sestavte a spusťte aplikaci spuštěním dotnet watch run příkazu v příkazovém prostředí ze TodoList složky. Po spuštění aplikace přejděte na novou stránku TODO tak, že vyberete Todo odkaz na navigačním panelu aplikace, který načte stránku na /todo .

Ponechte aplikaci spuštěnou s příkazovým prostředím. Pokaždé, když se soubor uloží, aplikace se automaticky znovu sestaví a stránka v prohlížeči se automaticky znovu načte.

Přidejte TodoItem.cs soubor do kořenového adresáře projektu ( TodoList složky), chcete-li uchovat třídu, která představuje položku todo. Pro třídu použijte následující kód jazyka C# TodoItem .

TodoItem.cs:

public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

Vraťte se do Todo komponenty a proveďte následující úlohy:

• Přidejte pole pro položky ToDo v @code bloku. TodoKomponenta používá toto pole k údržbě stavu seznamu úkolů.
• Přidejte neuspořádaný seznam značek a foreach smyčku pro vykreslení každé položky ToDo jako položky seznamu ( <li> ).

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

Aplikace vyžaduje prvky uživatelského rozhraní pro přidání položek TODO do seznamu. Přidejte textové zadání ( <input> ) a tlačítko ( <button> ) pod Neseřazený seznam ( <ul>...</ul> ):

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = new();
}

Uložte TodoItem.cs soubor a aktualizovaný Pages/Todo.razor soubor. V příkazovém prostředí se aplikace automaticky znovu sestaví při uložení souborů. Prohlížeč stránku znovu načte.

Když Add todo je vybráno tlačítko, nic se nestane, protože obslužná rutina události není připojená k tlačítku.

Přidejte AddTodo do Todo komponenty metodu a zaregistrujte metodu pro tlačítko pomocí @onclick atributu. AddTodoMetoda jazyka C# je volána, když je vybráno tlačítko:

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Chcete-li získat název nové položky ToDo, přidejte do newTodo horní části bloku pole řetězce @code :

private string newTodo;

Upravte element text <input> pro svázání newTodo s @bind atributem:

<input placeholder="Something todo" @bind="newTodo" />

Aktualizujte AddTodo metodu tak, aby se do TodoItem seznamu přidal název se zadaným názvem. Vymažte hodnotu textového zadání nastavením newTodo na prázdný řetězec:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Uložte soubor Pages/Todo.razor. Aplikace se automaticky znovu sestaví v příkazovém prostředí a stránka se znovu načte v prohlížeči.

Text nadpisu pro každou položku TODO lze upravovat a zaškrtávací políčko může uživatelům pomáhat sledovat dokončené položky. Přidejte vstup zaškrtávacího políčka pro každou položku TODO a navažte její hodnotu na IsDone vlastnost. Změnit @todo.Title na <input> element s vazbou todo.Title na @bind :

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

Aktualizujte <h1> hlavičku tak, aby zobrazovala počet nedokončených položek TODO ( IsDone je false ).

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

Dokončená Todo součást ( Pages/Todo.razor ):

@page "/todo"

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Uložte soubor Pages/Todo.razor. Aplikace se automaticky znovu sestaví v příkazovém prostředí a stránka se znovu načte v prohlížeči.

Umožňuje přidat položky, upravit položky a označit položky ToDo dokončené a otestovat komponentu.

Po dokončení ukončete aplikaci v příkazovém prostředí. Mnohé příkazové prostředí přijímají klávesovou zkratku CTRL + c , aby se zastavila aplikace.

Přidejte Todo Razor do aplikace novou komponentu pomocí následujícího příkazu:

dotnet new razorcomponent -n Todo -o Pages

-n|--nameMožnost v předchozím příkazu Určuje název nové Razor součásti. Nová součást je vytvořena ve Pages složce projektu s -o|--output možností.

Otevřete Todo komponentu v libovolném editoru souborů a přidejte @page Razor do horní části souboru direktivu s relativní adresou URL /todo .

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

@code {

}

Uložte soubor Pages/Todo.razor.

Přidejte Todo komponentu do navigačního panelu.

NavMenuKomponenta se používá v rozložení aplikace. Rozložení jsou komponenty, které umožňují vyhnout se duplikaci obsahu v aplikaci. NavLinkKomponenta poskytuje upozornění v uživatelském rozhraní aplikace, když je načtena adresa URL součásti aplikace.

V neuspořádaném seznamu ( <ul>...</ul> ) NavMenu komponenty přidejte následující položku seznamu ( <li>...</li> ) a NavLink komponentu pro Todo komponentu.

V Shared/NavMenu.razor:

<ul class="nav flex-column">

    ...

    <li class="nav-item px-3">
        <NavLink class="nav-link" href="todo">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
        </NavLink>
    </li>
</ul>

Uložte soubor Shared/NavMenu.razor.

Sestavte a spusťte aplikaci spuštěním dotnet watch run příkazu v příkazovém prostředí ze TodoList složky. Po spuštění aplikace přejděte na novou stránku TODO tak, že vyberete Todo odkaz na navigačním panelu aplikace, který načte stránku na /todo .

Ponechte aplikaci spuštěnou s příkazovým prostředím. Pokaždé, když se soubor uloží, aplikace se automaticky znovu sestaví a stránka v prohlížeči se automaticky znovu načte.

Přidejte TodoItem.cs soubor do kořenového adresáře projektu ( TodoList složky), chcete-li uchovat třídu, která představuje položku todo. Pro třídu použijte následující kód jazyka C# TodoItem .

TodoItem.cs:

public class TodoItem
{
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

Vraťte se do Todo komponenty a proveďte následující úlohy:

• Přidejte pole pro položky ToDo v @code bloku. TodoKomponenta používá toto pole k údržbě stavu seznamu úkolů.
• Přidejte neuspořádaný seznam značek a foreach smyčku pro vykreslení každé položky ToDo jako položky seznamu ( <li> ).

Pages/Todo.razor:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
}

Aplikace vyžaduje prvky uživatelského rozhraní pro přidání položek TODO do seznamu. Přidejte textové zadání ( <input> ) a tlačítko ( <button> ) pod Neseřazený seznam ( <ul>...</ul> ):

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
}

Uložte TodoItem.cs soubor a aktualizovaný Pages/Todo.razor soubor. V příkazovém prostředí se aplikace automaticky znovu sestaví při uložení souborů. Prohlížeč stránku znovu načte.

Když Add todo je vybráno tlačítko, nic se nestane, protože obslužná rutina události není připojená k tlačítku.

Přidejte AddTodo do Todo komponenty metodu a zaregistrujte metodu pro tlačítko pomocí @onclick atributu. AddTodoMetoda jazyka C# je volána, když je vybráno tlačítko:

<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

Chcete-li získat název nové položky ToDo, přidejte do newTodo horní části bloku pole řetězce @code :

private string newTodo;

Upravte element text <input> pro svázání newTodo s @bind atributem:

<input placeholder="Something todo" @bind="newTodo" />

Aktualizujte AddTodo metodu tak, aby se do TodoItem seznamu přidal název se zadaným názvem. Vymažte hodnotu textového zadání nastavením newTodo na prázdný řetězec:

@page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Uložte soubor Pages/Todo.razor. Aplikace se automaticky znovu sestaví v příkazovém prostředí a stránka se znovu načte v prohlížeči.

Text nadpisu pro každou položku TODO lze upravovat a zaškrtávací políčko může uživatelům pomáhat sledovat dokončené položky. Přidejte vstup zaškrtávacího políčka pro každou položku TODO a navažte její hodnotu na IsDone vlastnost. Změnit @todo.Title na <input> element s vazbou todo.Title na @bind :

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

Aktualizujte <h1> hlavičku tak, aby zobrazovala počet nedokončených položek TODO ( IsDone je false ).

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

Dokončená Todo součást ( Pages/Todo.razor ):

@page "/todo"

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Uložte soubor Pages/Todo.razor. Aplikace se automaticky znovu sestaví v příkazovém prostředí a stránka se znovu načte v prohlížeči.

Umožňuje přidat položky, upravit položky a označit položky ToDo dokončené a otestovat komponentu.

Po dokončení ukončete aplikaci v příkazovém prostředí. Mnohé příkazové prostředí přijímají klávesovou zkratku CTRL + c , aby se zastavila aplikace.