如何在ASP.NET Core 3.0中删除其余代码以实现Blazor代码隐藏功能? [英] How do I remove the remaining code to achieve Blazor code-behind in ASP.NET Core 3.0?

问题描述

我正在使用此过时的视频中的示例在ASP.NET Core 3.0中引入Razor组件-丹尼尔·罗斯.

I'm using the example from this outdated video 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类实例，并将代码重构到此处:

I've added a generic ICollection class to hold the TodoItem class instances, and refactored the code to here:

@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节中剩下的两个语句来实现完整的代码隐藏吗?如果有任何改进建议，我将不胜感激.

Can I get rid of the remaining two statements in the @code section to achieve full code-behind? I'd be grateful for any suggestions on improvements.

推荐答案

是否需要.对于您的代码:

Do you need Base class inheritance for a "code-behind" experience. For your code:

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应用程序提供代码隐藏"体验，该体验将组件标记与处理代码分开.

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.

这篇关于如何在ASP.NET Core 3.0中删除其余代码以实现Blazor代码隐藏功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！