如何在Blazor Server中实现空文本框时弹出Bootstrap Modal

1. 确保项目引入Bootstrap依赖 #

首先确认你的Blazor Server项目已集成Bootstrap：

• 通过LibMan或NuGet安装Bootstrap
• 在Pages/_Layout.cshtml中添加Bootstrap的CSS和JS引用：

  <!-- 头部引入CSS -->
  <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
  
  <!-- 页面底部引入JS（需在Blazor脚本之前） -->
  <script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  

2. Blazor组件实现逻辑 #

在目标组件中，通过Blazor的绑定变量控制文本框内容，结合布尔变量控制Modal的显示/隐藏：

组件UI代码 #

<!-- 输入文本框 -->
<input type="text" 
       @bind-value="InputContent" 
       class="form-control w-50 mt-3" 
       placeholder="请输入内容" />

<!-- 触发检测的按钮 -->
<button class="btn btn-primary mt-2" @onclick="ValidateInput">提交</button>

<!-- Bootstrap Modal弹窗 -->
<div class="modal @(IsModalVisible ? "show d-block" : "")" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">输入错误</h5>
                <button type="button" class="close" @onclick="HideModal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>文本框内容不能为空，请输入有效内容！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="HideModal">确定</button>
            </div>
        </div>
    </div>
    <div class="modal-backdrop @(IsModalVisible ? "show" : "")"></div>
</div>

组件逻辑代码 #

@code {
    // 绑定文本框内容
    private string InputContent { get; set; } = string.Empty;
    // 控制Modal显示状态
    private bool IsModalVisible { get; set; } = false;

    // 检测输入内容的方法
    private void ValidateInput()
    {
        if (string.IsNullOrWhiteSpace(InputContent))
        {
            // 内容为空时显示Modal
            IsModalVisible = true;
        }
        else
        {
            // 内容有效时执行业务逻辑（如提交数据）
            // 示例：打印内容到控制台
            Console.WriteLine($"提交内容：{InputContent}");
        }
    }

    // 关闭Modal的方法
    private void HideModal()
    {
        IsModalVisible = false;
    }
}

3. 可选：实时检测（失去焦点时触发） #

如果需要在文本框失去焦点时就检测内容，只需给输入框添加@onblur="ValidateInput"属性：

<input type="text" 
       @bind-value="InputContent" 
       @onblur="ValidateInput"
       class="form-control w-50 mt-3" 
       placeholder="请输入内容" />

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