Tuesday, March 8, 2016

How to Show Animated Alert Message in ASP.NET Using Bootstrap

Bootstrap :
---------------
Bootstrap is  free and open source power full tool for front-end developer's. It's developed by twitter team. You can use bootstrap for responsive, easy and fast website design.It's added very features .Now it's very easily design a website with responsive.

You can learn bootstrap easily. Bootstrap Official Website : Getbootstrap.com

Visual Studio Add New Web Project and Add New Page :

Default.aspx :
------------------------


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style type="text/css">
.messgealert {
width:50%;
position:fixed;
top:0;
z-index:10000000;
padding:0;
font-size:15px;
}
</style>

<script type="text/javascript">
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">&times;</a><strong>' + message + '!</strong></div>');
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div class="messgealert" id="alert_container">

</div>

<div style="margin-top:100px;text-align:center">
<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 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>


----------------------
 Default.aspx.cs
----------------------

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 problem with your internet connection", MessageType.Warning);
}

protected void btnInfo_Click(object sender, EventArgs e)
{
ShowMessage("please verify your data before submitting", MessageType.Info);
}


Output :

DOWNLOAD SOURCE FILE


[If any problem , please comment me bellow. Thanks]

1 comment:

  1. Ready to use streamer animations Really I enjoy your site with effective and useful information. It is included very nice post with a lot of our resources.thanks for share. i enjoy this post.

    ReplyDelete