locked
Bootstrap Alerts RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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