Blazor简单教程(1.1):Razor基础语法

文章目录

前言

Blazor最重要的是Razor组件和cshtml页面。两个最大的区别就是cshtml是完整的html,Razor是不完整的html

微软Razor 语法官方文档

我的Blazor基础语法个人总结

C# Blazor 学习笔记(12):css样式设置

C#小轮子:Visual Studio自动编译Sass文件

基本文件配置

  • Components:组件
  • Controller:控制器/API
  • Layout:布局
  • Models:实体对象
  • Pages:页面
  • Service:服务/数据库查询
  • Utils:通用工具

引入Layout组件

语法介绍

@page

路由路径:可以多路由

csharp 复制代码
@page "/index"
//指向/index路径
<h1 class="title">Hello, world!</h1>

@code

  • @code,声明代码空间

  • xxx.razor.cs 对应文件


    Tips:partial class即部分class,编译的时候会组合成一个完整的class

Razor 语法

显式表达和隐式表达

绑定

简单绑定

java 复制代码
<h1>@Title</h1>
<button  @onclick="TitleBtn">按钮点击</button>
<h1>@RangeValue</h1>
@code{
    public string Title { get; set; } = "我是@Code Title字符串";
    /// <summary>
    /// 按钮事件
    /// </summary>
    public void TitleBtn()
    {
        Title = "我被函数改变了!";


    }
}

注意,这里的绑定是单向绑定。不是双向绑定,双向绑定需要用到@Bind语法

双向绑定

csharp 复制代码
<button  @onclick="TitleBtn">按钮点击</button>
<input type="range" min="0" max="10" @bind="RangeValue"/>
<h1>@RangeValue</h1>
@code{

    public decimal RangeValue { get; set; } = 2;
    /// <summary>
    /// 按钮事件
    /// </summary>
    public void TitleBtn()
    {
        RangeValue++;
    }
}

带参数的函数绑定

Blazor 事件处理


解决方案

@οnclick="@(e=>你的函数))"

csharp 复制代码
<h1>@Title</h1>
<button @onclick="@(e=>TitleBtn2("函数2带参数按钮点击"))">带参数按钮点击</button>

@code{
    public string Title { get; set; } = "我是@Code Title字符串";

    public void TitleBtn2(string str)
    {
        Title = str;
    }
}

依赖注入

依赖注入有两种,我们这里统一使用cs的注入方式

csharp 复制代码
        [Inject]
        [NotNull]
        private NavigationManager navigationManager { get; set; }


Blazor的路由

使用

csharp 复制代码
        public void LoginBtn()
        {
            Console.WriteLine("登录");
            navigationManager.NavigateTo("/index");
        }
相关推荐
广煜永不挂科17 分钟前
Devexpress.Dashboard的调用二义性
c#·express
zhy8103022 小时前
.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署
pdf·.net·excel
初九之潜龙勿用2 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
慧都小妮子3 小时前
Spire.PDF for .NET【页面设置】演示:打开 PDF 时自动显示书签或缩略图
java·pdf·.net
吾与谁归in4 小时前
【C#设计模式(13)——代理模式(Proxy Pattern)】
设计模式·c#·代理模式
吾与谁归in4 小时前
【C#设计模式(14)——责任链模式( Chain-of-responsibility Pattern)】
设计模式·c#·责任链模式
神仙别闹5 小时前
基于C#和Sql Server 2008实现的(WinForm)订单生成系统
开发语言·c#
霍先生的虚拟宇宙网络5 小时前
.net 支持跨平台(桌面)系列技术汇总
.net
djk88885 小时前
.net的winfrom程序 窗体透明&打开窗体时出现在屏幕右上角
.net
向宇it14 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