Zbuduj aplikację listy zadań do wykonania Blazor

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z aktualną wersją, zobacz artykuł w wersji .NET 10.

Ostrzeżenie

Ta wersja ASP.NET Core nie jest już obsługiwana. Aby uzyskać więcej informacji, zobacz .NET i .NET Core — zasady pomocy technicznej. Aby zapoznać się z aktualną wersją, zobacz artykuł w wersji .NET 10.

Ten samouczek stanowi podstawowe praktyczne wprowadzenie do tworzenia i modyfikowania aplikacji Blazor. Aby uzyskać szczegółowe Blazor wskazówki, zobacz Blazor dokumentację referencyjną.

Dowiedz się, jak:

Tworzenie projektu aplikacji listy Blazor zadań do wykonania
Modyfikowanie Razor komponentów
Używaj obsługi zdarzeń i wiązania danych w komponentach
Korzystanie z routingu w aplikacji Blazor

Na końcu tego samouczka będziesz mieć działającą aplikację listy zadań do wykonania.

Wymagania wstępne

Pobierz i zainstaluj program .NET , jeśli nie został jeszcze zainstalowany w systemie lub jeśli system nie ma zainstalowanej najnowszej wersji.

Utwórz Blazor aplikację

Utwórz nową Blazor Web App o nazwie TodoList w powłoce poleceń:

dotnet new blazor -o TodoList

Opcja -o|--output tworzy folder dla projektu. Jeśli utworzyłeś(-aś) folder dla projektu, a powłoka poleceń jest otwarta w tym folderze, pomiń opcję i wartość -o|--output, aby utworzyć projekt.

Użyj jednego z następujących modeli hostingu, aby utworzyć nową Blazor aplikację o nazwie TodoList w powłoce poleceń:

Aby rozpocząć pracę z Blazor Server, utwórz aplikację za pomocą następującego polecenia:
```
dotnet new blazorserver -o TodoList
```
Aby rozpocząć pracę z Blazor WebAssembly, utwórz aplikację za pomocą następującego polecenia:
```
dotnet new blazorwasm -o TodoList
```

Poprzednie polecenie tworzy folder o nazwie TodoList przy użyciu opcji -o|--output, aby umieścić w nim aplikację. Folder TodoList jest głównym folderem projektu. Przejdź do folderu TodoList za pomocą następującego polecenia:

cd TodoList

Zbuduj aplikację listy zadań do wykonania Blazor

Dodaj nowy TodoRazor składnik do aplikacji przy użyciu następującego polecenia:

dotnet new razorcomponent -n Todo -o Components/Pages

Opcja -n|--name w poprzednim poleceniu określa nazwę nowego Razor komponentu. Nowy składnik jest tworzony w folderze projektu Components/Pages z opcją -o|--output .

dotnet new razorcomponent -n Todo -o Pages

Opcja -n|--name w poprzednim poleceniu określa nazwę nowego Razor komponentu. Nowy składnik jest tworzony w folderze projektu Pages z opcją -o|--output .

Ważne

Razor nazwy plików komponentów wymagają wielkiej pierwszej litery. Pages Otwórz folder i upewnij się, że Todo nazwa pliku składnika zaczyna się od wielkiej litery T. Nazwa pliku powinna mieć nazwę Todo.razor.

Otwórz składnik Todo w dowolnym edytorze plików i wprowadź następujące zmiany w górnej części pliku:

Dodaj dyrektywę @pageRazor z względnym adresem URL /todo.
Włącz interakcyjność na stronie, aby nie była tylko renderowana statycznie. Interaktywny tryb renderowania serwera umożliwia składnikowi obsługę zdarzeń interfejsu użytkownika z serwera.
Dodaj tytuł strony za pomocą komponentu PageTitle, który umożliwia dodanie elementu HTML <title> do strony.

Todo Otwórz składnik w dowolnym edytorze plików i wprowadź następujące zmiany w górnej części pliku:

Dodaj dyrektywę @pageRazor z względnym adresem URL /todo.
Dodaj tytuł strony ze składnikiem PageTitle , który umożliwia dodawanie elementu HTML <title> do strony.

Todo Otwórz składnik w dowolnym edytorze plików i dodaj dyrektywę @pageRazor ze względnym adresem 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 {

}

Zapisz Todo.razor plik.

Dodaj komponent Todo do paska nawigacyjnego.

Komponent NavMenu jest używany w układzie aplikacji. Układy to składniki, które pozwalają uniknąć duplikowania zawartości w aplikacji. Komponent NavLink udostępnia wskazówkę w interfejsie użytkownika aplikacji, gdy adres URL komponentu jest ładowany przez aplikację.

W elemencie nawigacji (<nav>) składnika NavMenu dodaj następujący <div> element dla Todo składnika.

W Components/Layout/NavMenu.razor:

W 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>

Zapisz NavMenu.razor plik.

Skompiluj i uruchom aplikację, wykonując polecenie dotnet watch run w powłoce poleceń w folderze TodoList. Po uruchomieniu aplikacji odwiedź nową stronę zadania do wykonania, wybierając link Todo na pasku nawigacyjnym aplikacji, który ładuje stronę pod adresem /todo.

