Asked by:
Bootstrap Alerts

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-SideBootstrap alert in button event on asp.net
https://stackoverflow.com/questions/35823379/bootstrap-alert-in-button-event-on-asp-net
Best RegardsYong 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