如何创建 Blazor 组件？答案

【问题标题】：How can i create a blazor component?如何创建 Blazor 组件？
【发布时间】：2020-11-08 20:42:18
【问题描述】：

我的警报课程是

namespace RazorComponents.Models
{
    public class Alert
    {
        public string Title { get; set; }
        public string Text { get; set; }
        public bool Dismissible { get; set; }
    }
}

我的 AlertComponent 是

namespace RazorComponents.Test
{
    public partial class AlertComponent : ComponentBase
    {
        public Alert Alert { get; set; }
    }
}

以下观点

@using Models
  
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>@Alert.Title</strong> You should check in on some of those fields below.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

返回编译时错误 C# An object reference is required for the non-static field, method, or property@Alert.Title

这很正常，但我如何将 Alert 类作为模型传递给视图？

至少在 MVC 中我们可以选择@model Alert 并通过
async Task<IViewComponentResult> InvokeAsync 传递模型

【问题讨论】：

标签： c# .net-core blazor

【解决方案1】：

你需要像这样向你的组件添加一个代码块：

@code
{
    [Parameter]
    private Alert Alert { get; set };
}

仅当您想从外部（从另一个组件）设置值时才添加 [Parameter] 属性。

【讨论】：

参数应该总是'public' btw

【解决方案2】：

您需要将[Parameter] 属性添加到您的Alert 属性中：

namespace RazorComponents.Test
{
    public partial class AlertComponent : ComponentBase
    {
        [Parameter]
        public Alert Alert { get; set; }
    }
}

要使用您的组件，只需将您的警报作为参数传递，如下所示：

<AlertComponent Alert="Alert"/>

@code
{
    public Alert Alert {get; set;}
}

【讨论】：

【解决方案3】：

在类后面定义代码：

AlertComponent.razor.cs

public partial class AlertComponent
    {
        [Parameter]
        public Alert Alert { get; set; }

        [Parameter]
        public EventCallback Close { get; set; }
     
    }

你需要在这里：using Microsoft.AspNetCore.Components;

注意：EventCallback Close参数用于调用打开alert的方法来关闭它。

定义 AlertComponent 的视图部分

AlertComponent.razor

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>@Alert.Title</strong> <div>@Alert.Text</div>
    <button @onclick="@(() => Close.InvokeAsync())" type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

@code {   
}

用法：

@page "/"

@if (alert != null)
 {
    <AlertComponent Alert="alert" Close="Close" />
 }

<button @onclick="ShowAlert">Display alert</button>

@code
{
    private Alert alert;

    private void ShowAlert()
    {
        alert = new Alert() { Title = "My alert", Text = "You are being alerted", Dismissible = true };
    }
    private void Close()
    {
        alert = null;
    }
}

当您点击“显示警报”按钮时，会创建一个新的 Alert 实例，重新渲染 Page 组件，这次 alert != null 为 true，从而渲染 AlertComponent。当点击AlertComponent中的“关闭按钮”时，Index组件中定义的Close方法将alert变量的值设置为null，之后Index组件会重新渲染，此时AlertComponent不会重新渲染因为 alert 变量的值为 null。

【讨论】：