c# - 如何在 blazor 中创建可重用的 'GUI' ？

Question

我目前正在尝试使用 Blazor 创建我的第一个 Web 应用程序。之前我一直都是用WPF编程。我正在尝试将我的 wpf 项目转换为 asp.net core blazor 项目。

使用 wpf 时，我能够创建一个可重用的用户控件，我可以根据 sql 数据库中的数据行数继续使用该控件。我如何在 blazor 中做类似的事情？是否可以创建一个 blazor 页面然后继续重用它？

任何提示将不胜感激。

Answer 1

注意:Blazor 中的所有组件都是可重用的。

Blazor 中有两种类型的组件:可路由组件和不可路由组件。可路由组件也称为页面组件。他们使用 Razor @page 指令和路由模板进行注释，例如:

@page "/counter"

可路由组件是您可以通过 url 导航到的组件...默认模板创建一个名为 Counter 的可路由组件，您可以通过单击导航栏。 Counter 组件在这里扮演“页面”的角色。但您也可以将其作为子组件嵌入 Index 组件(在这种情况下，Counter 组件将被重用)并作为子组件

Thanks for your answer. I have managed to get a reusable razor page. Quick question. When I was doing this with wpf I used Tag to send data to the user control. How do I do this using blazor instead?

您想要的是父组件与其子组件之间的数据绑定(bind)。以下是在默认 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;
}