当前位置： 移动技术网 > IT编程>开发语言>.net > [AspNetCore 3.0] 在RazorPages/MVC 中使用 Blazor (Razor组件)

[AspNetCore 3.0] 在RazorPages/MVC 中使用 Blazor (Razor组件)

2019年09月29日  | 移动技术网IT编程  | 我要评论

广州华隆酒店,2015解放军裁军方案,劈腿什么意思

开发环境

vs2019 16.3.1 dotnetcore 3.0

一、开始

  1. 新建webapp项目
    dotnet new webapp -o projectname
    或vs 中新建项目选择 web应用程序。
    在startup.cs 中增加两处配置。
    configureservices 方法：
 public void configureservices(iservicecollection services)
        {
            services.addrazorpages();
            services.addserversideblazor();//启用服务端blazor支持
        }

configure 方法

 app.useendpoints(endpoints =>
            {
                endpoints.maprazorpages();
                endpoints.mapblazorhub();// js,singalr 
            });

  1. 使用vs打开项目，默认页面和目录暂时不动， 新增文件夹 razorcomponents

  2. 在项目根目录下，右键菜单添加-新建项-razor组件，命名_imports.razor，用于导入razor组件所需命名空间（作用类似mvc中的_viewimports.cshtml）。
    此文件对同级或子级文件夹中的*.razor生效， 将内容替换为
    @using microsoft.aspnetcore.components @using microsoft.aspnetcore.components.web;

  3. 在razorcomponents 文件夹上 右键菜单添加-新建项-razor组件，命名counterbutton.razor。

二、 组件 counterbutton.razor

说明：

  1. 呈现为html button 元素 ,显示当前计数。
  2. 用户单击按钮时回传给服务端，将计数+1，随后更新客户端文本。

  3. counterbutton.razor
    .razor文件本质为一个继承componentbase，名为counterbutton的c#类(全名为项目名称.文件夹.counterbutton)。
    打开counterbutton.razor 文件可以看到，@code指令(预览6之前的@functions)将文件分为两部分，上部为html标签，下部即为counterbutton类的实现部分。
    counterbutton.razor

    <h3>component</h3>
@code {//可脑补为 public class counterbutton:componentbase{
//c#代码，属性、方法。。
}
  4. 处理c#代码：
    增加属性 count，增加方法 click
    [parameter]// 用于传递参数 public int count { get; set; } void click() { count++; }

  5. 处理html标记, counterbutton.razor 内容如下
    <button @onclick="click" > count:@count </button> @code { [parameter] public int count { get; set; } void click() { count++; } }
    此时组件代码已完成，接下来转到pages目录下，处理.cshtml

三、在.cshtml中使用

  1. 打开pages/index.cshtml，在你想要显示组件的地方插入代码
    @(await html.rendercomponentasync<razorcomponents.counterbutton>(rendermode.server))

    • rendermode 说明
    • 如果在pages/_viewimports.cshtml 加入using projectname.razorcomponents 调用如下
      @(await html.rendercomponentasync<counterbutton>(rendermode.server))
  2. 打开pages/shared/_layout.cshtml, 加入
    <script src="_framework/blazor.server.js"></script>
    • 保证此脚本在组件render 位置之后加入
  3. 启动项目，打开浏览器，点击 button 查看效果。
    • 打开浏览器调试窗口-networks选项卡，其中 以_blazor开头的即为组件使用的signalr连接

四、使用组件参数

在之前的组件代码中有这样一行
  [parameter]// 用于传递参数
  public int count { get; set; }

可以用来设置初始化参数,如果在另一个.razor 文件中，我们可以这样设置 count的初始值
<counterbutton count="2" />
但是，使用html.rendercomponentasync 时， rendermode 为server或serverprerendered 不支持参数。rendermode.static 仅输出静态html（无法与服务端交互）。

在目前阶段，我们可以使用一个无参数的razor组件过渡一下。

  1. 在项目中新增razor组件 ‘razorpanel.razor’,为了演示，将此组件加到项目根目录下。
  2. 代码如下
    //根据业务，将需要组合的razor组件放在一个组件内，可以方便的处理参数及组件间的关系 <counterbutton count="3"/>// 在_imports.razor 中加入@using projectname.razorcomponents 或使用全名<projectname.razorcomponents.counterbutton count="3"/>
  3. 修改组件调用
    @(await html.rendercomponentasync<razorpanel>(rendermode.server))

五 直接继承componentbase 实现组件

前面说过，组件是继承 componentbase的，因此可以用一个c#代码文件实现组件,以下以icon为例。

  • 此icon组件使用svg use方式，对应的js 定义来自[iconfont.cn]
  1. 新建组件 'icon.razor'.
  2. 新建c#类 'icon.razor.cs'.
    public class iconbase: microsoft.aspnetcore.components.componentbase { [parameter] public string iconname { get; set; } = "icon-user"; [parameter] public string iconclass { get; set; } = "icon"; }
    • 文件名可以随意，使用*.razor.cs 格式 vs会帮你将.cs和对应的.razor组织在一起。
  3. 打开 icon.razor，清除自动生成的内容，在第一行加入 @inherits iconbase
    完整代码
    @inherits iconbase <svg class="@iconclass" aria-hidden="true"> <use href="#@iconname"></use> </svg> <style scoped> .icon { height: 1em; /* 通过设置 font-size 来改变图标大小 */ width: 1em; /* 图标和文字相邻时，垂直对齐 */ vertical-align: -0.15em; /* 通过设置 color 来改变 svg 的颜色/fill */ fill: currentcolor; /* path 和 stroke 溢出 viewbox 部分在 ie 下会显示 normalize.css 中也包含这行 */ overflow: hidden; } </style>
  • 目前.razor 自动生成的类 为 class icon 而不是 partial class icon ,因此.cs 文件里的类名不能是icon。也只能通过 @inherits 关联 .razor 里的html和c#代码。
  • .razor 看起来和vue组件有点类似
  • @if @foreach 等指令见文档
  • use标签中使用 href
  1. 在pages/shared/_layout.cshtml 引入从[iconfont.cn]下载的js（通常为 iconfont.js）;
  2. 在 razorpanel.razor 中加入icon ：`

六 组件嵌套

razor组件上可以使用childcontent 属性嵌套其他组件，比如需要在counterbutton中加入一个icon.

  1. 在counterbutton.razor 中增加一个属性
    [parameter] public renderfragment childcontent { get; set; }

  2. 修改html 部分
    <button @onclick="click"> @childcontent count:@count </button>

  3. 打开razorpanel.razor，修改 counterbutton 标记
    <counterbutton count="3"> <childcontent> <icon iconname="icon-user" /> </childcontent> </counterbutton>
    或 省略 <childcontent>
    <counterbutton count="3" > <icon iconname="icon-user" /> </counterbutton>

七 组件引用

在想引用的子组件上定义 @ref ="组件引用名"，在当前组件上定义同名字段捕获引用。
比如 在 razorpanel.razor 中，给counterbutton 增加属性
<counterbutton count="3" @ref="button" > <icon iconname="icon-user" /> @button.count </counterbutton>
@code
counterbutton button;//自动捕获 @ref="button" 的counterbutton 实例

其他

renderfragment 委托，componentbase.buildrendertree 方法

  • 在cshtml 上渲染.razor 组件时，使用类似 razorpanel 之类的容器来处理参数传递。
  • microsoft.aspnetcore.components.* 包括一些内置组件（forms,input*,layout...)
  • 官方模板 dotnet new -i microsoft.aspnetcore.blazor.templates

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网