• 什么是Blazor？

讯享网

Blazor 是一个开放源代码和跨平台的Web UI框架，使用 C#代替 JavaScript 来创建丰富的交互式 UI。Blazor支持2种运行模式：Blazor Server模式：应用在ASP.NET Core应用服务器上运行，并且通过SignalR（双向通讯）进行用户交互处理；Blazor WebAssembly 模式：Razor和HTML最终会编译成WebAssembly 运行在支WebAssembly 的浏览器上。

从使用上来看：对.Net开发来说是非常友好的，但是我发现它运行起来是相当的慢，因为要进行编译

代码块：

 @{ bool isState = true; if (isState) { <p>显示</p> }else { <p>隐藏</p> } } <p style="color:orangered;">@codeName</p> @code{ string codeName = "code代码"; }

展示图：

@{} 可以和html中混用，@code {}不能 

 1.数据双向绑定

实例图：

 实现代码：

讯享网<div> <h1 style="color:chocolate">数据双向绑定</h1> <EditForm Model="@user" OnSubmit="send"> <div> <label>姓名：</label> <InputText @bind-Value="@user.name"/> </div> <div style="margin-top:12px;"> <label>年龄：</label> <InputText @bind-Value="@user.age" /> </div> <button type="submit" style="margin-top:12px;">提交</button> </EditForm> <div style="display:flex;margin-top:12px;"> <strong><p>姓名：@user.name</p></strong> <strong><p>&emsp;&emsp;年龄：@user.age</p></strong> </div> </div> @code{ public User user { get; set; } = new User(); public class User { public string name { get; set; } public string age { get; set; } } public void send() { System.Console.WriteLine($"姓名：{user.name}\t"+$"年龄：{user.age}"); } }

提示：这里的双向绑定用到的是@bind，这里的EditForm就是Blaozr自带的表单验证，用普通的Input也可以实现双向绑定！

2.For和if的运用

示例图：

 实现代码：

<div> <h1 style="color:chocolate">循环的运用</h1> <strong><p style="font-size:12px;">第一种方式</p></strong> @for(int i = 0;i<=numbers.Length-1;i++) { <p>"值是"@numbers[i]</p> } <strong><p style="font-size:12px;">第二种方式</p></strong> @foreach (var item in numbers) { <p>"值是"@item</p> } <h1 style="color:chocolate">IF的运用</h1> <button @onclick="changeState" style="margin-top:12px 0px;">点击改变状态</button> @*这里绑定了一个点击事件*@ @if (isShowState) { <p>现在的状态是：@isShowState</p> @*如果是true会出现，不是就不会出来这句话*@ } </div> @code{ public int[] numbers = {1,2,3,4}; public bool isShowState { get; set; } = true; public void changeState() { if(!isShowState) { isShowState = true; }else { isShowState = false; } } }

3.组件

注意：blazor的组件有一个注意点首写字母要大写，不要出现符号 

引用组件代码

 组件C#代码分离

   1.在类上面继承ComponentBase

讯享网 public class IndexCode : ComponentBase { public string sentence = "分离组件与代码"; }

  2.在组件页面用@inherits注入就可以用来

@inherits IndexCode <p>@sentence</p> 

 4.路由

app.razor文件可以看到路由视图的定义，这个称之为路由模板，当找到相匹配的视图时，会在<Found></Found>节点里面渲染出来，如果没有的话会在<NotFound></NotFound>节点里面渲染，当然你也可以自定义一个404的页面。

 怎么写路由呐？简单的一批

 我们在我们刚刚的写的组件上面改进，加上@page "/路由路径"

路由怎么用呐？

讯享网@inject NavigationManager navigationto <div> <a href="/MyComponent">A标签跳转</a> </div> <div> <button @onclick="navigationClick" style="margin-top:12px;">点击跳转</button> @*如果是点击跳转记到注入NavigationManager*@ </div> @code{ public void navigationClick() { navigationto.NavigateTo("/MyComponent"); } } 

带参数路由： 

@page "/{sentencs}" <p>RouteParma:@sentencs</p> @code { [Parameter] public string sentencs { get; set; } } 

 效果图：

 5.布局(我这里布局一个登录页)

第一步在shared目录下面建一个母版

代码：

讯享网@inherits LayoutComponentBase @* 这里表示声明一个母版 *@ @Body @* body是占位 *@ 

@page "/" @layout LoginLayout @* 这里表示使用 *@ <style> * { height :100vh; width : 100vw; } .wrapper { height: 100vh; background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB); overflow: hidden; } </style> <div class="wrapper"> <div style="margin: 200px auto; background-color: #fff; width: 350px; height: 300px; padding: 20px; border-radius: 10px"> </div> </div>

效果图： 

6.C#调Js 

第一步在wooroot目录下面建一个js文件

Js代码

讯享网window.sayHello = (name) => { return "Hello," + name; } 

 第二步在刚刚那个目录的index.html引用

 测试代码：

@page "/JsInvok" @inject IJSRuntime js <button class="btn btn-success" @onclick="JsInvokClick">测试调Js</button> <strong><p style="margin-top:12px;color:coral">@Result</p></strong> @code { public string Result { get; set; } public async void JsInvokClick() { Result = await js.InvokeAsync<string>("sayHello","Blazor"); } } 

效果图： 

注意：这里用到了@inject IJSRuntime来调用Js

 7.Balzor发送网络请求，周天更新