locked
Bootstrap Alerts RRS feed

  • Question

  • User-90830185 posted

    I am new to Bootstrap and struggling to know how to use Alerts in Web Forms (vb.net)!

    I need a simple example of how to use Bootstrap Alert which will be hidden when the page is first displayed. And then on clicking a button the message (from the server side) to be shown in the Bootstrap Alert box and obviously make it visible. After few seconds the message to be removed.

    Similarly how do I validate the input fields (Dropdown list) to ensure that the user selects an item from the Dropdown list if no item selected then prompt the message in the Bootstrap Alert box (as above)

    Thursday, March 14, 2019 10:33 PM

All replies

  • User36583972 posted

    Hi Moodhi,

    I am new to Bootstrap and struggling to know how to use Alerts in Web Forms (vb.net)!

    I need a simple example of how to use Bootstrap Alert which will be hidden when the page is first displayed. And then on clicking a button the message (from the server side) to be shown in the Bootstrap Alert box and obviously make it visible. After few seconds the message to be removed.

    You can refer the following sample.

    Bootstrap Alert from ASP.NET Server Side
    https://www.codeproject.com/Articles/1091641/Bootstrap-Alert-from-ASP-NET-Server-Side

    Bootstrap alert in button event on asp.net
    https://stackoverflow.com/questions/35823379/bootstrap-alert-in-button-event-on-asp-net


    Best Regards

    Yong Lu

    Friday, March 15, 2019 9:43 AM
  • User-1038772411 posted
    $(document).ready(function(){
        $('button').click(function(){
            $('.alert').show()
        }) 
    });

    This jsfiddle shows how you can show a bootstrap alert box on click

    http://jsfiddle.net/g1rnnr8r/2/

    You need to implement jquery's show() method. The code you need to use is.

    Friday, March 15, 2019 11:21 AM
  • User-90830185 posted

    So in my client page (.aspx) I have the following code:

    <div class="alert alert-danger">
    <asp:Label ID="lblMsg" CssClass="alert alert-danger" runat="server"></asp:Label>
    </div>

    and while the css alert is set as follows:

    .alert{
    display: none;
    }

    so the Alert does NOT show up initially.

    Now, when the user clicks the button in client page (.aspx) below:

    <asp:Button ID="btnSubmit" class="btn btn-primary" runat="server" Text="Submit" onclick="SaveFeedback"/>

    I want the server side page (in SaveFeedback method in vb.net) to send custom message e.g. "Could not Save" or "all successful" to lblMsg and make the Alert visible. And then after few seconds the Alert to go away for which I assume I have the code in the header section:

    <script>
    window.setTimeout(function () {
    $(".alert-danger").fadeTo(500, 0).slideUp(500, function () {
    $(this).remove();
    });
    }, 5000);
    </script>

    So what is the exact server side code to do the above?

    Friday, March 15, 2019 12:00 PM
  • User36583972 posted


    Hi Moodhi,

    Moodhi

    I want the server side page (in SaveFeedback method in vb.net) to send custom message e.g. "Could not Save" or "all successful" to lblMsg and make the Alert visible. And then after few seconds the Alert to go away for which I assume I have the code in the header section:

    <script>
    window.setTimeout(function () {
    $(".alert-danger").fadeTo(500, 0).slideUp(500, function () {
    $(this).remove();
    });
    }, 5000);
    </script>

    So what is the exact server side code to do the above?

    The following sample for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Bootstrap Alert in ASP.Net Server-side</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
        <style>
            .alert {
                display: block;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Show Alerts"  />
                 <br />
                <br />
                 <asp:Label ID="lblMsg" runat="server" Visible="false"></asp:Label>
            </div>
        </form>
        
    </body>
    </html>
    
    
    Imports WebApplicationVB.BootstrapClassA
    
    Public Class bootstrapshowmessagescustom
    	Inherits System.Web.UI.Page
    
    	Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    
    		BootstrapAlert(lblMsg, "all successful", BootstrapAlertType.Success, True)
    		ScriptManager.RegisterClientScriptBlock(Me, Page.GetType, "script", "window.setTimeout(function() { document.getElementById('" & lblMsg.ClientID & "').style.display = 'none' },2000);", True)
    
    		'BootstrapAlert(lblMsg, "Could not Save", BootstrapAlertType.Success, True)
    	End Sub
    
    
    End Class
    
    
    Public Class BootstrapClassA
    	Public Enum BootstrapAlertType
    		Plain
    		Success
    		Information
    		Warning
    		Danger
    		Primary
    	End Enum
    
    	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
    			MsgLabel.Focus()
    			Message = ""
    		End If
    	End Sub
    
    
    End Class

    Best Regards

    Yong Lu

    Monday, March 18, 2019 2:58 AM