目錄
建立示範項目
添加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。
單擊“下一步”并設定項目名稱和解決方案名稱，然後單擊“下一步”，然後選擇“.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