Blazor Tworzenie aplikacji listy zadań do wykonania

Ten samouczek zawiera podstawowe środowisko pracy umożliwiające tworzenie i modyfikowanie Blazor aplikacji. Aby uzyskać szczegółowe Blazor wskazówki, zobacz dokumentację referencyjnąBlazor.

Instrukcje:

• Tworzenie projektu aplikacji listy Blazor zadań do wykonania
• Modyfikowanie Razor składników
• Używanie obsługi zdarzeń i powiązania danych w składnikach
• Używanie routingu Blazor w aplikacji

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.

Tworzenie Blazor aplikacji

Utwórz nową Blazor aplikację internetową o nazwie TodoList w powłoce poleceń:

dotnet new blazor -o TodoList

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

Poprzednie polecenie tworzy folder o nazwie TodoList z opcją -o|--output przechowywania aplikacji. Folder TodoList jest folderem głównym projektu. Zmień katalogi na TodoList folder za pomocą następującego polecenia:

cd TodoList

Tworzenie aplikacji listy Blazor zadań do wykonania

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 składnika. Nowy składnik jest tworzony w folderze projektu Components/Pages z opcją -o|--output .

Ważne

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

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
• Włącz interakcyjność na stronie, aby nie była tylko renderowana statycznie. Tryb renderowania serwera interaktywnego umożliwia składnikowi obsługę zdarzeń interfejsu użytkownika z serwera.
• Dodaj tytuł strony ze składnikiem PageTitle , który umożliwia dodawanie elementu HTML <title> do strony.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Zapisz plik Todo.razor.

Todo Dodaj składnik do paska nawigacyjnego.

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

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

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

Zapisz plik NavMenu.razor.

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

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

TodoItem.cs Dodaj plik do katalogu głównego projektu (TodoListfolderu), aby przechowywać klasę reprezentującą element zadania do wykonania. Użyj następującego kodu w języku C# dla TodoItem klasy .

TodoItem.cs:

namespace BlazorSample;

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

Uwaga

Jeśli używasz programu Visual Studio do utworzenia TodoItem.cs pliku i TodoItem klasy, użyj jednej z następujących 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 Todo składnika 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 nieurządkowany znacznik listy 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 = new();
}

Aplikacja wymaga elementów interfejsu użytkownika do dodawania elementów zadań do wykonania do listy. Dodaj tekst wejściowy () i przycisk (<input><button>) poniżej listy nieurzą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 = new();
}

TodoItem.cs Zapisz plik i zaktualizowany Todo.razor plik. W powłoce poleceń aplikacja jest automatycznie odbudowywana po zapisaniu plików. Przeglądarka ponownie ładuje stronę.

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

Dodaj metodę AddTodo do Todo składnika i zarejestruj metodę dla przycisku przy użyciu atrybutu @onclick . Metoda AddTodo języka C# jest wywoływana po wybraniu przycisku:

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

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

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

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

private string? newTodo;

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

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

Zaktualizuj metodę , AddTodo aby dodać element TodoItem o określonym tytule do listy. Wyczyść wartość tekstu wejściowego, ustawiając newTodo 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 = new();
    private string? newTodo;

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

Zapisz plik Todo.razor. 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 dane wejściowe pola wyboru dla każdego elementu zadań do wykonania i powiąż jego wartość z właściwością IsDone . Zmień @todo.Title element na <input> powiązany z elementem todo.Title za pomocą polecenia @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 oblicza za każdym razem, gdy Blazor rerenders składnik.

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

Ukończony Todo składnik:

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

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

Dodaj elementy, edytuj elementy i oznacz elementy zadań do wykonania, aby przetestować składnik.

Po zakończeniu zamknij aplikację w powłoce poleceń. Wiele powłok poleceń akceptuje polecenie klawiatury Ctrl+C (Windows) lub ⌘+C (macOS), aby zatrzymać aplikację.

Publikowanie na platformie 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 zawarto informacje na temat wykonywania następujących czynności:

• Tworzenie projektu aplikacji listy Blazor zadań do wykonania
• Modyfikowanie Razor składników
• Używanie obsługi zdarzeń i powiązania danych w składnikach
• Używanie routingu Blazor w aplikacji

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

ASP.NET Core Blazor