Show and Auto close bootstrap alert messages after few seconds in Asp.Net C#,VB ~ Asp.Net,C#.Net,VB.Net,MVC,jQuery,JavaScipt,AJAX,WCF,Sql Server example

Introduction: In this article I am going to explain how to display animated bootstrap alert message box that automatically closes(fade away) with slide up effect after few seconds using both asp.net C# and VB language.

Description: Here i have demonstrated the use of twitter bootstrap alert to display messages in alert box that auto close after 5 seconds after displaying alert message or can be manually closed by close button provided in alert box

In previous articles i and explained What is bootstrap and how to show to show animated bootstrap alert message and Show jquery notification pop up message box and hide after 5 seconds in asp.net and Show message box in asp.net web application like window application and Implement jQuery UI Autocomplete without using web service and Open login form in popup using Ajax ModalPopupExtender

Implementation: Let’s create a sample web page to demonstrate the implementation of bootstrap alert message boxes in asp.net

Asp.Net C# Section

HTML Source

.messagealert {

width: 100%;

position: fixed;
top:0px;

z-index: 100000;

padding: 0;

font-size: 15px;

}

</style>

function ShowMessage(message, messagetype) {

var cssclass;

switch (messagetype) {

case 'Success':

cssclass = 'alert-success'

break;

case 'Error':

cssclass = 'alert-danger'

break;

case 'Warning':

cssclass = 'alert-warning'

break;

default:

cssclass = 'alert-info'

}

$('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');

setTimeout(function () {

$("#alert_div").fadeTo(2000, 500).slideUp(500, function () {

$("#alert_div").remove();

});

}, 5000);//5000=5 seconds

}

</script>

</head>

<body>

<div>

</div>

<asp:Button ID="btnSuccess" runat="server" Text="Submit" CssClass="btn btn-success"

OnClick="btnSuccess_Click" />

<asp:Button ID="btnDanger" runat="server" Text="Danger" CssClass="btn btn-danger"

OnClick="btnDanger_Click" />

<asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning"

OnClick="btnWarning_Click" />

<asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info"

OnClick="btnInfo_Click" />
</div>

</div>

</form>

</body>

</html>

Note: Have you observed I have added the required bootstrap js and css file reference in the Head tag above. It is required to use the bootstrap tools.

I have set the timer using jQuery setTimeout function to automatically close(fade away) the alert after 5 seconds with slide up effect. You can increase or decrease the time as per your choice.

Asp.Net C# Code

public enum MessageType { Success, Error, Info, Warning };

protected void Page_Load(object sender, EventArgs e)

{

}

protected void ShowMessage(string Message, MessageType type)

{

ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + Message + "','" + type + "');", true);

}

protected void btnSuccess_Click(object sender, EventArgs e)

{

ShowMessage("Record submitted successfully", MessageType.Success);

}

protected void btnDanger_Click(object sender, EventArgs e)

{

ShowMessage("A problem has occurred while submitting data", MessageType.Error);

}

protected void btnWarning_Click(object sender, EventArgs e)

{

ShowMessage("There was a problem with your internet connection", MessageType.Warning);

}

protected void btnInfo_Click(object sender, EventArgs e)

{

ShowMessage("Please verify your data before submitting", MessageType.Info);

}

Explanation: In the above code I have created an enum. Enums are strongly typed constants which makes the code more readable and less prone to typing errors. When we have a set of values that are functionally significant and unchanged we can use enum.

Then I have created a function ShowMessage that accepts message and message type as a parameter and calls the javascript function and passes these values to that. Based on these passed values appropriate alert box gets displayed.

We just need to pass the desired message and the type of message we want to display to the ShowMessage function and all is done.

Asp.Net VB Section

Design the page same as we designed above in asp.net C# section, but replace the 4 buttons HTML with the following

<asp:Button ID="btnSuccess" runat="server" Text="Submit" CssClass="btn btn-success" />

<asp:Button ID="btnDanger" runat="server" Text="Danger" CssClass="btn btn-danger" />

<asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning" />

<asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info" />

Asp.Net VB Code

Public Enum MessageType

Success

[Error]

Info

Warning

End Enum

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

End Sub

Protected Sub ShowMessage(Message As String, type As MessageType)

ScriptManager.RegisterStartupScript(Me, Me.[GetType](), System.Guid.NewGuid().ToString(), "ShowMessage('" & Message & "','" & type.ToString() & "');", True)

End Sub

Protected Sub btnSuccess_Click(sender As Object, e As EventArgs) Handles btnSuccess.Click

ShowMessage("Record submitted successfully", MessageType.Success)

End Sub

Protected Sub btnDanger_Click(sender As Object, e As EventArgs) Handles btnDanger.Click

ShowMessage("A problem has occurred while submitting data", MessageType.Error)

End Sub

Protected Sub btnWarning_Click(sender As Object, e As EventArgs) Handles btnWarning.Click

ShowMessage("There was a problem with your internet connection", MessageType.Warning)

End Sub

Protected Sub btnInfo_Click(sender As Object, e As EventArgs) Handles btnInfo.Click

ShowMessage("Please verify your data before submitting", MessageType.Info)

End Sub

Now over to you:

A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.

11 comments

Click here for comments

Vishal Chopra

admin

October 16, 2015 ×

Nice, great help.....

Lalit Raghuvanshi

October 17, 2015 ×

Thanks vishal for your feedback. I am glad you found this article helpful for you. Stay connected and keep reading for more useful updates on bootstrap and other.

Unknown

even due some would never write back , be sure we are reading and following your post every day

Swapnil

December 08, 2015 ×

Very nicely explained

December 12, 2015 ×

Thanks swapnil for your valuable comments. Stay connected and keep reading for more useful updates..:)

madhead

January 21, 2016 ×

Would be nice to show this with mvc helpers and razor syntax :)

Alejandro García

June 01, 2016 ×

muy buen tutorial, lo he usado y funciona a la perfección

August 18, 2016 ×

Thanks for you feedback..I am glad you liked this article..stay connected and keep reading...

enxto

September 21, 2016 ×

Great Job!!. keep it up.

October 14, 2016 ×

Your welcome..Keep reading for more useful articles like this.

Farhan

January 03, 2020 ×

excellent work.. thank you

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..

Show and Auto close bootstrap alert messages after few seconds in Asp.Net C#,VB

Related Post

11 comments