我目前正在尝试使用Blazor创建我的第一个web应用程序。以前我一直用WPF编程。我正在尝试将我的wpf项目转换为asp.net核心的blazor项目。
当使用wpf时,我能够创建一个可重复使用的用户控件,根据我的sql数据库中有多少行数据,我可以继续使用它。如何在blazor中执行类似的操作?有可能创建一个blazor页面,然后继续重用它吗?
如有任何提示,我们将不胜感激。
注意:Blazor中的所有组件都是可重用的。
Blazor中有两种类型的组件:可路由组件和不可路由组件。可路由组件也称为页面组件。他们用Razor@page指令和路由模板进行了注释,例如:
@page "/counter"
可路由组件是指您可以使用url导航到的组件。。。默认模板创建一个名为Counter
的可布线组件,您可以通过单击导航栏中的计数器菜单项来导航到该组件。Counter组件的作用是作为"计数器";页面";在这里但是,您也可以将它作为子组件嵌入到Index组件中,在这种情况下,Counter组件将被重用,并作为子组件
感谢您的回答。我设法得到了一个可重复使用的剃须刀页。快速提问。当我使用wpf做这件事时,我使用Tag将数据发送到用户控件。如何使用blazor来完成此操作?
您想要的是父组件与其子组件之间的数据绑定。以下是在默认Blazor模板中创建的Counter组件的代码:
计数器.razor
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
下面介绍如何更改组件,以便从要嵌入组件的父组件中获取值。
我不想像这样定义局部变量:private int currentCount = 0;
,而是想从父组件向Counter组件传递一个数值。。。在这种情况下,我必须定义一个参数属性来获得传递的值:
[Parameter]
public int CurrentCount {get; set;};
因此,现在您可以在Counter组件中使用传递的值。这就是如何将Counter组件嵌入到索引组件中并向其传递一个值:
索引.razor
@page "/"
<div>@value</div>
<Counter CurrentCount="value" />
@code
{
private int value = 100;
}