鸡肋还是革新——Blazor进WinForm

　　winform是一老技术，感觉都有点掉牙了（我近20年前就是从winform开始接触.net的）；blazor，是微软技术圈里的新宠，正在被悉心照顾。当这一老一少的技术碰撞后，会有什么火花？

　　.net v6.0.0-preview.3，给winform和blazor结合带来了前提。https://github.com/axzxs2001/Asp.NetCoreExperiment/tree/master/Asp.NetCoreExperiment/Blazor/BlazorWinForm  是我写的一个简单的demo，在winform窗体中引入blazor。

　　先看一下长什么样：

　　是一个简单的用助记码查询药品的例子，输入框查询按钮，table的样式都是Bootstrap5.0的，外层是一个winform的Form窗体。

　　具体实现，先看项目文件csproj的不一样：Sdk要换成Microsoft.NET.Sdk.Razor，然后是要通过nuget引入这些包。

"Microsoft.NET.Sdk.Razor">
  
    WinExe
    net6.0-windows
    true
  
  
    "Dapper" Version="2.0.78" />
    "Microsoft.AspNetCore.Components.WebView.WindowsForms" Version="6.0.0-preview.3.21201.13" />
    "Microsoft.Extensions.DependencyInjection" Version="6.0.0-preview.3.21201.4" />
    "Microsoft.NET.Sdk.Razor" Version="5.0.0-preview.8.20414.8" />
    "System.Data.SqlClient" Version="4.8.2" />
  
  
    "wwwroot\app.css">
      Always
    
    "wwwroot\Query.razor">
      Always
    
    "wwwroot\css\bootstrap.min.css">
      Always
    
    "wwwroot\index.html">
      Always
    
    "wwwroot\js\bootstrap.min.js">
      Always
    
  
  
    "wwwroot\app.css">
      PreserveNewest
    
    "wwwroot\Query.razor">
      Always
    
    "wwwroot\index.html">
      Always
    
  

　　通过csproj也知道，我是添加了wwwroot文件夹，并添加了一些前端文件：

　　index.html是一个模板页，引入一些css和js

    "utf-8" />
    "viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
    <base href="/" />
    "{PROJECT NAME}.styles.css" rel="stylesheet" />
    "app.css" rel="stylesheet" />
    "css/bootstrap.min.css" rel="stylesheet" />



    
"app"  class="container">
    
"blazor-error-ui">
        An unhandled error has occurred.
        "" class="reload">Reload
        class="dismiss">??
    

    
    

　　css和js就不说了，是前端的文件，重点看query.razor，这里实现了主要业务逻辑，业务数据+UI表现

@using Microsoft.AspNetCore.Components.Web
@using Dapper
@using System.Data.SqlClient;
class="row">
  
class="col-1">
  
class="col-10">
    
class="input-group mb-3">
      "text" class="form-control" id="zjm" placeholder="请输入助记码" @bind="ZJM" aria-describedby="button-addon2">
      class="btn btn-outline-secondary" type="button" @onclick="GetGoods" id="button-addon2">查询
    
  
  
class="col-1">

@code {
  private string ZJM { get; set; }
  List list = new List();
  void GetGoods()
  {
    using (var con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["sqlcon"].ConnectionString))
    {
      if (string.IsNullOrWhiteSpace(ZJM))
      {
        list = con.Query("select top 30 spid,spmch,shpchd,shpgg from spkfk  ").ToList();
      }
      else
      {
        list = con.Query("select top 30 spid,spmch,shpchd,shpgg from spkfk where zjm like @zjm ",new  {zjm="%"+ZJM+"%" }).ToList();
      }
    }
  }
}
class="row">
  class="table table-striped table-hover">
    class="table-dark">
        
      @foreach (var item in list)
      {
       
      }
  

      
"col">编号
        
"col">名称
        
"col">产地
        
"col">规格
      
    
    

          
@item.spid
          
@item.spmch
          
@item.shpchd
          
@item.shpgg
        
 

　　怎么引入到form窗体中呢？这里有点像之前的winform中引入一个webview，这里换成了BlazorWebView。

using BlazorWinForm.wwwroot;
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
using System.Windows.Forms;

namespace BlazorWinForm
{
    public partial class frmMain : Form
    {
        public frmMain()
        {
            InitializeComponent();
            var serviceCollection = new ServiceCollection();
            serviceCollection.AddBlazorWebView();
            var blazor = new BlazorWebView()
            {
                Dock = DockStyle.Fill,
                HostPage = "wwwroot/index.html",
                Services = serviceCollection.BuildServiceProvider(), 
            };
            blazor.AutoScroll = false;
            blazor.RootComponents.Add("#app");
            Controls.Add(blazor);
        }
    }
    class Goods
    {
        public string spid { get; set; }
        public string spmch { get; set; }
        public string shpchd { get; set; }
        public string shpgg { get; set; }
    }
}

　　总体下来，这种把winform+c#+html,css,js混合起来编程，即把丰富的前端框架引入进来，让winform表现更加灵活，强大，也不丢失cs架构对当前电脑的控制力(有很多行业是通过exe来对接专有设备的驱动的)。winform的UI之前是通过三方UI控件比如DevExpress来增强的，虽然有WPF，但还是在微软自己画的一个圈圈里转，blazor则是带来了丰富的前端库。另外，与之前winform嵌入webview不一样的是，blazor中的c#，可以方便的和winform来互动，语言相通，直接交流，比如你可以很轻松的在blazor的页里里new一个form出来。

　　Blazor进winform，是鸡肋还是革新？应该是仁者见仁，智者见智了。