Blazor 组件怎么创建-C#.Net教程-PHP中文网

Blazor 组件怎么创建

畫卷琴夢

发布： 2025-12-18 12:59:19

原创

237人浏览过

Blazor组件以.razor文件形式存在，包含@page、HTML模板和@code块三部分；可通过标签名复用，需注意命名空间和大小写；支持@namespace和@inherits增强组织性与可扩展性。

blazor 组件怎么创建

Blazor 组件通常以 .razor 文件形式存在，本质是带 HTML 模板和 C# 逻辑的混合文件，创建方式简单直接。

在 Visual Studio 或 VS Code 中新建 .razor 文件

右键项目（通常是 Pages、Components 或自定义文件夹）→ 选择“添加” → “新建项” → 找到“Razor 组件”模板（Visual Studio）或手动新建文本文件并命名为 MyComponent.razor（VS Code）。确保扩展名是 .razor，不是 .cs 或 .html。

基础结构：@page + HTML + @code

一个最简 Blazor 组件至少包含三部分：

@page "/my-component" —— 可选，仅当需要作为页面路由时添加；组件复用时不加
纯 HTML 标记（支持 Razor 语法，如 @value、@if）
@code { ... } 块 —— 放 C# 成员（字段、属性、方法）、生命周期方法（如 OnInitialized）

示例：

<h3>Hello, @Name!</h3><br>@if (IsVisible)<br>{<br>    <p>Content is shown.</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11102">
                            <img src="https://img.php.cn/upload/webcode/000/000/012/176494681157468.jpg" alt="极限网络办公Office Automation">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11102">极限网络办公Office Automation</a>
                            <p>专为中小型企业定制的网络办公软件,富有竞争力的十大特性：  1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢  只需3分钟。  2、客户机无需安装专用软件，使用浏览器即可实现全球办公。  3、集成Internet邮件管理组件，提供web方式的远程邮件服务。  4、集成语音会议组件，节省长途话费开支。  5、集成手机短信组件，重要信息可直接发送到员工手机。  6、集成网络硬</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="极限网络办公Office Automation">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11102" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="极限网络办公Office Automation">
                        </a>
                    </div>
                <br>}<br><br>@code {<br>    private string Name = "Blazor";<br>    private bool IsVisible = true;<br>}

登录后复制