Blazor Yapılacaklar listesi uygulaması oluşturma
Uyarı
ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.
Bu öğretici, bir uygulama oluşturmak ve değiştirmek için temel bir Blazor çalışma deneyimi sağlar. Ayrıntılı Blazor yönergeler için başvuru belgelerine Blazor bakın.
Şunları nasıl yapacağınızı öğrenin:
- Yapılacaklar listesi Blazor uygulama projesi oluşturma
- Bileşenleri değiştirme Razor
- Bileşenlerde olay işlemeyi ve veri bağlamayı kullanma
- Uygulamada yönlendirmeyi Blazor kullanma
Bu öğreticinin sonunda çalışan bir yapılacaklar listesi uygulamasına sahip olacaksınız.
Önkoşullar
Sistemde yüklü değilse veya sistemde en son sürüm yüklü değilse .NET'i indirip yükleyin.
Blazor Uygulama oluşturma
Komut kabuğunda adlı TodoList
yeni Blazor bir Web Uygulaması oluşturun:
dotnet new blazor -o TodoList
seçeneği -o|--output
proje için bir klasör oluşturur. Proje için bir klasör oluşturduysanız ve komut kabuğu bu klasörde açıksa, projeyi oluşturma seçeneğini ve değerini atla -o|--output
.
Komut kabuğunda adlı TodoList
yeni Blazor bir uygulama oluşturmak için aşağıdaki barındırma modellerinden birini kullanın:
ile Blazor Serverilgili bir deneyim için aşağıdaki komutu kullanarak uygulamayı oluşturun:
dotnet new blazorserver -o TodoList
ile Blazor WebAssemblyilgili bir deneyim için aşağıdaki komutu kullanarak uygulamayı oluşturun:
dotnet new blazorwasm -o TodoList
Yukarıdaki komut, uygulamayı tutma seçeneğiyle -o|--output
adlı TodoList
bir klasör oluşturur. TodoList
klasör, projenin kök klasörüdür. Aşağıdaki komutla dizinleri TodoList
klasöre değiştirin:
cd TodoList
Yapılacaklar listesi Blazor uygulaması oluşturma
Aşağıdaki komutu kullanarak uygulamaya yeni Todo
Razor bir bileşen ekleyin:
dotnet new razorcomponent -n Todo -o Components/Pages
-n|--name
Yukarıdaki komuttaki seçenek, yeni Razor bileşenin adını belirtir. Yeni bileşen, projenin Components/Pages
klasöründe seçeneğiyle -o|--output
oluşturulur.
dotnet new razorcomponent -n Todo -o Pages
-n|--name
Yukarıdaki komuttaki seçenek, yeni Razor bileşenin adını belirtir. Yeni bileşen, projenin Pages
klasöründe seçeneğiyle -o|--output
oluşturulur.
Önemli
Razor bileşen dosyası adları büyük harfle yazılmış bir ilk harf gerektirir. Pages
klasörünü açın ve bileşen dosya adının büyük harfle T
başladığını onaylayınTodo
. Dosya adı olmalıdır Todo.razor
.
Todo
Bileşeni herhangi bir dosya düzenleyicisinde açın ve dosyanın en üstünde aşağıdaki değişiklikleri yapın:
- göreli URL'si
/todo
olan bir@page
Razor yönerge ekleyin. - Yalnızca statik olarak işlenmemesi için sayfada etkileşimi etkinleştirin. Etkileşimli Sunucu işleme modu, bileşenin kullanıcı arabirimi olaylarını sunucudan işlemesini sağlar.
- Bileşeniyle sayfa
PageTitle
başlığı ekleyin; bu, sayfaya html<title>
öğesi eklemeyi sağlar.
Todo
Bileşeni herhangi bir dosya düzenleyicisinde açın ve dosyanın en üstünde aşağıdaki değişiklikleri yapın:
- göreli URL'si
/todo
olan bir@page
Razor yönerge ekleyin. - Bileşeniyle sayfa
PageTitle
başlığı ekleyin; bu, sayfaya html<title>
öğesi eklemeyi sağlar.
Todo
Bileşeni herhangi bir dosya düzenleyicisinde açın ve göreli URL'si /todo
ile bir @page
Razor yönerge ekleyin.
Todo.razor
:
@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 {
}
Todo.razor
dosyasını kaydedin.
Todo
Bileşeni gezinti çubuğuna ekleyin.
Bileşen NavMenu
, uygulamanın düzeninde kullanılır. Düzenler, bir uygulamadaki içeriğin çoğaltılmasını önlemenize olanak sağlayan bileşenlerdir. Bileşen, bileşen URL'si NavLink
uygulama tarafından yüklendiğinde uygulamanın kullanıcı arabiriminde bir ipucu sağlar.
Bileşenin gezinti öğesi (<nav>
) içeriğine NavMenu
bileşen için aşağıdaki <div>
öğeyi Todo
ekleyin.
Components/Layout/NavMenu.razor
içinde:
Shared/NavMenu.razor
içinde:
<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>
NavMenu.razor
dosyasını kaydedin.
komutu klasöründen komut kabuğunda TodoList
yürüterek dotnet watch run
uygulamayı derleyin ve çalıştırın. Uygulama çalıştırıldıktan sonra, uygulamanın gezinti çubuğundaki bağlantıyı seçerek Todo
yeni Todo sayfasını ziyaret edin ve bu da sayfasını konumunda /todo
yükler.
Uygulamayı komut kabuğunu çalıştırarak bırakın. Bir dosya her kaydedildiğinde uygulama otomatik olarak yeniden oluşturulur ve tarayıcıdaki sayfa otomatik olarak yeniden yüklenir.
Yapılacaklar öğesini temsil eden bir TodoItem.cs
sınıfı tutmak için projenin köküne ( TodoList
klasör) bir dosya ekleyin. sınıfı için TodoItem
aşağıdaki C# kodunu kullanın.
TodoItem.cs
:
namespace BlazorSample;
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; }
}
Not
Dosyayı ve sınıfı oluşturmak TodoItem.cs
için Visual Studio kullanıyorsanız aşağıdaki yaklaşımlardan birini kullanın:TodoItem
- Visual Studio'nın sınıf için oluşturduğu ad alanını kaldırın.
- Önceki kod bloğundaki Kopyala düğmesini kullanın ve Visual Studio'nun oluşturduğu dosyanın tüm içeriğini değiştirin.
Bileşene Todo
dönün ve aşağıdaki görevleri gerçekleştirin:
- Bloktaki yapılacaklar öğeleri
@code
için bir alan ekleyin. Bileşen,Todo
yapılacaklar listesinin durumunu korumak için bu alanı kullanır. - Her yapılacak öğeyi liste öğesi (
<li>
) olarak işlemek için sıralanmamış liste işaretlemesi veforeach
döngü ekleyin.
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();
}
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>();
}
Uygulama, listeye yapılacaklar öğeleri eklemek için kullanıcı arabirimi öğeleri gerektirir. Sıralanmamış listenin altına metin girişi (<input>
) ve düğme (<button>
) ekleyin:<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();
}
@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
Dosyayı ve güncelleştirilmiş Todo.razor
dosyayı kaydedin. Komut kabuğunda, dosyalar kaydedildiğinde uygulama otomatik olarak yeniden oluşturulur. Tarayıcı sayfayı yeniden yükler.
Add todo
Düğme seçildiğinde, bir olay işleyicisi düğmeye bağlı olmadığından hiçbir şey olmaz.
Bileşene Todo
bir AddTodo
yöntem ekleyin ve özniteliğini kullanarak @onclick
düğme için yöntemini kaydedin. Düğme AddTodo
seçildiğinde C# yöntemi çağrılır:
<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 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
}
}
Yeni yapılacaklar öğesinin başlığını almak için bloğun @code
en üstüne bir newTodo
dize alanı ekleyin:
private string? newTodo;
private string newTodo;
text <input>
öğesini özniteliğiyle bağlanacak newTodo
şekilde @bind
değiştirin:
<input placeholder="Something todo" @bind="newTodo" />
AddTodo
belirtilen başlıkla listesini eklemek TodoItem
için yöntemini güncelleştirin. Boş bir dizeye ayarlayarak newTodo
metin girişinin değerini temizleyin:
@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;
}
}
}
@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;
}
}
}
Todo.razor
dosyasını kaydedin. Uygulama komut kabuğunda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıda yeniden yüklenir.
Her yapılacaklar öğesinin başlık metni düzenlenebilir hale getirilebilir ve bir onay kutusu kullanıcının tamamlanmış öğeleri izlemesine yardımcı olabilir. Her yapılacaklar öğesi için bir onay kutusu girişi ekleyin ve değerini özelliğine IsDone
bağlayın. ile @bind
ilişkili bir <input>
öğeye todo.Title
değiştirin@todo.Title
:
<ul>
@foreach (var todo in todos)
{
<li>
<input type="checkbox" @bind="todo.IsDone" />
<input @bind="todo.Title" />
</li>
}
</ul>
<h3>
Tamamlanmamış todo öğelerinin sayısını göstermek için üst bilgiyi güncelleştirin (IsDone
is false
). Razor Aşağıdaki üst bilgideki ifade, bileşeni her yeniden ışıyışında Blazor değerlendirilir.
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
Tamamlanan Todo
bileşen:
@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;
}
}
}
@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;
}
}
}
Todo.razor
dosyasını kaydedin. Uygulama komut kabuğunda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıda yeniden yüklenir.
Bileşeni test etmek için öğe ekleyin, öğeleri düzenleyin ve yapılacaklar öğelerini işaretleyin.
İşiniz bittiğinde, komut kabuğundaki uygulamayı kapatın. Birçok komut kabuğu, bir uygulamayı durdurmak için Ctrl+C (Windows) veya ⌘+C (macOS) klavye komutunu kabul eder.
Azure'a Yayımlama
Azure'a dağıtma hakkında bilgi için bkz . Hızlı Başlangıç: ASP.NET web uygulaması dağıtma.
Sonraki adımlar
Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:
- Yapılacaklar listesi Blazor uygulama projesi oluşturma
- Bileşenleri değiştirme Razor
- Bileşenlerde olay işlemeyi ve veri bağlamayı kullanma
- Uygulamada yönlendirmeyi Blazor kullanma
ASP.NET Core Blazoriçin araçlar hakkında bilgi edinin:
ASP.NET Core
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin