创建演示项目

添加Platz包

Platz对象构建器的使用方式

设置Platz无代码构建器

设计演示数据库

构建查询

生成数据上下文代码

创建动态表单

ProductList.razor

ProductEdit.razor

ProductDelete.razor

测试申请

结论

当您需要为您的客户构建一个工作原型或您的公司没有企业开发预算时，您别无选择，您需要使用一些捷径和生活窍门，通常是低代码或无代码方法。在这篇文章中，我介绍了一种有趣的方法，介绍如何使用开源库Platz.SqlForms非常快速地开发Blazor UI。SqlForms 将提供SPA用户体验，它将与数据库进行通信，而无需您进行任何编码，您需要做的就是定义提供流畅符号定义的UI表单。使用嵌入式数据库架构设计器，您可以定义要显示为UI控件的实体。

从Github下载完整的解决方案

如果你有兴趣，可以阅读我关于Blazor动态表单的其他文章：

Microsoft Blazor - 动态内容
Microsoft Blazor - 使用 SQL Forms 快速开发开源 Platz.SqlForms

如果您没有Microsoft Visual Studio，可以从这里下载免费的“社区”版本：

Microsoft Visual Studio

创建演示项目

使用Visual Studio，单击“创建新项目”并找到Blazor Server App。

Microsoft Blazor Platz.SqlForms开源——使用架构生成器设计和维护SQL Server数据库创建演示项目添加Platz包设置Platz无代码构建器设计演示数据库构建查询生成数据上下文代码创建动态表单测试申请结论

单击“下一步”并设置项目名称和解决方案名称，然后单击“下一步”，然后选择“.NET 5.0”目标框架并单击“创建”。

Visual Studio 应该为您创建一个新项目：

添加Platz包

下一步是添加NuGet包——右键单击项目并单击菜单项“管理NuGet包... ”。

选择“浏览”选项卡并在搜索框中键入“Platz”。

我们需要安装'Platz.SqlForms'和'Platz.ObjectBuilder'并通过添加Platz初始化代码扩展Startup.cs：

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    // Platz
    services.AddPlatzSqlForms();
    services.AddPlatzObjectBuilder();
}

接下来，我们需要添加一个将存储架构和查询配置的项目文件夹——右键单击该项目并选择“添加”，然后选择“新建文件夹”并键入“SchemaStore”。

Platz对象构建器的使用方式

Platz Schema Designer和Query Builder是我们添加的无代码元素，用于简化和加快开发过程。

使用Schema Designer，我们可以直观地定义数据库表和关系，并将它们以json格式保存到配置文件中。然后应用t4模板，我们可以生成C#代码来管理定义的数据库并为Platz动态UI组件提供CRUD操作。

查询生成器用于数据库查询的可视化设计，以使用SQL的全部功能检索数据。结果查询存储在配置json文件中，可用于C#代码生成。

T4模板生成的代码可以原生对接Platz动态UI组件，无需手动编码。

设置Platz无代码构建器

要设置无代码构建器，我们需要创建两个razor页面并在Shared\NavMenu.razor中注册它们，您也可以删除Visual Studio演示页面（Counter.razor和FetchData.razor）。

将“SchemaDesigner.razor”添加到“Pages”文件夹：

@page "/SchemaDesigner"
@using Platz.ObjectBuilder

<SchemaComponent StoreDataPath="SchemaStore" DataService="PlatzDemoService" 
                 Namespace="PlatzDemo.SchemaStore"
                 TargetConnectionString="Server=(localdb)\mssqllocaldb;
                 Database=PlatzDemo;Trusted_Connection=True;MultipleActiveResultSets=true" />

将“QueryDesigner.razor”添加到“Pages”文件夹：

@page "/QueryDesigner"
@using Platz.ObjectBuilder

<QueryComponent SourceSchemaFile="SchemaStore\PlatzDemo.schema.json" 
                StoreDataPath="SchemaStore"
                DataService="PlatzDemoDataContext" Namespace="PlatzDemo.SchemaStore" />

将链接添加到JQuery和引导程序到“Pages\_Host.cshtml”：

...
<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Platz.SqlForms.Demo</title>
    <base href="~/" target="_blank" rel="external nofollow"  />

    @*Added for Platz*@
    <link rel="stylesheet" 
     href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" target="_blank" rel="external nofollow"  
     integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
     crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
     crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" 
     integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
     crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" 
     integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 
     crossorigin="anonymous"></script>

    <link href="css/site.css" target="_blank" rel="external nofollow"  rel="stylesheet" />
    <link href="Platz.SqlForms.Demo.styles.css" target="_blank" rel="external nofollow"  rel="stylesheet" />
</head>
...

并更改“Shared\NavMenu.razor”：

...
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" target="_blank" rel="external nofollow"  Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="SchemaDesigner" target="_blank" rel="external nofollow" >
                <span class="oi oi-list-rich" aria-hidden="true"></span> Admin Schemas
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="QueryDesigner" target="_blank" rel="external nofollow" >
                <span class="oi oi-list-rich" aria-hidden="true"></span> Admin Queries
            </NavLink>
        </li>
    </ul>
</div>
...

设计演示数据库

现在让我们运行应用程序并单击“管理架构”页面。您将看到带有新架构的页面，该架构已准备好创建。

输入“PlatzDemo”作为架构名称并选择“使用INT自动增量ID ”选项。现在您可以通过单击绿色的“添加”按钮来添加表格。

每个表都应该有一个“Id”列，它标识每条记录并允许我们在表之间创建关系。

对于每一列，您应该指定Name和Type。

我创建了一个“Product”表：

现在，我想再添加两个表来创建客户订单输入系统，您可以在图表上看到添加的表。添加完所有表后，单击“架构”选项卡上的“保存”按钮。

您可以看到我添加了从“OrderItem”表到“Order”和“Product”的引用。

构建查询

保存模式后，我们可以单击“管理查询”菜单并使用定义的表来构建查询。

在下面的截图中，您可以看到设计的表连接起来生成订单项目列表页面所需的输出。

当你关闭浏览器，你应该看到的是，项目文件夹“SchemaStore”现在包含文件：“GetOrderItemProductList.json”用于查询定义，“PlatzDemo.schema.json”和“PlatzDemo.schema.migrations.json”用于架构定义。

生成数据上下文代码

现在我们可以使用t4模板生成数据库ORM代码。为此，创建一个项目文件夹“SchemaServices ”并在其中创建一个名为“PlatzDemoDataContext.txt”的文本文件，然后打开项目文件“Platz.Config.Link\CopyMe.SchemaStoreDataContext.tt.txt”并将其内容复制到创建文件“PlatzDemoDataContext.txt”。在此文件中，修改Schema json的路径：

<# // ================================================================ 
Set JsonStorePath here, relative to solution folder ================================== #>
<#      string JsonStorePath = @"Platz.SqlForms.Demo\SchemaStore\PlatzDemo.schema.json"; #>
<# // =========================================================================
============================================================================== #>

保存文件，然后将其重命名为“PlatzDemoDataContext.tt”——这是Visual Studio可以识别的t4扩展。每次对此文件进行更改或保存时——模板将运行以生成代码，因此再次保存——此操作应生成“PlatzDemoDataContext.cs ”文件，其中包含我们设计的数据库模式的生成代码：

// *********************************************************************************************
// This code is auto generated by Platz.ObjectBuilder template, 
// any changes made to this code will be lost
// *********************************************************************************************
using System;
using System.Collections.Generic;
using System.Text;
using System.Linq;
using Platz.ObjectBuilder;
using Platz.SqlForms;
using PlatzDemo.SchemaStore;

namespace PlatzDemo.SchemaStore
{
    #region Data Context

    public partial class PlatzDemoDataContext : DataContextBase
    {
        protected override void Configure(DataContextSettings settings)
        {
            settings.SetSchema("PlatzDemo");
            settings.SetDriver<SqlJsonStoreDatabaseDriver>();
            settings.MigrationsPath = @"\SchemaStore\PlatzDemo.schema.migrations.json";

            settings.AddTable<Order>();
            settings.AddTable<OrderItem>();
            settings.AddTable<Product>();
        }
    }

    #endregion

    #region Entities

    public partial class Order
    {
        public virtual int Id { get; set; }
        public virtual string ClientName { get; set; }
        public virtual DateTime Created { get; set; }
    }

    public partial class OrderItem
    {
        public virtual int Id { get; set; }
        public virtual int OrderId { get; set; }
        public virtual int ProductId { get; set; }
        public virtual int Qty { get; set; }
    }

    public partial class Product
    {
        public virtual int Id { get; set; }
        public virtual string Name { get; set; }
        public virtual decimal Price { get; set; }
    }

    #endregion
}

为了能够使用生成的代码，我们只需要将连接字符串添加到“appsettings.json”文件中：

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=PlatzDemo;
     Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

如您所见，我在此演示中使用了Microsoft SQL Local DB。

创建动态表单

我们创建一个“SchemaForms”项目文件夹并将动态表单定义代码放在那里：

using PlatzDemo.SchemaStore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Platz.SqlForms.Demo.SchemaForms
{
    public class ProductForm : StoreDynamicEditFormBase<PlatzDemoDataContext>
    {
        protected override void Define(DynamicFormBuilder builder)
        {
            builder.Entity<Product>(e =>
            {
                e.Property(p => p.Id).IsReadOnly();
                e.Property(p => p.Name).IsRequired();
                e.Property(p => p.Price).IsRequired();
                e.DialogButton(ButtonActionTypes.Cancel).DialogButton
                (ButtonActionTypes.Validate).DialogButton(ButtonActionTypes.Submit);
                e.DialogButtonNavigation("ProductList", 
                ButtonActionTypes.Delete, ButtonActionTypes.Cancel, ButtonActionTypes.Submit);
            });
        }
    }

    public class ProductListForm : StoreDataServiceBase<PlatzDemoDataContext>
    {
        protected override void Define(DataServiceFormBuilder builder)
        {
            builder.Entity<Product>(e =>
            {
                e.ExcludeAll();
                e.Property(p => p.Id).IsPrimaryKey();
                e.Property(p => p.Name);
                e.Property(p => p.Price);
                e.ContextButton("Edit", "ProductEdit/{0}").ContextButton
                               ("Delete", "ProductDelete/{0}");
                e.DialogButton("ProductEdit/0", ButtonActionTypes.Add);
            });

            builder.SetListMethod(GetProductList);
        }

        public List<Product> GetProductList(params object[] parameters)
        {
            var db = GetDbContext();
            var result = db.Get(typeof(Product)).Cast<Product>().ToList();
            return result;
        }
    }
}

现在我们添加Blazor页面来呈现产品表单并在“NavMenu.razor”中注册产品列表页面。

ProductList.razor

@page "/ProductList/"
@using Platz.SqlForms.Demo.SchemaForms

<h1>Product Edit</h1>

<FormDataServiceListComponent TForm="ProductListForm" />

ProductEdit.razor

@page "/ProductEdit/{Id:int}"
@using Platz.SqlForms.Demo.SchemaForms

<h1>Product Edit</h1>

<FormDynamicEditComponent TForm="ProductForm" Id="@Id" />

@code {
    [Parameter]
    public int Id { get; set; }
}

ProductDelete.razor

@page "/ProductEdit/{Id:int}"
@using Platz.SqlForms.Demo.SchemaForms

<h1>Product Edit</h1>

<FormDynamicEditComponent TForm="ProductForm" Id="@Id" />

@code {
    [Parameter]
    public int Id { get; set; }
}

同样，我们为“Order”和“OrderItem”表添加动态表单和页面。

我们省略了这段代码以减少阅读时间。你可以在GitHub上找到完整的代码。

关于如何定义动态表单和使用动态razor组件的所有解释都可以在我的文章Microsoft Blazor - Rapid Development with SQL Forms Open-source Platz.SqlForms中找到。

测试申请

当我们第一次启动应用程序时，它会自动创建SQL数据库并应用所有迁移脚本。

您将能够在更接近最终发布日期的Platz.SqlForms项目文档中找到有关如何使用迁移的详细信息。

您现在可以将新产品添加到数据库、编辑和删除它们。

完整的项目演示还包含添加和编辑订单和订单项目的功能。

结论

在本文中，我们演示了如何使用嵌入式架构设计器来定义数据库并在动态UI生成中使用它。

模式设计器和查询构建器为Platz.SqlForms快速开发和原型设计添加了无代码技术。我们知道从维护的角度来看无代码可能会很痛苦，这就是为什么我们提出一种新方法——将您的架构或查询设计保存到json，然后您可以使用许多t4模板来生成结果代码。

未来的版本可能包括生成实体框架数据上下文的t4模板，因此从无代码原型开始的开发人员将能够迁移到可靠的Microsoft ORM。

https://www.codeproject.com/Articles/5299666/Microsoft-Blazor-Platz-SqlForms-Open-source-Using

Microsoft Blazor Platz.SqlForms开源——使用架构生成器设计和维护SQL Server数据库创建演示项目添加Platz包设置Platz无代码构建器设计演示数据库构建查询生成数据上下文代码创建动态表单测试申请结论

创建演示项目

添加Platz包

Platz对象构建器的使用方式

设置Platz无代码构建器

设计演示数据库

构建查询

生成数据上下文代码

创建动态表单

ProductList.razor

ProductEdit.razor

ProductDelete.razor

测试申请

结论

继续阅读

asp.net core Swagger JWT

跟进 .NET 8 Blazor 之 ReuseTabs 支持 Query 属性绑定

Castle动态代理拦截器可跟踪模型更改和触发规则介绍总结

IdentityServer4（四）

asp.net core源代码下载与运行

C# Blazor Server 图形验证简单示例

ASP.NET CORE API 部署到IIS 上HTTP错误 500.19-Internal Server Error 错误代码：0x8007000d

Cake Frosting：更具可维护性的C＃DevOps什么是Frosting？入门适应Frosting别名目录/文件插件和工具概括

ASP.NET Core MVC 源码学习：Routing 路由

.Net Core平台下实现SignalR客户端和服务端

ASP.NET Core 中创建 gRPC 客户端和服务器

ASP.NET Core SignalR.NET 客户端

AutoWrapper：通过有意义的响应来美化您的ASP.NET Core API介绍默认的ASP.NET Core API响应AutoWrapper.Core的救援TL，DR 给我看代码定义自己的自定义消息定义自己的Api异常选项支持日志支持Swagger总结参考文献

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD介绍背景使用代码

ASP.NET Core MVC(一)

创建ASP.NET CORE MVC项目