来自 ASP.NET 服务器端的 Bootstrap 警告
3.82/5 (9投票s)
使用来自服务器端 VB.NET 的 Bootstrap 警告，向 Web 用户显示警告再简单不过了
引言
出于各种原因，警告会以信息、警告或问题的形式显示给 Web 用户。在 Windows Form 中，最常用的方法是调用 MsgBox 对象函数。在 ASP.NET 中，情况有所不同，因为 MsgBox 在 IIS 服务器上不起作用。虽然 JavaScript 警告可能很有用，Toastr 和其他一些插件也是如此，但在 ASP.NET 中使用弹出窗口时应考虑设备差异。
在这种情况下，我将介绍一个从服务器端执行 Bootstrap 警告的程序。
背景
要使用此技术，您应该非常了解 Bootstrap，以便您可以根据需要调试或转换此逻辑。
- 立即从 getbootstrap.com 学习 Bootstrap
- 查看 Bootstrap 警告部分
- Bootstrap 使用 JavaScript 的警告
- 查看如何使用 font-awesome 图标包
Bootstrap 警告可以使用关闭图标关闭，并在页面上的 div 中呈现。它有 4 (五) 种状态，这在许多 Bootstrap 组件中很常见。
Alert-success
这会显示带有绿色背景颜色的成功消息。更适合向用户传递平静的成功信息。
Alert-warning
向用户显示带有浅橙色背景的警告消息。更适合失败的操作。
Alert-info
用于向用户显示提示和信息，带有浅蓝色背景。
Alert-danger
用于显示错误消息、关键结果，如数据库连接失败、无效数据、错误输入等。
图标
各种警告的图标来自 font-awesome。
警告 CSS 样式
默认情况下，这是 Bootstrap 提供的 alert 组件的 CSS。
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
要有效地使用它，我们添加一个 CSS 属性 display: block; 使其以块的形式显示（覆盖可用的整个 100% 宽度）。要修改此内容，您应该将以下规则添加到 CSS 文件或覆盖 bootstrap.css 或 bootstrap.min.css，这是不可取的。
.alert { display: block; }
BootstrapAlert() 方法
我们在 ASP.NET Web 项目中创建一个 public 类或模块，并添加以下 enum 和 方法。
Public Enum BootstrapAlertType
Plain
Success
Information
Warning
Danger
Primary
End Enum
Plain– 显示没有背景颜色的警告，使用默认值Success– 显示成功警告Information– 显示信息警告Warning– 显示警告警告Danger– 显示错误/关键警告
这些设置了固定类型的警告，而不是使用 string，这样更容易调用它们。
Public Shared Sub BootstrapAlert(MsgLabel As Label, Message As String, _
Optional MessageType As BootstrapAlertType = BootstrapAlertType.Plain,
Optional Dismissable As Boolean = False)
Dim style, icon As String
Select Case MessageType
Case BootstrapAlertType.Plain
style = "default"
icon = ""
Case BootstrapAlertType.Success
style = "success"
icon = "check"
Case BootstrapAlertType.Information
style = "info"
icon = "info-circle"
Case BootstrapAlertType.Warning
style = "warning"
icon = "warning"
Case BootstrapAlertType.Danger
style = "danger"
icon = "remove"
Case BootstrapAlertType.Primary
style = "primary"
icon = "info"
End Select
If (Not MsgLabel.Page.IsPostBack Or MsgLabel.Page.IsPostBack) And Message = Nothing Then
MsgLabel.Visible = False
Else
MsgLabel.Visible = True
MsgLabel.CssClass = "alert alert-" & _
style & If(Dismissable = True, " alert-dismissible fade in font2", "")
MsgLabel.Text = "<i class='fa fa-" & icon & "'></i>" & Message
If Dismissable = True Then
MsgLabel.Text &= "<button type='button' _
class='close' data-dismiss='alert' _
aria-label='Close'><span aria-hidden='true'>×_
</span></button>"
End If
MsgLabel.Focus()
Message = ""
End If
End Sub
实现 Bootstrap 警告
1. 导入类
您可以通过两种方式执行此操作。在包含的示例中，Web.config 中的类引用使其在所有 Web 表单中都为 public。
<configuration>
<system.web>
<compilation debug="true" strict="false"
explicit="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
<pages>
<namespaces>
<add namespace="AppClass" />
</namespaces>
</pages>
</system.web>
</configuration>
或者在 Web 表单类级别执行此操作。AppClass 是在 App_Code 文件夹中具有 BootstrapAlert 方法的类的名称。
Imports AppClass
Partial Class _Default
Inherits System.Web.UI.Page
End Class
2. 将标签控件添加到您的 Web 表单
接下来，您应该向页面或表单添加一个标签。
<asp:Label ID="lblMsg" runat="server" Visible="false"></asp:Label>
在页面加载时，Label 的可见性设置为 false。
3. 调用 BootstrapAlert 方法
- 第一个参数是
MsgLabel的名称，在这种情况下为 “lblMsg” Message是要输出给用户的string值MessageType是要显示的警告类型，这些值来自BootstrapAlertType 枚举(Default,Success,Information,Warning,Danger,Primary)- 如果
Dismissable参数设置为True，则警告将具有一个关闭/关闭图标，位于右侧，供用户从页面中删除。
4. 示例输出
BootstrapAlert(lblMsg, "Congrats! You've won a dismissable booty message.", BootstrapAlertType.Success, True)
BootstrapAlert(lblMsg, "Sorry! We could not sign you in", _ BootstrapAlertType.Warning, True)
BootstrapAlert(lblMsg, "You can also use the exit door", BootstrapAlertType.Information) BootstrapAlert(lblMsg, "Database connection has failed. _ Pls check issue", BootstrapAlertType.Danger)
看点
BootstrapAlert 可以根据您的需要进行自定义，更改颜色、样式、图标等。即使对于初学者来说，它也非常方便。