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类来保存TodoItem类实例，并将代码重构到此处：

@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()
        {...}
}

引用文档：

组件文件在同一文件中混合了HTML标记和C＃处理代码。 @inherits指令可用于为Blazor应用程序提供“代码隐藏”体验，该体验将组件标记与处理代码分开。

Answer 2

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

因此，如果我想通过多个类使用Code-behind，则需要创建一个从ComponentBase继承的容器类，对吧？

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

2 个答案: