学习Asp.Net Core Blazor-秋风技术

学习Asp.Net Core Blazor

起因

Blazor出来也有一段时间了,最近没有去上班了,顺便学习一下Blazor. Blazor分为服务端Server和客户端Client(这里先说WebAssembly).Blazor整体更像是WebForm的替代.

Blazor Server 更像是WebForm的升级版,简化页面生命周期,去除了ViewState(在页面很多大的时候,ViewState很大),使用WebSocket进行通信,偏向于原生Html.

优点: 加载很快,用WebSocket进行获取数据和通信.默认宿主为Kestrel
缺点: 都是在服务端进行渲染(razor渲染为html)

Blazor Client 使用WebAssembly(标准技术,不是微软家的),将Mono运行时和项目生成WebAssembly(.wasm文件),第一次加载比较慢(第一次要从服务器下wasm文件 .net core 3.1可能慢一些,在.Net 5中wasm所需的资源大小只有6兆多点.在内网中是无伤大雅的),默认的通信方式是通过Http进行获取.

优点: 一些计算可以在浏览器中,进行计算和更新
缺点: 第一次加载比较慢.

*如果使用Blazor,一定要使用.Net 5,在.Net 5对Blazor进行不少优化,性能提高了不少,如果.Net 6出来了,则优先使用.Net 6.从github看.Net 和 asp.net core最近提交的源码还在对Blazor进行大量的改进.

Server和Client 通信对比

Server:

Client:

Client第一次加载会慢一些是因为要加载wasm(mono运行时,目前还不是CoreCLR).

Blazor 常用指令

Blazor 事件

在Blazor中,单向绑定事件是通过@onXXXX绑定C#代码的方法,通过onXXXX绑定JavaScript代码.还有@bind进行双向绑定.

在Blazor C#和JavaScript代码相互调用

通过C#代码调用JavaScript函数:

@page "/csharpCallJs"
@*通过inject注入IJSRuntime 异步调用js函数(Blazor Serve只支持异步调用)*@
@inject IJSRuntime jsRuntime
@*通过inject 注入IJSInProcessRuntime 同步调用js函数*@


<h3>CSharpCallJavaScript</h3>
<button class="btn btn-primary" @onclick="CallJS">C#调用JavaScript方法</button>
<br />
<label>@Content</label>
<br />
<button class="btn btn-primary" onclick="JSCallCsharp()">JavaScript调用c#方法</button>
<br />
@code {

    private string Content { get; set; }

    private async Task CallJS()
    {
        //通过InvokeAsync异步调用  第一个参数为js函数名称, 第二个js 参数
        //InvokeVoidAsync()
        Content = await jsRuntime.InvokeAsync<string>("sayHello", "callo javascript");

        //同步调用js函数
        //(IJSInProcessRuntime)jsRuntime.Invoke<string>("sayHello", "callo javascript");
    }

    [JSInvokable]
    public static Task<string> CallCsharp1(string txt)
    {
        return Task.FromResult(txt + "csharp call:");
    }
}

将JavaScript代码写入js文件

//将SayHello函数绑定window
window.sayHello = (content) => {
    return 'hello ' + content;
};

window.JSCallCsharp = () => {
    //异步调用c# 参数1 指定程序集名称   参数2指定 函数名称  参数3指定  函数参数
    DotNet.invokeMethodAsync('BlazorClientApp1', 'CallCsharp','javascript start:')
            .then(data => {
                console.log(data);
            });
    
};

在index.html中,引入js脚本,是因为在Blazor组件不允许引入js脚本.需要用js的单独封装js文件,在index.html引入.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorClientApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <!--在index.html中引入js脚本-->
    <script src="/script/hello.js"></script>
</body>

</html>

在Blazor通过c#代码调用JavaScript代码

在Blazor通过JavaScript代码调用C#代码

秋风 2020-11-25

文章分类

algorithm windows linux c cpp csharp javascript java dependon mono javascript browser asp.net core go asp.net database python asm rust english TypeScript EntityFramework Core

学习Asp.Net Core Blazor

文章分类

友情链接