-
什么是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>  年龄：@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");
}
}
效果图：
文章来源：https://www.toymoban.com/news/detail-735465.html
注意：这里用到了@inject IJSRuntime来调用Js文章来源地址https://www.toymoban.com/news/detail-735465.html
7.Balzor发送网络请求，周天更新
到了这里，关于只知道Vue嘛？来看看微软的Blazor的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
