如何删除剩余代码以在 ASP.NET Core 3.0 中实现 Blazor 代码隐藏？

Question

我正在使用这个过时视频中的示例 Introducing Razor Components in ASP.NET Core 3.0 - Daniel Roth。

原始代码如下所示：

@page "/todo"

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

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

<input placeholder="Do something..." @bind="newTodo"/>
<button @onclick="AddTodo">Add</button>

@code {
    IList<TodoItem> todoList = new List<TodoItem>();
    string newTodo;

    void AddTodo()
    {
        if (!String.IsNullOrEmpty(newTodo))
        {
            todoList.Add(new TodoItem { Title = newTodo });
            newTodo = null;
        }
    }
}

我添加了一个通用的 ICollection class 来保存 TodoItem class 实例，并将代码重构到此处：

@page "/todo2"

<h1>Todo2 (@todoColl.Count(todo => !todo.IsDone))</h1>

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

<input placeholder="Do something..." @bind="newTodo" />
<button @onclick="@(e => { todoColl.Add(newTodo); newTodo = null;})">Add</button>

@code {
    string newTodo;
    TodoCollection todoColl = new TodoCollection();
}

我可以去掉@code部分剩下的两条语句来实现完整的代码隐藏吗？如果有任何改进建议，我将不胜感激。

Answer 1

需要吗Base class inheritance for a "code-behind" experience。对于您的代码：

Pages/Todo.razor

@inherits TodoBase  // <--- inheritance
@page "/todo"

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

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

<input placeholder="Do something..." @bind="newTodo"/>
<button @onclick="AddTodo">Add</button>

TodoBase.vs

using Microsoft.AspNetCore.Components;
namespace YourNamespace
{
    public class TodoBase : ComponentBase
    {
        // protected for inheritance visibility
        protected IList<TodoItem> todoList = new List<TodoItem>();
        protected string newTodo;

        protected void AddTodo()
        {...}
}

引用文档：

Component files mix HTML markup and C# processing code in the same file. The @inherits directive can be used to provide Blazor apps with a "code-behind" experience that separates component markup from processing code.

Answer 2

我稍微修改了你的建议。我保留了我的 TodoItem 和 TodoCollection classes，并添加了一个新的 class，TodoBase，它派生自 ComponentBase。 TodoBase class 仅包含@code 部分中的两行。 razor 页面丢失了@code 部分并获得了@inherits 行。

所以，如果我想使用多个 classes 来使用代码隐藏，我需要创建一个继承自 ComponentBase 的容器 class，对吗？

如何删除剩余代码以在 ASP.NET Core 3.0 中实现 Blazor 代码隐藏？

How do I remove the remaining code to achieve Blazor code-behind in ASP.NET Core 3.0?

code-behind

asp.net-core

blazor