Vytvoření Blazor aplikace seznamu úkolů

Tento kurz poskytuje základní pracovní prostředí pro vytváření a úpravu Blazor aplikace. Podrobné Blazor pokyny najdete v Blazor referenční dokumentaci.

Naučte se:

• Vytvoření projektu aplikace seznamu Blazor úkolů
• Úprava Razor součástí
• Použití zpracování událostí a datové vazby v komponentách
• Použití směrování v Blazor aplikaci

Na konci tohoto kurzu budete mít funkční aplikaci seznamu úkolů.

Požadavky

Stáhněte a nainstalujte .NET , pokud ještě není v systému nainstalovaný nebo pokud systém nemá nainstalovanou nejnovější verzi.

Vytvoření Blazor aplikace

Vytvořte novou Blazor webovou aplikaci pojmenovanou TodoList v příkazovém prostředí:

dotnet new blazor -o TodoList

Tato -o|--output možnost vytvoří složku pro projekt. Pokud jste vytvořili složku pro projekt a příkazové prostředí je v této složce otevřené, vynecháte -o|--output možnost a hodnotu pro vytvoření projektu.

Předchozí příkaz vytvoří složku s názvem TodoList s -o|--output možností uložení aplikace. Složka TodoList je kořenová složka projektu. Pomocí následujícího příkazu změňte adresáře do TodoList složky:

cd TodoList

Vytvoření aplikace seznamu Blazor úkolů

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

dotnet new razorcomponent -n Todo -o Components/Pages

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

Důležité

Razor Názvy souborů komponent vyžadují první písmeno velkého písmena. Pages Otevřete složku a potvrďte, že Todo název souboru komponenty začíná velkým písmenem T. Název souboru by měl být Todo.razor.

Otevřete komponentu v libovolném Todo editoru souborů a proveďte následující změny v horní části souboru:

• Přidejte direktivu @pageRazor s relativní adresou URL ./todo
• Povolte na stránce interaktivitu, aby se nezkreslila jen staticky. Režim vykreslování interaktivního serveru umožňuje komponentě zpracovávat události uživatelského rozhraní ze serveru.
• Přidejte název stránky s komponentou PageTitle , která umožňuje přidání elementu HTML <title> na stránku.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Uložte soubor Todo.razor.

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

Komponenta NavMenu se používá v rozložení aplikace. Rozložení jsou komponenty, které umožňují vyhnout se duplikaci obsahu v aplikaci. Tato komponenta NavLink poskytuje upozornění v uživatelském rozhraní aplikace při načtení adresy URL komponenty aplikací.

Do obsahu navigačního prvku (<nav>) komponenty přidejte následující <div> prvek pro komponentuTodo.NavMenu

V Components/Layout/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 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 takTodo, že v navigačním panelu aplikace vyberete odkaz, na kterém se stránka načte ./todo

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

TodoItem.cs Přidejte soubor do kořenového adresáře projektu (TodoListsložky) pro uložení třídy, která představuje položku úkolu. Pro třídu použijte následující kód jazyka TodoItem C#.

TodoItem.cs:

namespace BlazorSample;

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

Poznámka:

Pokud k vytvoření TodoItem.cs souboru a TodoItem třídy používáte Visual Studio, použijte některý z následujících přístupů:

• Odeberte obor názvů, který Sada Visual Studio vygeneruje pro třídu.
• Použijte tlačítko Kopírovat v předchozím bloku kódu a nahraďte celý obsah souboru, který Visual Studio vygeneruje.

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

• Přidejte pole pro položky úkolů v @code bloku. Komponenta Todo používá toto pole k udržování stavu seznamu úkolů.
• Přidání neuspořádaného kódu seznamu a foreach smyčky pro vykreslení každé položky seznamu jako položky seznamu (<li>).

Components/Pages/Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<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 úkolů do seznamu. Přidejte textový vstup (<input>) a tlačítko (<button>) pod neuspořádaný seznam (<ul>...</ul>):

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

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

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

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

AddTodo Přidejte do Todo komponenty metodu a zaregistrujte metodu tlačítka pomocí atributu@onclick. Při AddTodo výběru tlačítka se volá metoda 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 úkolu, přidejte newTodo do horní části @code bloku pole řetězce:

private string? newTodo;

Upravte textový <input> prvek tak, aby se svážel newTodo s atributem @bind :

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

Aktualizujte metodu AddTodoTodoItem pro přidání se zadaným názvem do seznamu. Vymažte hodnotu textového vstupu nastavením newTodo na prázdný řetězec:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<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 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 úkolu lze upravit a zaškrtávací políčko může uživateli pomoct sledovat dokončené položky. Přidejte vstup zaškrtávacího políčka pro každou položku úkolu a vytvořte vazbu její hodnoty na IsDone vlastnost. Změna @todo.Title elementu vázaného <input> na todo.Title@bind:

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

<h3> Aktualizujte záhlaví tak, aby zobrazovalo počet položek úkolů, které nejsou dokončené (IsDonejefalse). Výraz Razor v následující hlavičce se vyhodnocuje pokaždé, když Blazor komponentu znovu vyřeší.

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

Dokončená Todo komponenta:

@page "/todo"
@rendermode InteractiveServer

<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 Todo.razor. Aplikace se automaticky znovu sestaví v příkazovém prostředí a stránka se znovu načte v prohlížeči.

Přidejte položky, upravte položky a označte položky úkolů, které jsou hotové k otestování komponenty.

Po dokončení aplikaci v příkazovém prostředí vypněte. Mnoho příkazových prostředí přijme klávesovou zkratku Ctrl+C (Windows) nebo ⌘+C (macOS) a ukončí tak aplikaci.

Publikování do Azure

Informace o nasazení do Azure najdete v tématu Rychlý start: Nasazení webové aplikace ASP.NET.

Další kroky

V tomto kurzu jste se naučili, jak:

• Vytvoření projektu aplikace seznamu Blazor úkolů
• Úprava Razor součástí
• Použití zpracování událostí a datové vazby v komponentách
• Použití směrování v Blazor aplikaci

Další informace o nástroji pro ASP.NET Core Blazor:

ASP.NET Core Blazor