Bagikan melalui

Membuat Blazor aplikasi daftar todo

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Peringatan

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Tutorial ini memberikan pengalaman kerja dasar untuk membangun dan memodifikasi Blazor aplikasi. Untuk panduan terperinci Blazor , lihat Blazor dokumentasi referensi.

Pelajari cara:

  • Membuat proyek aplikasi daftar Blazor todo
  • Mengubah Razor komponen
  • Menggunakan penanganan peristiwa dan pengikatan data dalam komponen
  • Menggunakan perutean di Blazor aplikasi

Di akhir tutorial ini, Anda akan memiliki aplikasi daftar todo yang berfungsi.

Prasyarat

Unduh dan instal .NET jika belum diinstal pada sistem atau jika sistem belum menginstal versi terbaru.

Membuat Blazor aplikasi

Buat baru Blazor Web App bernama TodoList dalam shell perintah:

dotnet new blazor -o TodoList

Opsi -o|--output membuat folder untuk proyek. Jika Anda telah membuat folder untuk proyek dan shell perintah terbuka di folder tersebut, hilangkan -o|--output opsi dan nilai untuk membuat proyek.

Gunakan salah satu model hosting berikut untuk membuat aplikasi baru Blazor bernama TodoList dalam shell perintah:

  • Untuk pengalaman dengan Blazor Server, buat aplikasi dengan perintah berikut:

    dotnet new blazorserver -o TodoList

  • Untuk pengalaman dengan Blazor WebAssembly, buat aplikasi dengan perintah berikut:

    dotnet new blazorwasm -o TodoList

Perintah sebelumnya membuat folder bernama TodoList dengan -o|--output opsi untuk menahan aplikasi. Folder TodoList adalah folder akar proyek. Ubah direktori ke TodoList folder dengan perintah berikut:

cd TodoList

Membuat aplikasi daftar Blazor todo

Tambahkan komponen baru TodoRazor ke aplikasi menggunakan perintah berikut:

dotnet new razorcomponent -n Todo -o Components/Pages

Opsi -n|--name dalam perintah sebelumnya menentukan nama komponen baru Razor . Komponen baru dibuat di folder Components/Pages proyek dengan opsi -o|--output.

dotnet new razorcomponent -n Todo -o Pages

Opsi -n|--name dalam perintah sebelumnya menentukan nama komponen baru Razor . Komponen baru dibuat di folder Pages proyek dengan opsi -o|--output.

Penting

Razor nama file komponen memerlukan huruf pertama kapital. Buka folder Pages dan konfirmasi bahwa nama file komponen Todo dimulai dengan huruf kapital T. Nama file harus berupa Todo.razor.

Todo Buka komponen di editor file apa pun dan buat perubahan berikut di bagian atas file:

  • Tambahkan direktif @pageRazor dengan URL relatif ./todo
  • Aktifkan interaktivitas pada halaman sehingga tidak hanya dirender secara statis. Mode render Server Interaktif memungkinkan komponen untuk menangani peristiwa UI dari server.
  • Tambahkan judul halaman dengan PageTitle komponen, yang memungkinkan penambahan elemen HTML <title> ke halaman.

Todo Buka komponen di editor file apa pun dan buat perubahan berikut di bagian atas file:

  • Tambahkan direktif @pageRazor dengan URL relatif ./todo
  • Tambahkan judul halaman dengan PageTitle komponen, yang memungkinkan penambahan elemen HTML <title> ke halaman.

Todo Buka komponen di editor file apa pun dan tambahkan @pageRazor direktif dengan URL relatif ./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 {

}

Simpan file Todo.razor.

Todo Tambahkan komponen ke bilah navigasi.

Komponen NavMenu digunakan dalam tata letak aplikasi. Tata letak adalah komponen yang memungkinkan Anda menghindari duplikasi konten dalam aplikasi. Komponen NavLink memberikan isyarat di UI aplikasi saat URL komponen dimuat oleh aplikasi.

Di konten <nav> elemen navigasi (NavMenu) komponen, tambahkan elemen berikut <div> untuk Todo komponen.

Di Components/Layout/NavMenu.razor:

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

Simpan file NavMenu.razor.

