尝试使用Radzen.Blazor，这是Blazor的UI框架


总览

关于引入和尝试Radzen Blazor组件(Blazor的UI框架)的说明。

演示
https://nobu17.github.io/RadzenBlazorTest/
来源
https://github.com/nobu17/RadzenBlazorTest/

背景

仅Blazor没有SPA的UI框架，因此您需要单独安装。
可以使用一般的HTML或CSS框架(如Boootstrap)编写Gorigori HTML，但是这次我将尝试使用Blazor特定的框架。

假设条件

所使用的.NET Core和Blazor模板的版本如下。

  • .NET Core 3.0预览版SDK 3.0.100-preview7-012821
  • Microsoft.AspNetCore.Blazor.Templates :: 3.0.0-preview7.19365.7

  • Visual Studio 2019预览版

  • Radzen.Blazor 0.0.52

安装步骤

创建一个项目

首先，根据官方网站上的步骤从模板创建一个新的Blazor项目。
这次我们将使用客户端版本。
正式文件

Radzen.blazor

的安装和配置

尝试按照Radzen页面上的步骤进行安装。

从NuGet

安装

从Nuget安装Radzen.blazor。
在解决方案资源管理器中右键单击依赖项，然后选择"管理NuGet程序包"。
搜索Radzen.blazor并安装。
nuget.png

编辑项目

安装后，在项目中将对Radzen.blazor的引用添加到_Imports.razor。

_Imports.razor

1
2
3
// 略
// 追加
@using Radzen.Blazor

字体和CSS安装和配置

从官方网站下载主题文件并安装
https://github.com/akorchev/blazor.radzen.com/raw/master/Radzen.Blazor.Themes.zip

dist文件夹下有fonts文件夹和css文件夹，因此
将其复制并粘贴到Blazor项目内的wwwroot根文件夹中。

接下来，_Host.cshtml文件(服务器端Blazor)或wwwroot / index.html(客户端Blazor)
打开并添加一个CSS参考。这次是ClientSide，因此它将是index.html。

index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    // 略
    <link rel="stylesheet" href="css/default.css">
</head>
<body>
    // 略
</body>
</html>

编辑项目文件

对于ClientSide项目，打开csproj文件并
在RazorLangVersion

之后将设置为false的元素添加到BlazorLinkOnBuild

xxxx.csproj

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <LangVersion>7.3</LangVersion>
    <RazorLangVersion>3.0</RazorLangVersion>
    <!-- 追加  -->
    <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview7.19365.7" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview7.19365.7" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview7.19365.7" PrivateAssets="all" />
    <PackageReference Include="Radzen.Blazor" Version="0.0.49" />
  </ItemGroup>

</Project>

设置完成。
首先，检查构建是否通过。

组件介绍

我将介绍一些组件。

按钮

经典按钮。

btn1.png

这是传递

Click事件的一种熟悉方式。
可以通过在Icon属性中指定"材质"图标的图标名称来使用。

button_sample.blazor

1
2
3
4
5
6
7
8
<RadzenButton Click="@ButtonClicked" Icon="account_circle" Text="Test"></RadzenButton>

@code {
  void ButtonClicked()
  {
    //
  }
}

DatePicker

.NET开发人员也很熟悉。

我们提供从仅日期到时间可选的所有内容。
(某些格式允许您输入日期和时间)

timtim.png

  • 执行Datetime类型的属性并绑定到Value。
  • 您可以使用ShowTime，ShowSeconds和TimeOnly属性更改显示格式。
  • 可以使用DateFormat和HourFormat更改显示格式。

datepciker_sample.blazor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@page "/datepicker_sample"


<h3>DatePickerSample</h3>
<RadzenCard>
    <div class="row">
        <div class="col-md-12">
            <h3>DatePicker</h3>
            <RadzenDatePicker  Value="CurrentTime" Change="Change" />
            <h3 style="margin-top: 40px">DatePicker with time</h3>
            <RadzenDatePicker Value="CurrentTime" ShowTime="true" Change="Change" />
            <h3 style="margin-top: 40px">DatePicker with 12 hour time format</h3>
            <RadzenDatePicker Value="CurrentTime" ShowTime="true" Change="Change" HourFormat="12" />
            <h3 style="margin-top: 40px">Time-only DatePicker</h3>
            <RadzenDatePicker Value="CurrentTime" ShowTime="true" TimeOnly="true" DateFormat="HH:mm" Change="Change" />
            <h3 style="margin-top: 40px">Calendar</h3>
            <RadzenDatePicker Value="CurrentTime" Inline="true" Change="Change" />
        </div>
    </div>
</RadzenCard>

@code {

    public DateTime CurrentTime { get; set; }

    protected override void OnInit()
    {
        CurrentTime = DateTime.Now;
    }

    void Change(DateTime? value)
    {
        CurrentTime = value.GetValueOrDefault();
        StateHasChanged();
    }
}

数据网格

每个人都喜欢的DataGrid，.NET开发人员经常使用它。

dg1.png

可以按照XAML中描述的相同方法进行设置。

  • 传递数据源的集合(Data属性)，
  • 在内部定义一列并设置属性以绑定到集合的一个元素中(使用TItem指定类型，使用Property指定属性名称)

    • datagrid_sample.blazor

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    @if (@persons == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <RadzenGrid AllowFiltering="true" AllowPaging="true" PageSize="4" AllowSorting="true" Data="@(persons)" TItem="Person" RowSelect="RowSelect">
            <Columns>
                <RadzenGridColumn TItem="Person" Property="Name" Title="Name" Type="string" />
                <RadzenGridColumn TItem="Person" Property="Age" Title="Age" Type="integer" />
                <RadzenGridColumn TItem="Person" Property="Birthdate" Title="Birth Date" Format="date-time" FormatString="{0:yyyy/MM/dd HH:mm:ss}">
                </RadzenGridColumn>
            </Columns>
        </RadzenGrid>

        if (@selectedPerson != null)
        {
            <div class="row">
                <div class="col-md-12">
                    <div>@selectedPerson.Name が選択されました。</div>
                </div>
            </div>
        }
    }

    @code {
        public class Person
        {
            public string Name { get; set; }
            public int Age { get; set; }
            public DateTime Birthdate { get; set; }
        }
        Person selectedPerson = null;
        IEnumerable<Person> persons = null;

        protected override void OnInit()
        {
            persons = Enumerable.Range(0, 10).Select(p => new Person() { Name = p + "さん", Age = p + 10, Birthdate = DateTime.Now });
        }

        void RowSelect(Person p)
        {
            selectedPerson = p;
        }
    }

    对话

    这也是一个经常使用的。
    对话框的内容也被创建为剃刀组件。

    d2.png

    对话框显示会花费很多时间，因此我将按顺序说明该过程。

    对话框服务注册

    由于我们需要DI服务以显示

    对话框，因此首先将DialogService添加到Startup.cs。 (名称空间为Radzen)

    启动文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        public class Startup
        {
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddSingleton<DialogService>();
            }

            public void Configure(IComponentsApplicationBuilder app)
            {
                app.AddComponent<App>("app");
            }
        }

    创建对话框布局的组件

    接下来，创建一个组件，该组件定义Dialog本身的布局。
    注入了对话框服务以关闭对话框并在按下按钮时返回结果。

    TestDialog.razor

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    @inject Radzen.DialogService dialogService

    <div class="row">
        <div class="col-md-12" style="height:200px;">
            <div>@Message</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <RadzenButton Click="@((args) => dialogService.Close(true))" Text="OK" Style="margin-bottom: 10px; width: 150px" />
            <RadzenButton Click="@((args) => dialogService.Close(false))" ButtonStyle="secondary" Text="Cancel" Style="margin-bottom: 10px; width: 150px" />
        </div>
    </div>

    @code {

        [Parameter]
        public string Message { get; set; }
    }

    创建一个调用对话框的页面

    接下来，创建一个页面以显示对话框。
    假设您想在按下按钮时显示一个对话框。

  • 描述RadzenDialog的标签
  • 像以前一样注入dialogService
  • 在按钮的Click事件中调用dialogService的Open方法。 (指定先前在"泛型"中创建的对话框组件的类型和参数。)

    • TestDialog.razor

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    @page "/dialog_sample"

    @inject Radzen.DialogService dialogService

    <RadzenDialog />
    <h3>DialogSample</h3>
    <div class="row">
        <div class="col-md-6">
            <h3>OpenDialog</h3>
            <RadzenButton Click="Click" Text="Open" Style="margin-bottom: 20px; width: 150px" />
            <br />
            @resultText
        </div>
    </div>

    @code {
        string resultText = "";

        protected override void OnInit()
        {
            dialogService.OnClose += OnClose;
        }

        void Click()
        {
            // ダイアログの表示
            var dParam = new Dictionary<string, object>() { { "Message", "メッセージ" } };
            var dOpt = new Radzen.DialogOptions() { Width = "500px", Height = "300px", Left = "30%", Top = "20%" };
            dialogService.Open<TestDialog>("タイトル", dParam, dOpt);
        }

        void OnClose(dynamic result)
        {
            // ダイアログが閉じたとの結果を取得
            resultText = result.ToString();
            // 変更通知
            Invoke(() => { StateHasChanged(); });
        }
    }

    其他

    您经常看到的文本框，复选框，数字输入，制表符等具有所有输入控件。
    如果您有兴趣，请访问官方网站。

    概要

    因此，我介绍了Blazor的UI框架Radzen.Blazor。
    由于仍在开发中，因此本身的详细文档和功能很少，与常规SPA UI框架相比，有很多要实现的要点，但是拥有各种UI组件是件好事。是不是。

    当前没有文档，因此在查看GitHub上的示例源代码时已实现了该文档，但我希望文档会得到充实。

    说到Angular，React，Vue等SPA框架，将大量UI组件组用作一个集合是一个优势，所以我希望Blazor将来会被此类框架增强。

    演示
    https://nobu17.github.io/RadzenBlazorTest/
    来源
    https://github.com/nobu17/RadzenBlazorTest/

    Radzen Blazor Components官方网站

    过去与Blazor相关的其他文章

    在GitHub Pages上发布使用Blazor创建的网站
    在Firebase

    上发布使用Blazor创建的网站