人民币金额大写(人民币金额大写转换器)硬核推荐

中。

MainLayout.razor 是整个应用的布局页面，如果你有多个页面和视图，那么通常这里会放 Header，Footer 等内容Index.razor 为应用的默认主页我这个应用只有一个页面，所以一切逻辑都在这里实现就可以了。

可重用的代码人民币大写的转换类与框架和平台无关，因此完全可以直接复制到Blazor工程里用，即 RMBConverter.csUWP 应用的视图通常采用 MVVM 模式开发，这些逻辑可以很方便的迁移到 Blazor。

Index.razor就像写 MVC 的 cshtml 一样，使用熟悉的 Razor 语法，就能绑定数据和事件对于 input，简单的双向数据绑定可以直接用 @bind="属性" 实现但我这个应用里要求用户一边输入金额一边进行实时计算，所以只能写成事件绑定。

对于有参数的事件处理函数，要注意它和正常 C# 写事件一样，是个 Lambda 表达式，如果放在循环里的话要注意变量的值是在循环里被修改。

下面的代码必须使用 var num = i 来存储 i 的值，如果直接使用 KeyPadClicked(i)，那么 i 一定永远等于1

和 XAML 的 MVVM 以及 Angular 稍有不同的是，处理逻辑不是在 code behind 文件里写的，而是在 razor 页面本身写。

如果能写成 Index.razor.cs 就干净了@code {    private string _inputAmount;    public string InputAmount    {        get => _inputAmount;

        set        {            _inputAmount = value;            // 验证和处理逻辑...            Result = string.IsNullOrWhiteSpace(_inputAmount) ?

                    string.Empty :                    RMBConverter.GetCapitalizedRmb(InputAmount);        }

    }    public string Result { get; set; }    private async Task CopyResult()    {        // ...    }

    private async Task ReadAloud()    {        // ...    }    private void Clear()    {        InputAmount = string.Empty;

    }    private void KeyPadClicked(string value)    {        InputAmount += value switch        {            "0" when InputAmount != "0" => 0,

            "." when !InputAmount.Contains(".") => ".",            _ => value        };    }}需要重新实现的功能

复制文字在 UWP 中，复制可以调用 Windows 的 Clipboard API 来完成但是在浏览器端，没有 Windows 的 API，Blazor 也没有封装剪切板 API，因此我们只能借用 JS 来完成。

index.htmlwindow.clipboardCopy = {    copyText: function (text) {        navigator.clipboard.writeText(text).then(function () {

            console.log(text);        })            .catch(function (error) {                alert(error);

            });    }};Index.razor使用依赖注入，引入 IJSRuntime 的实例这是 Blazor 用于和 JavaScript 交互的接口@inject IJSRuntime JavaScriptRuntime。

然后就可以调用 JS 进行复制private async Task CopyResult(){    if (!string.IsNullOrWhiteSpace(Result))    {        await JavaScriptRuntime.InvokeVoidAsync("clipboardCopy.copyText", Result);

    }}朗读类似的，在 UWP 里，朗读使用的是 Windows 的 SpeechSynthesizer API浏览器端也有个类似的 SpeechSynthesisUtteranceindex.html。

window.readAloud = {    readText: function (text) {        let utterance = new SpeechSynthesisUtterance(text);

        utterance.lang = zh-CN;        speechSynthesis.speak(utterance);    }}Index.razorprivate async Task ReadAloud()

{    if (!string.IsNullOrWhiteSpace(Result))    {        await JavaScriptRuntime.InvokeVoidAsync("readAloud.readText", Result);

    }}本地应用目前 Blazor WASM 还没有本地应用的官方支持，必须打开浏览器才能使用，现有的版本只能使用PWA完成一部分本地应用化操作但在今年即将发布的 .NET 6 版本中，Blazor 会迎来官方最纯正的本地应用支持。

只要不出自 SilverLight、Zune、WP、WinRT、UWP 团队之手，就不会被坑！现存的问题Blazor WASM 虽然看着香，但目前有一些痛点还有待解决首先，框架本身的体积依然较大，由于众所周知而不可描述的原因，如果服务器部署在海外，那么我国网络加载 Blazor 应用会比较慢。

另外，不是所有版本的浏览器都可以跑 WASM，尤其是手机端Blazor 的兼容性相比 Angular，Vue，React 等，还有些差距总结使用 Blazor WASM 开发 Web 应用能够让 .NET 程序员充分利用既有的知识和技能快速上手，结合 Web 的强大生态 与 .NET 的高效生产力，成就不凡。

而 UWP 只能哭晕在厕所也没人听见……

汪宇杰博客Azure | .NET | 微软 MVP无广告，不卖课，做纯粹的技术公众号