Pozostaw aplikację uruchomioną w powłoce poleceń. Za każdym razem, gdy plik jest zapisywany, aplikacja jest automatycznie przebudowywana, a strona w przeglądarce jest automatycznie ponownie ładowana.

Dodaj plik TodoItem.cs do katalogu głównego projektu (folderu TodoList), który będzie zawierał klasę reprezentującą element zadania do wykonania. Użyj następującego kodu w języku C# dla klasy TodoItem.

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

Uwaga

Jeśli używasz programu Visual Studio do utworzenia pliku TodoItem.cs i klasy TodoItem, użyj dowolnej z poniższych metod:

Usuń przestrzeń nazw wygenerowaną przez program Visual Studio dla klasy.
Użyj przycisku Kopiuj w poprzednim bloku kodu i zastąp całą zawartość wygenerowanego pliku programu Visual Studio.

Wróć do komponentu Todo i wykonaj następujące zadania:

Dodaj pole dla elementów zadań do wykonania w @code bloku. Składnik Todo używa tego pola do obsługi stanu listy zadań do wykonania.
Dodaj znaczniki listy nieuporządkowanej i pętlę foreach, aby renderować każdy element zadań do wykonania jako element listy (<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 = [];
}

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 = [];
}

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

Aplikacja wymaga elementów interfejsu użytkownika do dodawania elementów zadań do wykonania do listy. Dodaj pole tekstowe (<input>) i przycisk (<button>) poniżej listy nieuporządkowanej (<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 = [];
}

@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 = [];
}

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

Zapisz plik TodoItem.cs i zaktualizowany plik Todo.razor. W wierszu polecenia aplikacja jest automatycznie przebudowywana po zapisaniu plików. Przeglądarka ponownie ładuje stronę.

Po wybraniu przycisku Add todo nic się nie dzieje, ponieważ procedura obsługi zdarzeń nie jest dołączona do przycisku.

Dodaj metodę AddTodo do komponentu Todo i zarejestruj metodę dla przycisku przy użyciu atrybutu @onclick. Metoda AddTodo języka C# jest wywoływana, gdy przycisk zostanie wybrany:

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

@code {
    private List<TodoItem> todos = [];

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

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

@code {
    private List<TodoItem> todos = [];

    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
    }
}

Aby uzyskać tytuł nowego elementu listy zadań, dodaj newTodo pole tekstowe w górnej @code części bloku:

private string? newTodo;

private string newTodo;

Zmodyfikuj element text <input>, aby powiązać go newTodo z atrybutem @bind:

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

Zaktualizuj metodę AddTodo, aby dodać TodoItem o określonym tytule do listy. Wyczyść wartość pola tekstowego, ustawiając newTodo na pusty ciąg:

@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 = [];
    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 = [];
    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;
        }
    }
}

Zapisz Todo.razor plik. Aplikacja zostanie automatycznie ponownie skompilowana w powłoce poleceń, a strona zostanie ponownie załadowana w przeglądarce.

Tekst tytułu dla każdego elementu do wykonania można edytować, a pole wyboru może pomóc użytkownikowi śledzić ukończone elementy. Dodaj pole wyboru dla każdego elementu listy zadań i powiąż jego wartość z właściwością IsDone. Zmień element @todo.Title na element <input> powiązany z elementem todo.Title za pomocą @bind:

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

Zaktualizuj nagłówek, <h3> aby wyświetlić liczbę elementów zadań do wykonania, które nie zostały ukończone (IsDone to false). Wyrażenie Razor w poniższym nagłówku jest obliczane za każdym razem, gdy Blazor renderuje komponent.

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

Ukończony Todo komponent:

@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 = [];
    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 = [];
    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;
        }
    }
}

Zapisz Todo.razor plik. Aplikacja zostanie automatycznie ponownie skompilowana w powłoce poleceń, a strona zostanie ponownie załadowana w przeglądarce.

Dodaj elementy, edytuj elementy i oznacz zadania z listy zadań jako wykonane, aby przetestować komponent.

Po zakończeniu zamknij aplikację z poziomu powłoki poleceń. Wiele powłok poleceń akceptuje polecenie klawiatury Ctrl+C, aby przerwać działanie aplikacji.

Publikuj w usłudze Azure

Aby uzyskać informacje na temat wdrażania na platformie Azure, zobacz Szybki start: wdrażanie aplikacji internetowej ASP.NET.

Następne kroki

W tym samouczku dowiesz się, jak:

Tworzenie projektu aplikacji listy Blazor zadań do wykonania
Modyfikowanie Razor komponentów
Korzystanie z obsługi zdarzeń i powiązania danych w komponentach
Używanie routingu w aplikacji Blazor

Dowiedz się więcej o narzędziach dla platformy ASP.NET Core Blazor:

ASP.NET Core Blazor

Opinia

Czy ta strona była pomocna?

Ostatnia aktualizacja o 2026-11-05

Zbuduj aplikację listy zadań do wykonania Blazor

Wymagania wstępne

Utwórz Blazor aplikację

Zbuduj aplikację listy zadań do wykonania Blazor

Publikuj w usłudze Azure

Następne kroki

Opinia

Dodatkowe zasoby