如何在Blazor中点击按钮生成HTML表单？能否不使用JavaScript实现？

结论 #

完全可以不使用JavaScript实现该需求，Blazor原生的条件渲染机制即可满足要求，无需额外引入JS逻辑。

具体实现方法 #

• 第一步：在razor组件的代码块中定义布尔类型的状态标识，初始值设为false，保证页面首次加载时不会渲染表单
• 第二步：为「create form」按钮绑定Blazor原生的点击事件，触发时修改状态标识为true
• 第三步：使用Blazor的@if条件渲染语法包裹表单代码，仅当状态标识为true时才会渲染表单DOM

完整示例代码 #

@page "/form-demo"

<!-- 按钮绑定点击事件 -->
<button @onclick="() => isFormVisible = true">create form</button>

<!-- 条件渲染表单 -->
@if (isFormVisible)
{
    <form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
    </form>
}

@code {
    // 表单显隐状态标识，初始为false
    private bool isFormVisible { get; set; } = false;
}

补充说明 #

该实现逻辑同时兼容Blazor Server和Blazor WebAssembly两种模式，状态变更后Blazor会自动完成DOM的差异对比和更新，全程不需要编写任何JavaScript代码。

内容的提问来源于stack exchange，提问作者mohandes