DEV4 Blog

  • Home
  • /
  • Blog
  • /
  • Show a dismissable Bootstrap style alert

Bootstrap is a front-end framework and only supports activation of user interface elements from JavaScript. How can we show dismiss-able Bootstrap style alert messages from code-behind in a Web Forms project? 

Steps:

  1. Write a VB module (attached) or a static class in C#, exposing a public function that just outputs HTML markup in the form of a LiteralControl
  2. Use the function like the following:  PlaceHolder1.Controls.Add(GetAlertMessage(1,"This is an alert message!"))

Alert Helper

Module AlertHelper
    ''' <summary>
    '''     Prepares an HTML message markup using Bootstrap 3 styles, created from the given parameters.
    ''' </summary>
    ''' <param name="intType">
    '''     A number to identify the required message type.
    '''     (0-Error,1-Success,2-Warning,3-Info)
    ''' </param>
    ''' <param name="strMessage">Message to output</param>
    ''' <returns name="markup">Prepared markup</returns>
    ''' <remarks>Return value should be added to a control. e.g. divServerResponse.Controls.Add(GetAlertMessage(0, "Sorry"))</remarks>
    Public Function GetAlertMessage(intType As Integer, strMessage As String) As LiteralControl

        Dim markup As LiteralControl = Nothing

        Const strErrorMessageMarkup = "<div class='server-msg-bottom'><div class='col-sm-8 col-sm-offset-2'><div class='alert alert-dismissable alert-danger fade in'><button type='button' class='close' data-dismiss='alert'>×</button><p style='font-size:12px;'>{0}</p></div></div></div>"
        Const strSuccessMessageMarkup = "<div class='server-msg-bottom'><div class='col-sm-8 col-sm-offset-2'><div class='alert alert-dismissable alert-success fade in'><button type='button' class='close' data-dismiss='alert'>×</button><p style='font-size:12px;'>{0}</p></div></div></div>"
        Const strWarningMessageMarkup = "<div class='server-msg-bottom'><div class='col-sm-8 col-sm-offset-2'><div class='alert alert-dismissable alert-warning fade in'><button type='button' class='close' data-dismiss='alert'>×</button><p style='font-size:12px;'>{0}</p></div></div></div>"
        Const strInfoMessageMarkup = "<div class='server-msg-bottom'><div class='col-sm-8 col-sm-offset-2'><div class='alert alert-dismissable alert-info fade in'><button type='button' class='close' data-dismiss='alert'>×</button><p style='font-size:12px;'>{0}</p></div></div></div>"

        Select Case intType
            Case 0
                ' Error message
                markup = New LiteralControl(String.Format(strErrorMessageMarkup, strMessage))
            Case 1
                ' Success message
                markup = New LiteralControl(String.Format(strSuccessMessageMarkup, strMessage))
            Case 2
                ' Warning message
                markup = New LiteralControl(String.Format(strWarningMessageMarkup, strMessage))
            Case 3
                ' Info message
                markup = New LiteralControl(String.Format(strInfoMessageMarkup, strMessage))
        End Select

        Return markup
    End Function
End Module






Published on 22 Jan 2019

Add new comment...