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

这篇具有很好参考价值的文章主要介绍了Blazor简单教程(1.1):Razor基础语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

微软Razor 语法官方文档

我的Blazor基础语法个人总结

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

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

基本文件配置

Blazor简单教程(1.1):Razor基础语法,c#,.net

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

引入Layout组件

语法介绍

Blazor简单教程(1.1):Razor基础语法,c#,.net

Blazor简单教程(1.1):Razor基础语法,c#,.net

@page

路由路径:可以多路由

@page "/index"
//指向/index路径
<h1 class="title">Hello, world!</h1>

@code

  • @code,声明代码空间
    Blazor简单教程(1.1):Razor基础语法,c#,.net

  • xxx.razor.cs 对应文件
    Blazor简单教程(1.1):Razor基础语法,c#,.net
    Blazor简单教程(1.1):Razor基础语法,c#,.net
    Tips:partial class即部分class,编译的时候会组合成一个完整的class

Razor 语法

显式表达和隐式表达

Blazor简单教程(1.1):Razor基础语法,c#,.net

绑定

简单绑定

<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语法

双向绑定


<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 事件处理

Blazor简单教程(1.1):Razor基础语法,c#,.net

Blazor简单教程(1.1):Razor基础语法,c#,.net
Blazor简单教程(1.1):Razor基础语法,c#,.net

解决方案

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


<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的注入方式

        [Inject]
        [NotNull]
        private NavigationManager navigationManager { get; set; }

Blazor简单教程(1.1):Razor基础语法,c#,.net
Blazor的路由

使用文章来源地址https://www.toymoban.com/news/detail-647946.html

        public void LoginBtn()
        {
            Console.WriteLine("登录");
            navigationManager.NavigateTo("/index");
        }

到了这里,关于Blazor简单教程(1.1):Razor基础语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 脱离于ASP.NET 和Visual Studio编辑Razor脚本

    Razor Pad是一个编辑Razor脚本的工具,脱离于ASP.NET 和Visual Studio。 github地址:GitHub - RazorPad/RazorPad: RazorPad is a quick and simple stand-alone editing environment that allows anyone (even non-developers) to author Razor templates. It is the Notepad for Razor. 如果在编译源码时出现:签名时出错: 未能对 binDebugapp

    2024年01月21日
    浏览(20)
  • solidity基础语法与简单案例20221130

    1、Todolist(日程表)练习 包括增删改查和使用地址获取结构体 2、事件event         是用于记录当前智能合约运行状态的方法,体现在区块链浏览器上以及交易记录的log,通过事件可以查询改变过的状态。         包括构建事件和触发事件。         事件是写入方法,不

    2024年02月05日
    浏览(13)
  • .NET8 Blazor新特性 流式渲染

    什么是SSR Blazor中的流式渲染结合了SSR(服务端渲染),服务端将HTML拼好返回给前端,有点像我们熟知的Razor Pages 或 MVC 。 当已经有了 Razor Pages 或 MVC 时,为什么还要选择使用 Blazor 来实现这一点?这里有几个原因。 首先,Razor Pages 和 MVC 没有像Blazor这样提供了很好的可重用组

    2024年02月05日
    浏览(19)
  • DevExpress DXperience Crack Blazor, ASP.NET, ASP.NET MVC

    DevExpress DXperience helps you build applications for Windows, Web, mobile and tablet with all of the DevExpress single platform controls and more. The DevExpress DXperience Subscription includes hundreds of Desktop UI Controls (WinForms, WPF and Desktop Reporting), Web UI Controls (Blazor, ASP.NET, ASP.NET MVC and Core, Bootstrap Web Forms, JavaScript - jQ

    2024年04月11日
    浏览(13)
  • Blazor 简单组件(0):简单介绍

    Blazor 这个技术还是比较新,相关的UI组件还在完善,我这里提供一下我个人的组件开发。 本UI组件是基于BootstrapBlazor(以下简称BB)开发。 BootstrapBlazor 文档 C#小轮子:Visual Studio自动编译Sass文件 C# Blazor 学习笔记(12):css样式设置

    2024年02月13日
    浏览(22)
  • 全面的ASP.NET Core Blazor简介和快速入门

      因为咱们的MongoDB入门到实战教程Web端准备使用Blazor来作为前端展示UI,本篇文章主要是介绍Blazor是一个怎样的Web UI框架,其优势和特点在哪?并带你快速入门上手ASP.NET Core Blazor(当然这个前提是你要有一定的C#编程基础的情况,假如你完全没有接触过C#的话建议你先从基本语

    2024年02月19日
    浏览(15)
  • 跟进 .NET 8 Blazor 之 ReuseTabs 支持 Query 属性绑定

    ASP.NET 团队和社区在 .NET 8 继续全力投入 Blazor,为它带来了非常多的新特性,特别是在服务端渲染(SSR)方面,一定程度解决之前 WASM 加载慢,Server 性能不理想等局限性,也跟原来的 MVC,Razor Pages 框架在底层完成了统一。 AntDesign Blazor 作为 Blazor 最受欢迎的开源组件库之一,

    2024年02月15日
    浏览(17)
  • .NET8 Blazor的Auto渲染模式的初体验

    .NET8发布后,Blazor支持四种渲染方式 静态渲染,这种页面只可显示,不提供交互,可用于网页内容展示 使用Blazor Server托管的通过Server交互方式 使用WebAssembly托管的在浏览器端交互方式 使用Auto自动交互方式,最初使用 Blazor Server,并在随后访问时使用 WebAssembly 自动进行交互式

    2024年02月05日
    浏览(25)
  • [MAUI]深入了解.NET MAUI Blazor与Vue的混合开发

    .NET MAUI结合Vue的混合开发可以使用更加熟悉的Vue的语法代替Blazor语法,你现有项目不必重写。之前写过一篇 [MAUI] 在.NET MAUI中结合Vue实现混合开发 ,其中介绍了如何创建一个vue应用并将其打包至MAUI项目,这种方式依赖vue-cli创建和打包静态站点,好处是可以使用Node.js 的构建但

    2024年02月08日
    浏览(21)
  • .NET 8新预览版本使用 Blazor 组件进行服务器端呈现

    此预览版添加了对使用 Blazor 组件进行服务器端呈现的初始支持。这是 Blazor 统一工作的开始,旨在使 Blazor 组件能够满足客户端和服务器端的所有 Web UI 需求。这是该功能的早期预览版,因此仍然受到一定限制,但我们的目标是无论选择如何构建应用,都能使用可重用的 Bla

    2023年04月12日
    浏览(16)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包