Skapa en Blazor att-göra-lista app

Den här handledningen ger dig en grundläggande praktisk erfarenhet av att skapa och ändra en Blazor-app. För detaljerad Blazor vägledning, se referensdokumentation Blazor.

Lär dig hur du:

• Skapa en att göra-lista Blazor appprojekt
• Ändra Razor komponenter
• Använda händelsehantering och databindning i komponenter
• Använda routning i en Blazor app

I slutet av den här självstudien kommer du att ha en fungerande att-göra-listapp.

Förutsättningar

Ladda ned och installera .NET om det inte redan är installerat på systemet eller om systemet inte har den senaste versionen installerad.

Skapa en Blazor app

Skapa en ny Blazor Web App med namnet TodoList i ett kommandogränssnitt:

dotnet new blazor -o TodoList

Alternativet -o|--output skapar en mapp för projektet. Om du har skapat en mapp för projektet och kommandogränssnittet är öppet i mappen utelämnar du alternativet -o|--output och värdet för att skapa projektet.

Föregående kommando skapar en mapp med namnet TodoList med alternativet -o|--output för att lagra appen. Mappen TodoList är rotmappen i projektet. Ändra kataloger till mappen TodoList med följande kommando:

cd TodoList

Skapa en att göra-lista Blazor app

Lägg till en ny TodoRazor komponent i appen med följande kommando:

dotnet new razorcomponent -n Todo -o Components/Pages

Alternativet -n|--name i föregående kommando anger namnet på den nya Razor komponenten. Den nya komponenten skapas i projektets Components/Pages mapp med alternativet -o|--output.

Viktig

Filnamn för komponenter i Razor kräver en versal första bokstav. Öppna mappen Pages och bekräfta att Todo komponentfilnamn börjar med en stor bokstav T. Filnamnet ska vara Todo.razor.

Öppna komponenten Todo i valfri filredigerare och gör följande ändringar överst i filen:

• Lägg till ett @pageRazor-direktiv med en relativ URL för /todo.
• Aktivera interaktivitet på sidan så att den inte bara återges statiskt. I återgivningsläget för interaktiv server kan komponenten hantera användargränssnittshändelser från servern.
• Lägg till en sidrubrik med komponenten PageTitle, vilket gör det möjligt att lägga till ett HTML-<title>-element på sidan.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Spara filen Todo.razor.

Lägg till komponenten Todo i navigeringsfältet.

Komponenten NavMenu används i appens layout. Layouter är komponenter som gör att du kan undvika duplicering av innehåll i en app. Komponenten NavLink ger en referens i appens användargränssnitt när komponent-URL:en läses in av appen.

I navigeringselementet (<nav>) i komponenten NavMenu lägger du till följande <div>-element för komponenten Todo.

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

Spara filen NavMenu.razor.

Skapa och kör appen genom att köra kommandot dotnet watch run i kommandogränssnittet från mappen TodoList. När appen är igång går du till den nya Todo-sidan genom att välja länken Todo i appens navigeringsfält, som laddar sidan vid /todo.

Låt appen köra kommandogränssnittet. Varje gång en fil sparas återskapas appen automatiskt och sidan i webbläsaren laddas automatiskt om.

Lägg till en TodoItem.cs fil i projektets rot (mappen TodoList) för att lagra en klass som representerar ett att göra-objekt. Använd följande C#-kod för klassen TodoItem.

TodoItem.cs:

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

Obs

Om du använder Visual Studio för att skapa TodoItem.cs-filen och TodoItem-klassen använder du antingen av följande metoder:

• Ta bort namnområdet som Visual Studio genererar för klassen.
• Använd knappen Kopiera i föregående kodblock och ersätt hela innehållet i filen som Visual Studio genererar.

Gå tillbaka till komponenten Todo och utför följande uppgifter:

• Lägg till ett fält för att göra-listor i @code-blocket. Komponenten Todo använder det här fältet för att hålla reda på tillståndet för att-göra-listan.
• Lägg till osorterad listmarkering och en foreach loop för att återge varje att göra-objekt som ett listobjekt (<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 = [];
}

Appen kräver gränssnittselement för att lägga till att göra-objekt i listan. Lägg till en textinmatning (<input>) och en knapp (<button>) under den osorterade listan (<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 = [];
}

Spara TodoItem.cs-filen och den uppdaterade Todo.razor filen. I kommandogränssnittet återskapas appen automatiskt när filerna sparas. Webbläsaren läser in sidan igen.

När knappen Add todo har valts händer ingenting eftersom en händelsehanterare inte är ansluten till knappen.

Lägg till en AddTodo-metod i komponenten Todo och registrera metoden för knappen med hjälp av attributet @onclick. Metoden AddTodo C# anropas när knappen väljs:

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

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

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

Om du vill hämta rubriken på det nya att göra-objektet lägger du till ett newTodo strängfält överst i @code blocket:

private string? newTodo;

Ändra textelementet <input> för att binda newTodo med attributet @bind:

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

Uppdatera metoden AddTodo för att lägga till TodoItem med den angivna rubriken i listan. Rensa värdet för textinmatningen genom att ange newTodo till en tom sträng:

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

Spara filen Todo.razor. Appen återskapas automatiskt i kommandogränssnittet och sidan laddas om i webbläsaren.

Rubriktexten för varje att göra-objekt kan redigeras och en kryssruta kan hjälpa användaren att hålla reda på slutförda objekt. Lägg till en kryssruta för varje att göra-objekt och binda dess värde till egenskapen IsDone. Ändra @todo.Title till ett <input> element som är bundet till todo.Title med @bind:

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

Uppdatera <h3>-huvudet för att visa antalet att göra-objekt som inte är slutförda (IsDone är false). Uttrycket Razor i följande rubrik utvärderas varje gång Blazor skickar komponenten på nytt.

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

Den slutförda Todo komponenten:

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

Spara filen Todo.razor. Appen återskapas automatiskt i kommandogränssnittet och sidan laddas om i webbläsaren.

Lägg till objekt, redigera objekt och markera att göra-objekt som gjorts för att testa komponenten.

När du är klar stänger du av appen i kommandogränssnittet. Många kommandogränssnitt accepterar tangentbordskommandot Ctrl+C för att stoppa en app.

Publicera till Azure

Information om hur du distribuerar till Azure finns i Snabbstart: Distribuera en ASP.NET webbapp.

Nästa steg

I denna handledning fick du lära dig att:

• Skapa en att göra-lista Blazor appprojekt
• Ändra Razor komponenter
• Använda händelsehantering och databindning i komponenter
• Använda routning i en Blazor app

Lär dig mer om verktyg för ASP.NET Core Blazor:

ASP.NET Core Blazor