Tworzenie aplikacji z listą zadań do wykonania BlazorBuild a Blazor todo list app

Autorzy Daniel Roth i Luke LathamBy Daniel Roth and Luke Latham

W tym samouczku pokazano, jak utworzyć i zmodyfikować Blazor aplikację.This tutorial shows you how to build and modify a Blazor app. Omawiane kwestie:You learn how to:

  • Tworzenie projektu aplikacji z listą zadań do zrobienia BlazorCreate a todo list Blazor app project
  • Modyfikuj Razor składnikiModify Razor components
  • Używanie obsługi zdarzeń i powiązania danych w składnikachUse event handling and data binding in components
  • Używanie routingu w Blazor aplikacjiUse routing in a Blazor app

Na końcu tego samouczka będziesz mieć działającą aplikację z listą zadań do wykonania.At the end of this tutorial, you'll have a working todo list app.

Wymagania wstępnePrerequisites

Tworzenie aplikacji z listą zadań do zrobienia BlazorCreate a todo list Blazor app

  1. Utwórz nową Blazor aplikację o nazwie TodoList w powłoce poleceń:Create a new Blazor app named TodoList in a command shell:

    dotnet new blazorserver -o TodoList
    

    Poprzednie polecenie tworzy folder o nazwie TodoList do przechowywania aplikacji.The preceding command creates a folder named TodoList to hold the app. TodoListFolder jest folderem głównym projektu.The TodoList folder is the root folder of the project. Zmień katalogi na TodoList folder za pomocą następującego polecenia:Change directories to the TodoList folder with the following command:

    cd TodoList
    
  2. Dodaj nowy Todo Razor składnik do aplikacji w Pages folderze przy użyciu następującego polecenia:Add a new Todo Razor component to the app in the Pages folder using the following command:

    dotnet new razorcomponent -n Todo -o Pages
    

    Ważne

    Razor nazwy plików składników wymagają wielkich liter.Razor component file names require a capitalized first letter. Otwórz Pages folder i upewnij się, że Todo Nazwa pliku składnika zaczyna się od wielkiej litery T .Open the Pages folder and confirm that the Todo component file name starts with a capital letter T. Nazwa pliku powinna być Todo.razor .The file name should be Todo.razor.

  3. W polu Pages/Todo.razor Podaj początkowe znaczniki dla składnika:In Pages/Todo.razor provide the initial markup for the component:

    @page "/todo"
    
    <h3>Todo</h3>
    

    Zapisz plik Pages/Todo.razor.Save the Pages/Todo.razor file.

  4. Dodaj Todo składnik do paska nawigacyjnego.Add the Todo component to the navigation bar.

    NavMenuSkładnik ( Shared/NavMenu.razor ) jest używany w układzie aplikacji.The NavMenu component (Shared/NavMenu.razor) is used in the app's layout. Układy są składnikami, które umożliwiają uniknięcie duplikowania zawartości w aplikacji.Layouts are components that allow you to avoid duplication of content in the app.

    Dodaj <NavLink> element dla Todo składnika, dodając następujący znacznik elementu listy poniżej istniejących elementów listy w Shared/NavMenu.razor pliku:Add a <NavLink> element for the Todo component by adding the following list item markup below the existing list items in the Shared/NavMenu.razor file:

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

    Zapisz plik Shared/NavMenu.razor.Save the Shared/NavMenu.razor file.

  5. Skompiluj i uruchom aplikację, wykonując dotnet watch run polecenie w powłoce poleceń z TodoList folderu.Build and run the app by executing the dotnet watch run command in the command shell from the TodoList folder. Odwiedź stronę nowych zadań do wykonania pod adresem, https://localhost:5001/todo Aby upewnić się, że link nawigacyjny do Todo składnika działa.Visit the new Todo page at https://localhost:5001/todo to confirm that the sidebar navigation link to the Todo component works.

  6. Dodaj TodoItem.cs plik do katalogu głównego projektu ( TodoList folderu) do przechowywania klasy, która reprezentuje element do wykonania.Add a TodoItem.cs file to the root of the project (the TodoList folder) to hold a class that represents a todo item. Użyj następującego kodu w języku C# dla TodoItem klasy:Use the following C# code for the TodoItem class:

    public class TodoItem
    {
        public string Title { get; set; }
        public bool IsDone { get; set; }
    }
    
  7. Wróć do Todo składnika ( Pages/Todo.razor ):Return to the Todo component (Pages/Todo.razor):

    • Dodaj pole do zadań do wykonania w @code bloku.Add a field for the todo items in an @code block. TodoSkładnik używa tego pola do obsługi stanu listy zadań do wykonania.The Todo component uses this field to maintain the state of the todo list.
    • Dodaj znaczniki listy nieuporządkowane i foreach pętlę, aby renderować każdy element do wykonania jako element listy ( <li> ).Add unordered list markup and a foreach loop to render each todo item as a list item (<li>).
    @page "/todo"
    
    <h3>Todo</h3>
    
    <ul>
        @foreach (var todo in todos)
        {
            <li>@todo.Title</li>
        }
    </ul>
    
    @code {
        private IList<TodoItem> todos = new List<TodoItem>();
    }
    
  8. Aplikacja wymaga elementów interfejsu użytkownika do dodawania do listy elementów do wykonania.The app requires UI elements for adding todo items to the list. Dodaj tekst wejściowy ( <input> ) i przycisk ( <button> ) poniżej listy nieuporządkowanej ( <ul>...</ul> ):Add a text input (<input>) and a button (<button>) below the unordered list (<ul>...</ul>):

    @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>();
    }
    
  9. Zapisz TodoItem.cs plik i zaktualizowany Pages/Todo.razor plik.Save the TodoItem.cs file and the updated Pages/Todo.razor file. W powłoce poleceń aplikacja zostanie automatycznie odbudowana po zapisaniu plików.In the command shell, the app is automatically rebuilt when the files are saved. Przeglądarka tymczasowo utraci połączenie z aplikacją, a następnie ponownie ładuje stronę po ponownym nawiązaniu połączenia.The browser temporarily loses its connection to the app and then reloads the page when the connection is re-established.

  10. Gdy Add todo przycisk jest zaznaczony, nic się nie dzieje, ponieważ procedura obsługi zdarzeń nie jest dołączona do przycisku.When the Add todo button is selected, nothing happens because an event handler isn't attached to the button.

  11. Dodaj AddTodo metodę do Todo składnika i zarejestruj ją w celu wybrania opcji przy użyciu @onclick atrybutu.Add an AddTodo method to the Todo component and register it for button selections using the @onclick attribute. AddTodoMetoda C# jest wywoływana, gdy przycisk jest zaznaczony:The AddTodo C# method is called when the button is selected:

    <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
        }
    }
    
  12. Aby uzyskać tytuł nowego elementu do wykonania, należy dodać newTodo pole ciągu u góry @code bloku i powiązać je z wartością tekstu wejściowego przy użyciu bind atrybutu w <input> elemencie:To get the title of the new todo item, add a newTodo string field at the top of the @code block and bind it to the value of the text input using the bind attribute in the <input> element:

    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;
    
    <input placeholder="Something todo" @bind="newTodo" />
    
  13. Zaktualizuj AddTodo metodę, aby dodać TodoItem z określonym tytułem do listy.Update the AddTodo method to add the TodoItem with the specified title to the list. Wyczyść wartość pola wprowadzanie tekstu przez ustawienie newTodo do pustego ciągu:Clear the value of the text input by setting newTodo to an empty string:

    @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;
            }
        }
    }
    
  14. Zapisz plik Pages/ToDo.razor.Save the Pages/ToDo.razor file. Aplikacja zostanie automatycznie odbudowana w powłoce poleceń.The app is automatically rebuilt in the command shell. Strona zostanie ponownie załadowana w przeglądarce po ponownym nawiązaniu połączenia z aplikacją przez przeglądarkę.The page reloads in the browser after the browser reconnects to the app.

  15. Tekst tytułu dla każdego elementu do wykonania można edytować, a pole wyboru może pomóc użytkownikowi śledzić elementy ukończone.The title text for each todo item can be made editable, and a check box can help the user keep track of completed items. Dodaj pole wyboru dla każdego elementu do wykonania i powiąż jego wartość z IsDone właściwością.Add a check box input for each todo item and bind its value to the IsDone property. Zmień @todo.Title na <input> element powiązany z @todo.Title :Change @todo.Title to an <input> element bound to @todo.Title:

    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="todo.Title" />
            </li>
        }
    </ul>
    
  16. Aby sprawdzić, czy te wartości są powiązane, zaktualizuj <h3> nagłówek, aby pokazać liczbę elementów do wykonania, które nie zostały zakończone ( IsDone is false ).To verify that these values are bound, update the <h3> header to show a count of the number of todo items that aren't complete (IsDone is false).

    <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
    
  17. Ukończony Todo składnik ( Pages/Todo.razor ):The completed Todo component (Pages/Todo.razor):

    @page "/todo"
    
    <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
    
    <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;
            }
        }
    }
    
  18. Zapisz plik Pages/ToDo.razor.Save the Pages/ToDo.razor file. Aplikacja zostanie automatycznie odbudowana w powłoce poleceń.The app is automatically rebuilt in the command shell. Strona zostanie ponownie załadowana w przeglądarce po ponownym nawiązaniu połączenia z aplikacją przez przeglądarkę.The page reloads in the browser after the browser reconnects to the app.

  19. Dodaj elementy do wykonania, aby przetestować nowy kod.Add todo items to test the new code.

  20. Po zakończeniu zamknij aplikację w powłoce poleceń.When finished, shut down the app in the command shell. Wiele powłok poleceń akceptuje polecenie klawiatury Ctrl + c , aby zatrzymać aplikację.Many command shells accept the keyboard command Ctrl+c to stop an app.

Następne krokiNext steps

W niniejszym samouczku zawarto informacje na temat wykonywania następujących czynności:In this tutorial, you learned how to:

  • Tworzenie projektu aplikacji z listą zadań do zrobienia BlazorCreate a todo list Blazor app project
  • Modyfikuj Razor składnikiModify Razor components
  • Używanie obsługi zdarzeń i powiązania danych w składnikachUse event handling and data binding in components
  • Używanie routingu w Blazor aplikacjiUse routing in a Blazor app

Informacje o narzędziach dla ASP.NET Core Blazor :Learn about tooling for ASP.NET Core Blazor: