Vytvoření Blazor aplikace seznamu úkolů
Poznámka:
Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v tomto článku ve verzi .NET 9.
Upozorňující
Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete v tomto článku ve verzi .NET 9.
Důležité
Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.
Aktuální verzi najdete v tomto článku ve verzi .NET 9.
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 nový Blazor Web App pojmenovaný 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.
K vytvoření nové Blazor aplikace pojmenované TodoList
v příkazovém prostředí použijte některý z následujících modelů hostování:
Pro zkušenosti s Blazor Servervytvořením aplikace pomocí následujícího příkazu:
dotnet new blazorserver -o TodoList
Pro zkušenosti s Blazor WebAssemblyvytvořením aplikace pomocí následujícího příkazu:
dotnet new blazorwasm -o TodoList
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 Todo
Razor 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í.
dotnet new razorcomponent -n Todo -o 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 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
@page
Razor 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.
Otevřete komponentu v libovolném Todo
editoru souborů a proveďte následující změny v horní části souboru:
- Přidejte direktivu
@page
Razor s relativní adresou URL ./todo
- Přidejte název stránky s komponentou
PageTitle
, která umožňuje přidání elementu HTML<title>
na stránku.
Otevřete komponentu v libovolném Todo
editoru souborů a přidejte direktivu @page
Razor s relativní adresou URL /todo
.
Todo.razor
:
@page "/todo"
@rendermode InteractiveServer
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
@code {
}
@page "/todo"
@rendermode InteractiveServer
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
@code {
}
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
@code {
}
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
@code {
}
@page "/todo"
<h3>Todo</h3>
@code {
}
@page "/todo"
<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
:
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 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 (TodoList
slož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
:
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; }
}
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; }
}
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; }
}
public class TodoItem
{
public string? Title { get; set; }
public bool IsDone { get; set; }
}
public class TodoItem
{
public string Title { get; set; }
public bool IsDone { get; set; }
}
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. KomponentaTodo
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();
}
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();
}
Pages/Todo.razor
:
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private List<TodoItem> todos = new();
}
Pages/Todo.razor
:
@page "/todo"
<PageTitle>Todo</PageTitle>
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private List<TodoItem> todos = new();
}
Pages/Todo.razor
:
@page "/todo"
<h3>Todo</h3>
<ul>
@foreach (var todo in todos)
{
<li>@todo.Title</li>
}
</ul>
@code {
private List<TodoItem> todos = new();
}
Pages/Todo.razor
:
@page "/todo"
<h3>Todo</h3>
<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 ú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();
}
@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();
}
@page "/todo"
<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();
}
@page "/todo"
<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();
}
@page "/todo"
<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();
}
@page "/todo"
<h3>Todo</h3>
<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>();
}
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
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private void AddTodo()
{
// Todo: Add the todo
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private void AddTodo()
{
// Todo: Add the todo
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private void AddTodo()
{
// Todo: Add the todo
}
}
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private void AddTodo()
{
// Todo: Add the todo
}
}
<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
}
}
Pokud chcete získat název nové položky úkolu, přidejte newTodo
do horní části @code
bloku pole řetězce:
private string? newTodo;
private string newTodo;
Upravte textový <input>
prvek tak, aby se svážel newTodo
s atributem @bind
:
<input placeholder="Something todo" @bind="newTodo" />
Aktualizujte metodu AddTodo
TodoItem
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;
}
}
}
@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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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;
}
}
}
@page "/todo"
<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 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 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é (IsDone
jefalse
). 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;
}
}
}
@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;
}
}
}
@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;
}
}
}
@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;
}
}
}
@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;
}
}
}
@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 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: