BlazorYapılacaklar listesi uygulaması oluşturma

  • Makale
  • Okumak için 7 dakika

Bu öğreticide, bir uygulamayı nasıl oluşturabileceğiniz ve değiştireceğiniz gösterilmektedir Blazor . Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

  • Yapılacaklar listesi Blazor uygulama projesi oluşturma
  • RazorBileşenleri Değiştir
  • Bileşenlerde olay işleme ve veri bağlamayı kullanma
  • Bir uygulamada yönlendirmeyi kullanma Blazor

Bu öğreticinin sonunda, çalışan bir yapılacaklar listesi uygulamanız olacak.

Önkoşullar

.NET 6,0 SDK

Uygulama oluşturma Blazor

BlazorKomut kabuğunda adlı yeni bir uygulama oluşturun TodoList :

dotnet new blazorserver -o TodoList

dotnet new blazorwasm -o TodoList

Yukarıdaki komut, TodoList uygulamayı tutma seçeneğiyle adlı bir klasör oluşturur -o|--output . TodoListKlasör, projenin kök klasörüdür . TodoListAşağıdaki komutla klasörleri klasöre değiştirin:

cd TodoList

Yapılacaklar listesi uygulaması oluşturma Blazor

  1. Todo Razor Aşağıdaki komutu kullanarak uygulamaya yeni bir bileşen ekleyin:

    dotnet new razorcomponent -n Todo -o Pages

    -n|--nameYukarıdaki komutta seçeneği, yeni bileşenin adını belirtir Razor . Yeni bileşen, Pages seçeneğiyle birlikte proje klasöründe oluşturulur -o|--output .

    Önemli

    Razor bileşen dosyası adları, büyük harfle bir ilk harf gerektirir. Klasörünü açın Pages ve Todo bileşen dosyası adının büyük harfle başlatıldığını onaylayın T . Dosya adı olmalıdır Todo.razor .

  2. TodoBileşeni herhangi bir dosya düzenleyicisinde açın ve @page Razor göreli URL 'si ile dosyanın en üstüne bir yönerge ekleyin /todo .

    Pages/Todo.razor:

    @page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

@code {

}

    Pages/Todo.razor dosyasını kaydedin.

  3. TodoBileşeni gezinti çubuğuna ekleyin.

    NavMenuBileşen, 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, NavLink uygulama tarafından bileşen URL 'si yüklendiğinde uygulamanın kullanıcı arabiriminde bir ipucu sağlar.

    Bileşenin gezinti öğesi içeriğinde ( <nav class="flex-column"> ) NavMenu , <div> bileşen için aşağıdaki öğeyi ekleyin Todo .

    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>

    Shared/NavMenu.razor dosyasını kaydedin.

  4. dotnet watch runKlasörden komut kabuğu 'ndaki komutu yürüterek uygulamayı derleyin ve çalıştırın TodoList . Uygulama çalıştırıldıktan sonra, Todo uygulamanın gezinti çubuğundaki bağlantıyı seçerek yeni Todo sayfasını ziyaret edin /todo .

    Uygulamadan komut kabuğunu çalıştırın. Bir dosya her kaydedildiğinde, uygulama otomatik olarak yeniden oluşturulur ve Tarayıcıdaki sayfa otomatik olarak yeniden yüklenir.

  5. TodoItem.cs TodoList Bir Todo öğesini temsil eden bir sınıfı tutmak için projenin (klasör) köküne bir dosya ekleyin. Sınıfı için aşağıdaki C# kodunu kullanın TodoItem .

    TodoItem.cs:

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

    Not

    dosyayı ve sınıfı oluşturmak için Visual Studio kullanıyorsanız TodoItem.cs TodoItem aşağıdaki yaklaşımlardan birini kullanın:

    • sınıf için Visual Studio oluşturduğu ad alanını kaldırın.
    • yukarıdaki kod bloğundaki kopyala düğmesini kullanın ve Visual Studio üreten dosyanın tüm içeriğini değiştirin.

  6. TodoBileşene dönün ve aşağıdaki görevleri gerçekleştirin:

    • Bloktaki Todo öğeleri için bir alan ekleyin @code . TodoBileşen, Todo listesinin durumunu korumak için bu alanı kullanır.
    • foreachHer Todo öğesini bir liste öğesi () olarak işlemek için sıralanmamış liste işaretlemesi ve bir döngüsü ekleyin <li> .

    Pages/Todo.razor:

    @page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

  7. Uygulama, listeye Todo öğeleri eklemek için Kullanıcı arabirimi öğeleri gerektirir. Sıralanmamış listenin () altına bir metin girişi ( <input> ) ve bir düğme () ekleyin <button> <ul>...</ul> :

    @page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<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();
}

  8. TodoItem.csDosyayı ve güncelleştirilmiş Pages/Todo.razor dosyayı kaydedin. Komut kabuğunda, dosyalar kaydedildiğinde uygulama otomatik olarak yeniden oluşturulur. Tarayıcı sayfayı yeniden yükler.

  9. Add todo Düğme seçildiğinde, bir olay işleyicisi düğmeye eklenmediğinden hiçbir şey olmaz.

  10. Bileşene bir AddTodo Yöntem ekleyin Todo ve özniteliği kullanarak düğmenin metodunu kaydedin @onclick . AddTodoC# yöntemi, düğme seçildiğinde ç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
    }
}

  11. Yeni Todo öğesinin başlığını almak için, newTodo bloğun üst kısmına bir dize alanı ekleyin @code :

    private string? newTodo;

    <input>Özniteliği ile bağlanacak metin öğesini değiştirin newTodo @bind :

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

  12. AddTodoBelirtilen başlığa sahip öğesini listeye eklemek için yöntemini güncelleştirin TodoItem . Metin girişinin değerini newTodo boş bir dizeye ayarlayarak temizleyin:

    @page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

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

  13. Pages/Todo.razor dosyasını kaydedin. Uygulama, komut kabuğu 'nda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıya yeniden yüklenir.

  14. Her Todo öğesi için başlık metni düzenlenebilir hale getirilebilir ve bir CheckBox, kullanıcının tamamlanmış öğeleri izlemesine yardımcı olabilir. Her Todo öğesi için bir CheckBox girişi ekleyin ve değerini IsDone özelliğine bağlayın. @todo.Title <input> İle bağlantılı bir öğeye geçin todo.Title @bind :

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

  15. <h1>Üst bilgiyi, tamamlanmamış olan Todo öğelerinin sayısının (yani) sayısını gösterecek şekilde güncelleştirin IsDone false .

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

  16. Tamamlanan Todo bileşen ( Pages/Todo.razor ):

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

  17. Pages/Todo.razor dosyasını kaydedin. Uygulama, komut kabuğu 'nda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıya yeniden yüklenir.

  18. Bileşeni test etmek için öğe ekleyin, öğeleri düzenleyin ve Todo öğelerini işaretleyin.

  19. İşiniz bittiğinde, komut kabuğu 'nda uygulamayı kapatın. Birçok komut kabuklarını, + bir uygulamayı durdurmak için CTRLc klavye komutunu kabul eder.

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

  • Yapılacaklar listesi Blazor uygulama projesi oluşturma
  • RazorBileşenleri Değiştir
  • Bileşenlerde olay işleme ve veri bağlamayı kullanma
  • Bir uygulamada yönlendirmeyi kullanma Blazor

ASP.NET Core araçları hakkında bilgi edinin Blazor :

ASP.NET Core için araç Blazor

Bu öğreticide, bir uygulamayı nasıl oluşturabileceğiniz ve değiştireceğiniz gösterilmektedir Blazor . Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

  • Yapılacaklar listesi Blazor uygulama projesi oluşturma
  • RazorBileşenleri Değiştir
  • Bileşenlerde olay işleme ve veri bağlamayı kullanma
  • Bir uygulamada yönlendirmeyi kullanma Blazor

Bu öğreticinin sonunda, çalışan bir yapılacaklar listesi uygulamanız olacak.

Önkoşullar

.NET 5.0 SDK

Uygulama oluşturma Blazor

BlazorKomut kabuğunda adlı yeni bir uygulama oluşturun TodoList :

dotnet new blazorserver -o TodoList

dotnet new blazorwasm -o TodoList

Yukarıdaki komut, TodoList uygulamayı tutma seçeneğiyle adlı bir klasör oluşturur -o|--output . TodoListKlasör, projenin kök klasörüdür . TodoListAşağıdaki komutla klasörleri klasöre değiştirin:

cd TodoList

Yapılacaklar listesi uygulaması oluşturma Blazor

  1. Todo Razor Aşağıdaki komutu kullanarak uygulamaya yeni bir bileşen ekleyin:

    dotnet new razorcomponent -n Todo -o Pages

    -n|--nameYukarıdaki komutta seçeneği, yeni bileşenin adını belirtir Razor . Yeni bileşen, Pages seçeneğiyle birlikte proje klasöründe oluşturulur -o|--output .

    Önemli

    Razor bileşen dosyası adları, büyük harfle bir ilk harf gerektirir. Klasörünü açın Pages ve Todo bileşen dosyası adının büyük harfle başlatıldığını onaylayın T . Dosya adı olmalıdır Todo.razor .

  2. TodoBileşeni herhangi bir dosya düzenleyicisinde açın ve @page Razor göreli URL 'si ile dosyanın en üstüne bir yönerge ekleyin /todo .

    Pages/Todo.razor:

    @page "/todo"

<h1>Todo</h1>

@code {

}

    Pages/Todo.razor dosyasını kaydedin.

  3. TodoBileşeni gezinti çubuğuna ekleyin.

    NavMenuBileşen, 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, NavLink uygulama tarafından bileşen URL 'si yüklendiğinde uygulamanın kullanıcı arabiriminde bir ipucu sağlar.

    Bileşenin sırasız listesinde ( <ul>...</ul> ) NavMenu , bileşen için aşağıdaki liste öğesini ( <li>...</li> ) ve NavLink bileşenini ekleyin Todo .

    Shared/NavMenu.razor içinde:

    <ul class="nav flex-column">

    ...

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

    Shared/NavMenu.razor dosyasını kaydedin.

  4. dotnet watch runKlasörden komut kabuğu 'ndaki komutu yürüterek uygulamayı derleyin ve çalıştırın TodoList . Uygulama çalıştırıldıktan sonra, Todo uygulamanın gezinti çubuğundaki bağlantıyı seçerek yeni Todo sayfasını ziyaret edin /todo .

    Uygulamadan komut kabuğunu çalıştırın. Bir dosya her kaydedildiğinde, uygulama otomatik olarak yeniden oluşturulur ve Tarayıcıdaki sayfa otomatik olarak yeniden yüklenir.

  5. TodoItem.cs TodoList Bir Todo öğesini temsil eden bir sınıfı tutmak için projenin (klasör) köküne bir dosya ekleyin. Sınıfı için aşağıdaki C# kodunu kullanın TodoItem .

    TodoItem.cs:

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

    Not

    dosyayı ve sınıfı oluşturmak için Visual Studio kullanıyorsanız TodoItem.cs TodoItem aşağıdaki yaklaşımlardan birini kullanın:

    • sınıf için Visual Studio oluşturduğu ad alanını kaldırın.
    • yukarıdaki kod bloğundaki kopyala düğmesini kullanın ve Visual Studio üreten dosyanın tüm içeriğini değiştirin.

  6. TodoBileşene dönün ve aşağıdaki görevleri gerçekleştirin:

    • Bloktaki Todo öğeleri için bir alan ekleyin @code . TodoBileşen, Todo listesinin durumunu korumak için bu alanı kullanır.
    • foreachHer Todo öğesini bir liste öğesi () olarak işlemek için sıralanmamış liste işaretlemesi ve bir döngüsü ekleyin <li> .

    Pages/Todo.razor:

    @page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

  7. Uygulama, listeye Todo öğeleri eklemek için Kullanıcı arabirimi öğeleri gerektirir. Sıralanmamış listenin () altına bir metin girişi ( <input> ) ve bir düğme () ekleyin <button> <ul>...</ul> :

    @page "/todo"

<h1>Todo</h1>

<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();
}

  8. TodoItem.csDosyayı ve güncelleştirilmiş Pages/Todo.razor dosyayı kaydedin. Komut kabuğunda, dosyalar kaydedildiğinde uygulama otomatik olarak yeniden oluşturulur. Tarayıcı sayfayı yeniden yükler.

  9. Add todo Düğme seçildiğinde, bir olay işleyicisi düğmeye eklenmediğinden hiçbir şey olmaz.

  10. Bileşene bir AddTodo Yöntem ekleyin Todo ve özniteliği kullanarak düğmenin metodunu kaydedin @onclick . AddTodoC# yöntemi, düğme seçildiğinde ç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
    }
}

  11. Yeni Todo öğesinin başlığını almak için, newTodo bloğun üst kısmına bir dize alanı ekleyin @code :

    private string newTodo;

    <input>Özniteliği ile bağlanacak metin öğesini değiştirin newTodo @bind :

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

  12. AddTodoBelirtilen başlığa sahip öğesini listeye eklemek için yöntemini güncelleştirin TodoItem . Metin girişinin değerini newTodo boş bir dizeye ayarlayarak temizleyin:

    @page "/todo"

<h1>Todo</h1>

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

  13. Pages/Todo.razor dosyasını kaydedin. Uygulama, komut kabuğu 'nda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıya yeniden yüklenir.

  14. Her Todo öğesi için başlık metni düzenlenebilir hale getirilebilir ve bir CheckBox, kullanıcının tamamlanmış öğeleri izlemesine yardımcı olabilir. Her Todo öğesi için bir CheckBox girişi ekleyin ve değerini IsDone özelliğine bağlayın. @todo.Title <input> İle bağlantılı bir öğeye geçin todo.Title @bind :

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

  15. <h1>Üst bilgiyi, tamamlanmamış olan Todo öğelerinin sayısının (yani) sayısını gösterecek şekilde güncelleştirin IsDone false .

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

  16. Tamamlanan Todo bileşen ( Pages/Todo.razor ):

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

  17. Pages/Todo.razor dosyasını kaydedin. Uygulama, komut kabuğu 'nda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıya yeniden yüklenir.

  18. Bileşeni test etmek için öğe ekleyin, öğeleri düzenleyin ve Todo öğelerini işaretleyin.

  19. İşiniz bittiğinde, komut kabuğu 'nda uygulamayı kapatın. Birçok komut kabuklarını, + bir uygulamayı durdurmak için CTRLc klavye komutunu kabul eder.

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

  • Yapılacaklar listesi Blazor uygulama projesi oluşturma
  • RazorBileşenleri Değiştir
  • Bileşenlerde olay işleme ve veri bağlamayı kullanma
  • Bir uygulamada yönlendirmeyi kullanma Blazor

ASP.NET Core araçları hakkında bilgi edinin Blazor :

ASP.NET Core için araç Blazor

Bu öğreticide, bir uygulamayı nasıl oluşturabileceğiniz ve değiştireceğiniz gösterilmektedir Blazor . Aşağıdakileri nasıl yapacağınızı öğrenirsiniz:

  • Yapılacaklar listesi Blazor uygulama projesi oluşturma
  • RazorBileşenleri Değiştir
  • Bileşenlerde olay işleme ve veri bağlamayı kullanma
  • Bir uygulamada yönlendirmeyi kullanma Blazor

Bu öğreticinin sonunda, çalışan bir yapılacaklar listesi uygulamanız olacak.

Önkoşullar

.NET Core 3,1 SDK

Uygulama oluşturma Blazor

BlazorKomut kabuğunda adlı yeni bir uygulama oluşturun TodoList :

dotnet new blazorserver -o TodoList

dotnet new blazorwasm -o TodoList

Yukarıdaki komut, TodoList uygulamayı tutma seçeneğiyle adlı bir klasör oluşturur -o|--output . TodoListKlasör, projenin kök klasörüdür . TodoListAşağıdaki komutla klasörleri klasöre değiştirin:

cd TodoList

Yapılacaklar listesi uygulaması oluşturma Blazor

  1. Todo Razor Aşağıdaki komutu kullanarak uygulamaya yeni bir bileşen ekleyin:

    dotnet new razorcomponent -n Todo -o Pages

    -n|--nameYukarıdaki komutta seçeneği, yeni bileşenin adını belirtir Razor . Yeni bileşen, Pages seçeneğiyle birlikte proje klasöründe oluşturulur -o|--output .

    Önemli

    Razor bileşen dosyası adları, büyük harfle bir ilk harf gerektirir. Klasörünü açın Pages ve Todo bileşen dosyası adının büyük harfle başlatıldığını onaylayın T . Dosya adı olmalıdır Todo.razor .

  2. TodoBileşeni herhangi bir dosya düzenleyicisinde açın ve @page Razor göreli URL 'si ile dosyanın en üstüne bir yönerge ekleyin /todo .

    Pages/Todo.razor:

    @page "/todo"

<h1>Todo</h1>

@code {

}

    Pages/Todo.razor dosyasını kaydedin.

  3. TodoBileşeni gezinti çubuğuna ekleyin.

    NavMenuBileşen, 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, NavLink uygulama tarafından bileşen URL 'si yüklendiğinde uygulamanın kullanıcı arabiriminde bir ipucu sağlar.

    Bileşenin sırasız listesinde ( <ul>...</ul> ) NavMenu , bileşen için aşağıdaki liste öğesini ( <li>...</li> ) ve NavLink bileşenini ekleyin Todo .

    Shared/NavMenu.razor içinde:

    <ul class="nav flex-column">

    ...

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

    Shared/NavMenu.razor dosyasını kaydedin.

  4. dotnet watch runKlasörden komut kabuğu 'ndaki komutu yürüterek uygulamayı derleyin ve çalıştırın TodoList . Uygulama çalıştırıldıktan sonra, Todo uygulamanın gezinti çubuğundaki bağlantıyı seçerek yeni Todo sayfasını ziyaret edin /todo .

    Uygulamadan komut kabuğunu çalıştırın. Bir dosya her kaydedildiğinde, uygulama otomatik olarak yeniden oluşturulur ve Tarayıcıdaki sayfa otomatik olarak yeniden yüklenir.

  5. TodoItem.cs TodoList Bir Todo öğesini temsil eden bir sınıfı tutmak için projenin (klasör) köküne bir dosya ekleyin. Sınıfı için aşağıdaki C# kodunu kullanın TodoItem .

    TodoItem.cs:

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

    Not

    dosyayı ve sınıfı oluşturmak için Visual Studio kullanıyorsanız TodoItem.cs TodoItem aşağıdaki yaklaşımlardan birini kullanın:

    • sınıf için Visual Studio oluşturduğu ad alanını kaldırın.
    • yukarıdaki kod bloğundaki kopyala düğmesini kullanın ve Visual Studio üreten dosyanın tüm içeriğini değiştirin.

  6. TodoBileşene dönün ve aşağıdaki görevleri gerçekleştirin:

    • Bloktaki Todo öğeleri için bir alan ekleyin @code . TodoBileşen, Todo listesinin durumunu korumak için bu alanı kullanır.
    • foreachHer Todo öğesini bir liste öğesi () olarak işlemek için sıralanmamış liste işaretlemesi ve bir döngüsü ekleyin <li> .

    Pages/Todo.razor:

    @page "/todo"

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
}

  7. Uygulama, listeye Todo öğeleri eklemek için Kullanıcı arabirimi öğeleri gerektirir. Sıralanmamış listenin () altına bir metin girişi ( <input> ) ve bir düğme () ekleyin <button> <ul>...</ul> :

    @page "/todo"

<h1>Todo</h1>

<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>();
}

  8. TodoItem.csDosyayı ve güncelleştirilmiş Pages/Todo.razor dosyayı kaydedin. Komut kabuğunda, dosyalar kaydedildiğinde uygulama otomatik olarak yeniden oluşturulur. Tarayıcı sayfayı yeniden yükler.

  9. Add todo Düğme seçildiğinde, bir olay işleyicisi düğmeye eklenmediğinden hiçbir şey olmaz.

  10. Bileşene bir AddTodo Yöntem ekleyin Todo ve özniteliği kullanarak düğmenin metodunu kaydedin @onclick . AddTodoC# yöntemi, düğme seçildiğinde çağrılır:

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

  11. Yeni Todo öğesinin başlığını almak için, newTodo bloğun üst kısmına bir dize alanı ekleyin @code :

    private string newTodo;

    text öğesini <input> özniteliğiyle bağlamak newTodo için @bind değiştirme:

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

  12. Belirtilen AddTodo başlığı listeye eklemek TodoItem için yöntemini güncelleştirin. Boş bir dizeye ayarerek metin newTodo girişinin değerini temizleme:

    @page "/todo"

<h1>Todo</h1>

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

  13. Pages/Todo.razor dosyasını kaydedin. Uygulama komut kabuğunda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıda yeniden yüklenir.

  14. Her todo öğesinin başlık metni düzenlenebilir hale edilebilir ve onay kutusu kullanıcının tamamlanmış öğeleri izlemesine yardımcı olabilir. Her todo öğesi için bir onay kutusu girişi ekleyin ve değerini özelliğine IsDone bağlayın. ile @todo.Title öğesine bağlı bir <input> öğeye todo.Title @bind değiştirme:

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

  15. Üst <h1> bilgisini, tamamlanmadı olan todo öğelerinin sayısını gösterecek şekilde güncelleştirin ( IsDone false olur).

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

  16. Tamamlanmış bileşen Todo ( Pages/Todo.razor ):

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

  17. Pages/Todo.razor dosyasını kaydedin. Uygulama komut kabuğunda otomatik olarak yeniden oluşturulur ve sayfa tarayıcıda yeniden yüklenir.

  18. Bileşeni test etmek için öğeler ekleyin, öğeleri düzenleyin ve yapılacaklar öğelerini işaretleme.

  19. Tamamlandığında, komut kabuğunda uygulamayı kapatın. Birçok komut kabuğu, bir uygulamayı durdurmak için Ctrl + c klavye komutunu kabul eder.

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

  • Todo listesi uygulama Blazor projesi oluşturma
  • Bileşenleri Razor değiştirme
  • Bileşenlerde olay işleme ve veri bağlamayı kullanma
  • Uygulamada Blazor yönlendirmeyi kullanma

ASP.NET Core için Blazor ASP.NET Core:

ASP.NET Core için araç Blazor