时间戳

首页 > 解决方案 > 是否有与 WinForm 的 PropertyGrid 等效的 Blazor？

blazor - 是否有与 WinForm 的 PropertyGrid 等效的 Blazor？

问题描述

我对 WinForms 应用程序的 UI 进行了早该升级，并将使其成为 Blazor 应用程序。旧版应用程序配置是使用 WinForm 的 PropertGrid 进行的。是否有将设置类转换为 Blazor 表单的等效 Blazor 组件或最佳实践？

例如

class MySettings{

public string Name {get;set;}
public int Age {get;set;}
public string Address {get;set;}

// 1000 other settings of int, string, enums etc

}

有没有一种方法可以将 MySettings 呈现为一个漂亮的 Blazor 表单，或者一个 Blazor 组件，无需在 Razor 页面中设计表单即可使用，其中数千个输入绑定到 MySettings 中的每个属性。

这是通过验证进行的长形式方法：

<EditForm Model="@_mySettingsModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="_mySettingsModel.Name" />
    <InputText id="age" @bind-Value="_mySettingsModel.Age" />
    <InputText id="address" @bind-Value="_mySettingsModel.Address" />

    <button type="submit">Submit</button>
</EditForm>

@code {
    private MySettings _mySettingsModel = new MySettings();

    private void HandleValidSubmit()
    {
        Console.WriteLine("Saving Settings...");
    }
}

参考：https ://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

标签： blazor

解决方案

WinForms的PropertyGrid比较高级，也支持编辑。Blazor 还没有为此提供官方组件。

下面的 GIF 显示了我在使用中制作的一个组件。它目前支持检查具有嵌套结构的对象的基本场景。您还不能编辑组件的属性。

更新：属性网格现在更加精简并添加了编辑器（由于尚未添加编辑功能本身，它们被转为只读。屏幕截图:)

添加了简洁的外观

Blazor 应用程序中使用的属性网格

我在以下 repo url 为 Blazor 制作了一个简单的 PropertyGrid 组件：

git 克隆https://github.com/toreaurstadboss/BlazorPropertyGrid/tree/main/BlazorPropertyGrid

GitHub 存储库都有一个 Razor 组件库项目和一个使用该组件的示例 Blazor Server 项目（带有客户端），因此应该很容易测试和改进。我可能会在某个时候向这个控件添加编辑功能..

简单的 Blazor 属性网格组件 @Github

下面的屏幕截图显示您可以检查具有嵌套级别的对象。

Github 存储库还显示了开始创建属性网格控件所需的代码。我可能会为它添加编辑功能，你可以分叉它，因为它只是我今天花了几个小时的一个演示项目。免责声明：请勿在生产环境中使用此组件，它只是一个小爱好迷你项目。

Blazor 中的属性网格

推荐阅读