Introduction: In this article i
am going to share the trick to show notification pop up message box in asp.net
using jQuery that will hide after 5 seconds after displaying the message.
Description: While developing web application we need to
show message box or notification pop up frequently. For example to show the
Message like "Record saved successfully", "Record could not be
saved" or "Record deleted successfully" etc. But in web
forms there is no inbuilt feature to show message box. So we need to create our
own custom notification/message box using jQuery that popup and display the
message.
Implementation: Let's create a
demo website page to demonstrate the notification pop up message box.
- First of all we will create style for the
notification message box. So in the solution explorer, right click on your
website and click on "Add New Item" -> select "Style
Sheet" and keep the default name "Stylesheet.css"
- In the StyleSheet.css paste the
following.
.notification
{
background-color:#006699;
min-height:40px;
width:30%;
margin:0 auto;
text-align:center;
line-height:50px;
color:#fff;
font-size:18px;
box-shadow: 10px 10px 5px #888888;
}
- In the <Head> tag of the
design page(default.aspx) paste the following.
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
<script language="javascript"
type="text/javascript">
$(document).ready(function(){
$('#<%=dvMsg.ClientID%>').fadeOut(5000,function(){
$(this).html("");
//reset label after fadeout
});
});
</script>
- In the <Body> tag place a
button control and create the <div> tag having label control which will
contain the message as:
<div id="dvMsg" class="notification" runat="server" visible="false">
<asp:Label ID="lblMsg" runat="server"></asp:Label>
</div>
<asp:Button ID="btnShowMsg"
runat="server"
Text="Show"
onclick="btnShowMsg_Click"
/>
Asp.Net C# code to show
notification popup
- In the code behind file (default.aspx.cs)
write the code on show button click as:
protected void btnShowMsg_Click(object
sender, EventArgs e)
{
dvMsg.Visible = true;
lblMsg.Text = "This is notification
message demo";
}
Asp.Net VB code to show
notification popup
- In the code behind file (default.aspx.vb)
write the code on show button click as:
protected void btnShowMsg_Click(object
sender, EventArgs e)
{
dvMsg.Visible = true
lblMsg.Text = "This is notification
message demo"
}