Blazor页面组件用法介绍

Blazor应用中, 是使用组件来构建用户界面, 例如页面、窗口、对话框等。

组件

使用C#和HTML标记的组合, Blazor组件称之为Razor组件, 文件名以 (.razor)结尾的文件。

1.如下所示, 在VisualStudio创建Blazor应用模板后的截图, 展示了Page文件夹中定义的razor文件。

注意:所有的Blazor组件, 都必须大写字符开头, 否则无效。如上图所示 ↑

2.关于.razor 页面

对于每个 .razor页面来说, 包含了两个部分:

1. Html标记的UI

2. C#编写的代码块

如下所示,该页面中定义了一个HTML的标题, 通过C#代码, 给标签定义了一个内容以及标题的斜体样式:

    <h1 style="font-style:@_headingFontStyle">@_headingText</h1>

@code {
    private string _headingFontStyle = "italic";
    private string _headingText = "你好,世界!";
}

实际的效果,如下所示:

通过在Html标签中, 通过使用在字段名称前添加@前缀, 即可呈现C#字段。

注意: @code{ } 括号中, 允许我们使用C#定义我们熟悉的属性、字段、方法、以及各类处理事件等。

组件参数

做过客户端开发(WPF/Winform)我们都应该清楚, 我们经常用到的一些控件元素, 例如 Button、TextBox、她们都有自己的Name、Text等公共属性,我们可以自由的定义它。

那么在razor中, 组件更加类似于我们的自定义控件(UserControl)或者模板(Template), 我们可以在其中定义公开属性, 当外部使用这个组件(.razor)文件时, 即可为其设置绑定值。例:

1.首先, 定义一个名为 SurveyPrompt.razor 组件, 代码为显示一个标题:

在@code { } 中, 定义了一个具有[Parameter]的公共属性Title , 这种参数就称之为 组件参数

    <h1>@Title</h1>

@code {
    [Parameter]
    public string Title { get; set; }
}

2.接着, 在定义Index.razor 中, 即可使用上面的组件, 并且为其设置Title 属性:

最终界面显示如下所示:

组件多参数 @attributes

组件多参数, 支持多个参数定义到一个对象字典当中, 如下所示 ,第二个Input使用 @attributes语法关联字段进行绑定操作:

<input title="@Title" value="@Value"  />

<input @attributes="ButtonAttributes" />

@code {
    [Parameter]
    public string Title { get; set; } = "Hello";

    [Parameter]
    public string Value { get; set; } = "10";

    [Parameter]
    public Dictionary<string, object> ButtonAttributes { get; set; } = new Dictionary<string, object>()
{
        { "title","Hello" } ,
        { "value","10" } ,
    };
}

组件方法

定义组件方法

与组件参数相同, 如果我们需要为组件公开一个事件, 我们同样的在 @code {} 定义方法, 如下所示, 给组件中的按钮定义了一个按钮方法,并且标识 [Parameter]特性:

    <button @onclick="OnClickCallback">
       Click
    </button>
</div>

