4、Blazor组件开发：从基础到数据交互

Blazor组件开发：从基础到数据交互

1. 构建第一个Razor组件

在了解组件概念并学习Blazor组件文件及其语法基础后，我们开始动手创建第一个组件——用于在应用程序中显示书籍的图书卡片。具体步骤如下：
1. 创建Razor组件文件 ：在Visual Studio中，右键单击“Shared”文件夹，选择“Add” -> “Razor component”，命名为“BookCard.razor”，然后点击“Add”。将组件创建在“Shared”文件夹是因为它是共享组件，将在多个页面中使用。
2. 编写初始标记 ：文件创建完成后，即可开始编写第一个标记。
3. 设计图书卡片的HTML ：编写一个包含书籍信息和“添加到购物车”按钮的基本HTML设计，代码如下：

<div style="border:1px solid black; padding:3px">
    <h6>Book 01</h6>
    <p>Author: Author Name</p>
    <p>Publishing date: 2022-07-02</p>
    <button style="width:100%">Add to Cart</button>
</div>

现在我们有了一段固定的HTML，后续将实现其在多个组件中的复用。
4.