Aracılığıyla paylaş

Blazor Yapılacaklar listesi uygulaması oluşturma

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

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 TodoRazor 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 Tbaş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 /todoolan bir @pageRazor 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 /todoolan bir @pageRazor 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 /todoile bir @pageRazor 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 /todoyü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 ve foreach 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 @bindiliş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 Blazor