Vinod Danekar: ASP.net: Bootstrap alerts from server side code

Question:
Can I implement Bootstrap alerts from asp.net server side code? How?

Answer:
Yes. Here is a way to do so.
Step 1: Simply create a class called AlertsHelper in App_Code folder or your class library. Copy the following code.

Public Class AlertsHelper

    'Show Info Alert box
    Public Shared Sub ShowInfo(ByVal ltr As Literal, ByVal Title As String, Optional ByVal Description As String = "")
        ShowBox(ltr, Title, Description, "info")
    End Sub

    'Show Warning Alert box
    Public Shared Sub ShowWarning(ByVal ltr As Literal, ByVal Title As String, Optional ByVal Description As String = "")
        ShowBox(ltr, Title, Description, "error")
    End Sub

    'Show Success Alert box
    Public Shared Sub ShowSuccess(ByVal ltr As Literal, ByVal Title As String, Optional ByVal Description As String = "")
        ShowBox(ltr, Title, Description, "success")
    End Sub

    'Show Error Alert box
    Public Shared Sub ShowError(ByVal ltr As Literal, ByVal Title As String, Optional ByVal Description As String = "")
        ShowBox(ltr, Title, Description, "error")
    End Sub

    'Internal method that handles all alert boxes
    Private Shared Sub ShowBox(ByVal ltr As Literal, ByVal Title As String, ByVal Description As String, ByVal MsgType As String)
        If Description = "" Then 'if description is not provided then set title as description
            Description = Title
            Title = ""
        End If

        Dim boxClass As String = "alert alert-" &amp; MsgType
        Dim sb As New StringBuilder
 
       'Wrapper div
        sb.AppendFormat("<div class="">", boxClass)

        'add close button
        sb.Append("<button alert="" button="" class="" close="" data-dismiss="" type="">×</button>")

        'If title provided then add it as a heading
        If Title.Length &gt; 0 Then
            sb.AppendFormat("<br /><h4>{0}</h4>", Title)
        End If

        'show description
        If Description.Length &gt; 0 Then
            sb.AppendFormat("{0}", Description)
        End If

        sb.Append("</div>") 'close wrapper div
        ltr.Text = sb.ToString 'add to literal control

    End Sub

End Class

Step 2: Create a web page. Add Bootstrap script and css reference in head tag.
Step 3: Add a literal control(id=ltrMsg) probably on top in body tag.
Step 4: In Server side code call AlertsHelper.ShowError, AlertsHelper.ShowInfo, AlertsHelper.ShowWarning, AlertsHelper.ShowSuccess as per your requirement.
Done!.

You may copy following code as a sample.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Overrides Sub OnLoadComplete(ByVal e As System.EventArgs)
        MyBase.OnLoadComplete(e)
     
        AlertsHelper.ShowError(ltrMsg, "Something went wrong", "Something went wrong. It may take up to 24 hours to work. Please, contact administrator for details.")
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 
    <script src="../js/jquery.1.10.1.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.js" type="text/javascript"></script>
    <link href="../styles/bootstrap.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <form id="form1" runat="server">
       <asp:Literal ID="ltrMsg" runat="server"></asp:Literal>
    </form>
 
</body>
</html>

Vinod Danekar

Wednesday, May 21, 2014

ASP.net: Bootstrap alerts from server side code

No comments:

Post a Comment