如何在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屋!