@code {
    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

使用组件方法

引用该组件, 通过OnClickCallBack为TestComponent组件中的按钮绑定一个回调函数。

<TestComponent
                OnClickCallback="@ShowMessage">
</TestComponent>

到此这篇关于Blazor页面组件用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • [Asp.Net Core] 浅谈Blazor Server Side

    在2016年, 本人就开始了一个内部项目, 其特点就是用C#构建DOM树, 然后把DOM同步到浏览器中显示. 并且在一些小工程中使用. 3年下来, 效果很不错, 但因为是使用C#来构建控件树, 在没有特定语法的情况下, 代码风格不是那么好. 典型的风格大概是这样的: 这个模式挺好的, 有点嫌弃C#代码占比太高, HTML代码靠字符串来完成, 在界面的设计上, 比较吃力. 在2019年秋, Asp.Net 3.0出来了, Blazor Server Side 也正式公布, 可以在VS2019中使用

  • Ant Design Blazor 组件库的路由复用多标签页功能

    Ant Design Blazor 组件库的路由复用多标签页功能

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 `Tabs` 组件的 `ReuseTabs` 组件. 最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 Sign

  • Blazor Server 应用程序中进行 HTTP 请求

    Blazor Server 应用程序中进行 HTTP 请求

    目录 Blazor Server 应用程序中进行 HTTP 请求 一.第三方 Web API 概览 二.从 Blazor Sever 应用程序开始 三.在 Blazor Server 应用程序中使用 IHttpClientFactory 创建 HttpClient 四.在 Blazor Server 应用程序中创建命名 HttpClient 对象 五.在 Blazor Server 应用程序中创建类型化 HttpClient 对象 Blazor Server 应用程序中进行 HTTP 请求 翻译

  • Blazor框架简介

    Blazor框架简介

    Blaozr 是由微软2019推出得一种使用.NET 生成交互式客户端得Web UI框架. 该框架利用C#代替JavaScript进行创建UI , 并且可以共享.NET编写的服务端和客户端业务代码. 优势: 1 使用C#代替JavaScript编写代码, 意味着, 如果你使用的是.Net进行编写服务端(例:ASP.NET Core WebApi) 或者是 客户端(WPF/Winform),那么可以共享应用之前的逻辑, 无需针对Web再编写其他的业务代码. 2 始终高效支持 Windows.Lin

  • [Asp.Net Core]用Blazor Server Side实现图片验证码

    关于Blazor 由于在国内, Blazor一点都不普及, 在阅读此文前, 建议读者先翻看我之前写的随笔, 了解Blazor Server Side的特点. 在一段时间内, 我会写一些解说分析型的 "为什么选择 Blazor Server Side" , 在适当的时候再写快速入门系列.(无论是针对编程新学者还是多年经验人士) 验证码 我们很多场合都实现过图片验证码. 图片验证码的主要关键是呈现图片, 需要一个URL, 而这个URL需要传递参数以确定显示什么东西. 这个验证码如何在服务器

  • Blazor页面组件用法介绍

    Blazor页面组件用法介绍

    Blazor应用中, 是使用组件来构建用户界面, 例如页面.窗口.对话框等. 组件 使用C#和HTML标记的组合, Blazor组件称之为Razor组件, 文件名以 (.razor)结尾的文件. 1.如下所示, 在VisualStudio创建Blazor应用模板后的截图, 展示了Page文件夹中定义的razor文件. 注意:所有的Blazor组件, 都必须大写字符开头, 否则无效.如上图所示 ↑ 2.关于.razor 页面 对于每个 .razor页面来说, 包含了两个部分: 1. Html标记的

  • Blazor路由与页面导航开发介绍

    Blazor路由与页面导航开发介绍

    在 Blazor 中,应用中的每个页面都是一个组件,通常在 razor 文件中定义,具有一个或多个指定路由. 路由大多数发生在客户端,而不涉及特定的服务器请求. 浏览器首先发出对应用程序根地址的请求. 然后, Blazor 应用中的根 Router 组件会处理截获导航请求,并将它们处理到正确的组件. Blazor 中的路由由 Router 组件处理. Router 组件通常在应用程序的根组件( App.Razor )中使用. Router 下面是VisualStudio创建的默认App.Razo

  • ASP.NET Core Razor页面用法介绍

    ASP.NET Core Razor页面用法介绍

    简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Core的一个新功能,可以使基于页面的编程方式更容易,更高效. 大众的初步印象是对于那些只专注于页面的小型应用来说,Razor页面更容易.更快地取代MVC.然而,事实证明,它可能比这更强大.使用ASP.NET Core 2在创建新的应用程序时,Razor页面(空,Razor页面,Web API,MVC)是

  • Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

    Nuxt嵌套路由官网上的API详解:点击链接 看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容,要想默认的在<nuxt-child>区域显示一个页面内容怎么办? 自己案例代码: pages/parent.vue <template> <div> <h2>父组件的页面的内容</h2> <ul> <!-- 进行切换子页面,写法同vue.js --> <li><nuxt-link t

  • Bootstrap Fileinput文件上传组件用法详解

    Bootstrap Fileinput文件上传组件用法详解

    最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.boot

  • 详解关于react-redux中的connect用法介绍及原理解析

    详解关于react-redux中的connect用法介绍及原理解析

    关于react-redux的一个流程图 流程图 connect用法介绍 connect方法声明: connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用:连接React组件与 Redux store. 参数说明: mapStateToProps(state, ownProps) : stateProps 这个函数允许我们将 store 中的数据作为 props 绑定到组件上. const mapSta

  • 详解DevEco Studio项目构建讲解、编写页面、布局介绍、页面跳转

    首先要知道鸿蒙的APP是怎么构成的?   HarmonyOS的应用软件包以APP Pack(Application Package)形式发布,它是由一个或多个HAP(HarmonyOS Ability Package)以及描述每个HAP属性的pack.info组成.HAP是Ability的部署包,HarmonyOS应用代码围绕Ability组件展开. 一个HAP是由代码.资源.第三方库及应用配置文件组成的模块包,可分为entry和feature两种模块类型,如下图所示. 一.项目目录 首先来看一

  • Blazor实现组件嵌套传递值的示例详解

    实现创建一个Blazor Server空的应用程序 创建一个Tab.razor 并且添加以下代码 <div> @Title </div> @code { [CascadingParameter] public string? Title { get; set; } } 修改Index.razor组件代码 @page "/" <CascadingValue Value="Title"> <Tab/> </Casca

  • yii分页组件用法实例分析

    本文实例讲述了yii分页组件用法.分享给大家供大家参考,具体如下: 该案例使用时,分页类在yii框架中以组件的形式存在于components中. action代码如下: public function actionIndex(){ $user=User::model(); //分页的使用 $count=$user->count(); //获取总页数 $pagesize=3; //每一页显示的记录条数 $page=new Page($count,$pagesize); $sql="selec

  • Android可循环显示图像的Android Gallery组件用法实例

    Android可循环显示图像的Android Gallery组件用法实例

    本文实例分析了Android可循环显示图像的Android Gallery组件用法.分享给大家供大家参考,具体如下: Gallery组件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Gallery组件指定了10张图像,那么当Gallery组件显示到第10张时,就不会再继续显示了.这虽然在大多数时候没有什么关系,但在某些情况下,我们希望图像显示到最后一张时再重第1张开始显示,也就是循环显示.要实现这种风格的Gallery组件,就需要对Gall

随机推荐