Buat dan jalankan aplikasi dengan menjalankan dotnet watch run perintah di shell perintah dari TodoList folder. Setelah aplikasi berjalan, kunjungi halaman Todo baru dengan memilih Todo tautan di bilah navigasi aplikasi, yang memuat halaman di /todo.

Biarkan aplikasi menjalankan shell perintah. Setiap kali file disimpan, aplikasi secara otomatis dibangun ulang, dan halaman di browser secara otomatis dimuat ulang.

TodoItem.cs Tambahkan file ke akar proyek (TodoListfolder) untuk menyimpan kelas yang mewakili item todo. Gunakan kode C# berikut untuk kelas 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; }
}

Catatan

Jika menggunakan Visual Studio untuk membuat file dan TodoItem.cs kelas, gunakan TodoItem pendekatan berikut:

  • Hapus namespace layanan yang dihasilkan Visual Studio untuk kelas .
  • Gunakan tombol Salin di blok kode sebelumnya dan ganti seluruh konten file yang dihasilkan Visual Studio.

Kembali ke Todo komponen dan lakukan tugas berikut:

  • Tambahkan bidang untuk item agenda di blok @code. Komponen Todo menggunakan bidang ini untuk mempertahankan status daftar tugas.
  • Tambahkan markup daftar yang tidak berurutan dan perulangan foreach untuk merender setiap item tugas sebagai item daftar (<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>();
}

Aplikasi ini memerlukan elemen UI untuk menambahkan item tugas ke daftar. Tambahkan input teks (<input>) dan tombol (<button>) di bawah daftar yang tidak berurutan (<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>();
}

TodoItem.cs Simpan file dan file yang diperbaruiTodo.razor. Di shell perintah, aplikasi secara otomatis dibangun kembali saat file disimpan. Browser memuat ulang halaman.

Saat tombol Add todo dipilih, tidak ada yang terjadi karena penanganan aktivitas tidak dilampirkan ke tombol.

Tambahkan metode AddTodo ke komponen Todo dan daftarkan metode untuk tombol menggunakan atribut @onclick. Metode C# AddTodo akan digunakan jika tombol dipilih:

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

Untuk mendapatkan judul item tugas baru, tambahkan bidang string newTodo di bagian atas blok @code:

private string? newTodo;

private string newTodo;

Ubah elemen teks <input> untuk mengikat newTodo dengan @bind atribut :

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

Perbarui metode AddTodo untuk menambahkan TodoItem dengan judul yang ditentukan ke daftar. Hapus nilai input teks dengan mengatur newTodo ke string kosong:

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

Simpan file Todo.razor. Aplikasi ini secara otomatis dibangun kembali di shell perintah, dan halaman dimuat ulang di browser.

Teks judul untuk setiap item tugas dapat dibuat dapat diedit, dan kotak centang dapat membantu pengguna memantau item yang sudah selesai. Tambahkan input kotak centang untuk setiap item tugas dan kaitkan nilainya ke properti IsDone. Ubah @todo.Title menjadi elemen <input> yang diikat ke todo.Title dengan @bind:

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

Perbarui header <h3> untuk menampilkan penghitungan jumlah item tugas yang belum selesai (IsDone adalah false). Ekspresi Razor di header berikut mengevaluasi setiap kali Blazor merender komponen.

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

Komponen yang telah selesai Todo :

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

Simpan file Todo.razor. Aplikasi ini secara otomatis dibangun kembali di shell perintah, dan halaman dimuat ulang di browser.

Tambahkan item, edit item, dan tandai item tugas yang selesai untuk menguji komponen.

Setelah selesai, matikan aplikasi di shell perintah. Banyak shell perintah menerima perintah keyboard Ctrl+C untuk menghentikan aplikasi.

Menerbitkan ke Azure

Untuk informasi tentang penyebaran ke Azure, lihat Mulai Cepat: Menyebarkan aplikasi web ASP.NET.

Langkah berikutnya

Dalam tutorial ini, Anda mempelajari cara:

  • Membuat proyek aplikasi daftar Blazor todo
  • Mengubah Razor komponen
  • Menggunakan penanganan peristiwa dan pengikatan data dalam komponen
  • Menggunakan perutean di Blazor aplikasi

Pelajari tentang alat untuk ASP.NET Core Blazor:

ASP.NET Core Blazor