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. In previous articles i explained Show Message Box in asp.net web application like window application and Show message box and redirect to another page or website and Ajax ModalPopupExtender example to open login form in popup window and Best example to implement stylish jQuery form validations and Show jQuery tooltip message on mouse over
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"
}
Now over to you:
" I hope you have got how to display notification message in
Asp.Net using jquery If you like my work; you can appreciate by leaving your
comments, hitting Facebook like button, following on Google+, Twitter, Linked
in 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."
7 comments
Click here for commentsVery Nice....
ReplyHi Shaiwal Trupathi..I am glad you found this article useful..stay connected and keep reading..:)
ReplyHi Lalit Raghuvanshi, I'm tried your demo it's work fine until I add another button it's show message after I click the other button, I mean every post back fired this message
Replyplease can you help me to fix this issue.
my Regards
Hi Hussain Salman..On page load just write the line dvMsg.Visible = false;
Replyit will solve your issue..
It's work now thanks for your answer. I love your blog.
ReplyHello Hussein Salman..i am glad your problem is solved..:)
Replysir,how it works in a page without button.
ReplyIf 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..