下面我们将讲解在WPF中使用Blazor，并且使用Blazor做一些文件编辑操作，下面是需要用到的东西

• WPF
• Blazor
• Masa Blazor
• Monaco

使用CMD指令安装模板

dotnet new install MASA.Template

1. 找到如图的模板，然后点击下一步

2. 下一步，新建项目名称FileEditor

3. 打开wwwroot/index.html，并且引用Monaco的依赖，将一下依赖添加到body里面的最尾部。

4. 新建Pages/Index.razor.cs文件

   using System.IO;
   using System.Text;
   using Masa.Blazor;
   using Masa.Blazor.Presets;
   using Microsoft.AspNetCore.Components;
   using Microsoft.JSInterop;

   namespace FileEditor.Pages;

   public partial class Index : IDisposable
   {
   ///

   /// 文本内容 ///
   
   private string value;

   private MMonacoEditor _editor;
   
   private DotNetObjectReference<Index>? _objRef;
   
   /// <summary>
   /// 定义Monaco的初始配置
   /// </summary>
   private object options = new
   {
       language = "md", // 设置语法
       automaticLayout = true, // 高度自适应
       theme = "vs-dark", // 主题
   };
   
   private string fullName;
   
   protected override void OnInitialized()
   {
       _objRef = DotNetObjectReference.Create(this);
   }
   
   /// <summary>
   /// 具体文件路径
   /// </summary>
   [Parameter]
   [CascadingParameter(Name = nameof(FullName))]
   public string FullName
   {
       get => fullName;
       set
       {
           fullName = value;
           UpdateValue();
       }
   }
   
   /// <summary>
   /// Monaco初始化事件
   /// </summary>
   private async Task InitMonaco()
   {
       // 监听CTRL+S 2097 = CTRL+S 快捷键
       // 调用Monaco的Command，传递当前对象，并且指定当触发快捷键的时候调用当签对象的指定方法。
       await _editor.AddCommandAsync(2097, _objRef, nameof(SaveValue));
   }
   
   /// <summary>
   /// 更新value
   /// </summary>
   private void UpdateValue()
   {
       if (string.IsNullOrEmpty(fullName))
       {
           return;
       }
   var info = new FileInfo(fullName);
   if (!info.Exists) return;
   using var fileStream = info.OpenText();
   value = fileStream.ReadToEnd();
   }
   
   /// <summary>
   /// 更新文件内容
   /// </summary>
   [JSInvokable]
   public async Task SaveValue()
   {
       try
       {
           await using var fileStream = File.OpenWrite(fullName);
           fileStream.Position = 0;
           await fileStream.WriteAsync(Encoding.UTF8.GetBytes(value));
           fileStream.Close();
       }
       catch (Exception e)
       {
           await PopupService.EnqueueSnackbarAsync(new SnackbarOptions()
           {
               Title = "保存文件错误",
               Content = e.Message
           });
       }
   }
   
   public void Dispose()
   {
       _editor.Dispose();
       _objRef?.Dispose();
   }

   }

在Index.razor.cs文件中我们实现了拦截FullName的set，当被set的时候说明上级组件选择了文件并且通过CascadingParameter传递了参数到当前组件。

并且对于当前的Value进行更新，

打开Index.razor

@page "/"
@inject IPopupService PopupService

<MMonacoEditor InitCompleteHandle="async () => await InitMonaco()"
               @bind-Value="value"
               Height="@("100%")"
               EditorOptions="options" @ref="_editor">
</MMonacoEditor>

我们对于cs的一些方法和参数进行了绑定，并且bind-value了value的值，我们在cs文件中更新了value就自动更新了UI的显示的值。

然后我们打开Shared/MainLayout.razor文件添加打开文件选择器，从而选择文件。

@using Microsoft.Win32
@inherits LayoutComponentBase

<MApp>
    <MAppBar App>
        <MAppBarNavIcon @onclick="() => _drawer = !_drawer"></MAppBarNavIcon>
        <MToolbarTitle>FileEditor</MToolbarTitle>
        <MButton OnClick="OpenFile">打开文件</MButton>
        <MSpacer></MSpacer>
        <MButton Text Color="primary" Target="_blank" Href="https://docs.masastack.com/blazor/introduction/why-masa-blazor">About</MButton>
    </MAppBar>

    <MNavigationDrawer App @bind-Value="_drawer">
        <MList Nav Routable>
            <MListItem Href="/" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-home</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Home</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Href="/counter" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-plus</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Counter</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Href="/fetchdata" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-list-box</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Fetch data</MListItemTitle>
                </MListItemContent>
            </MListItem>
        </MList>
    </MNavigationDrawer>

    <MMain>
        <MContainer Fluid Style="height: 100%">
            <CascadingValue Value="fullName" Name="FullName">
                <MErrorHandler>
                    @Body
                </MErrorHandler>
            </CascadingValue>
        </MContainer>
    </MMain>
</MApp>

@code {

    private bool? _drawer;

    private string fullName;

    private void OpenFile()
    {
        var openFileDialog = new OpenFileDialog();
        openFileDialog.Title = "请选择您的文件";
        openFileDialog.Filter = "文本文件 (*.txt, *.md)|*.txt;*.md";
        bool? result = openFileDialog.ShowDialog();
        if (result == true)
        {
            fullName = openFileDialog.FileName;
        }
    }
}

在这里我们将使用Microsoft.Win32.OpenFileDialog打开文件选择器，并且指定选择文件的类型，

当前文件选择器返回true，则fullName的值，fullName则会通过CascadingValue组件的绑定传递到<CascadingValue></CascadingValue>内的所有子组件。

下面我们看看实际使用效果。

qq群：452761192

wx：wk28u9123456789(请备注技术交流)

源码下载地址：https://code-token.oss-cn-beijing.aliyuncs.com/FileEditor.zip