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"
}
Interesting and amazing how your post is! It Is Useful and helpful for me That I like it very much, and I am looking forward to Hearing from your next..
ReplyDelete澳洲cs代写
This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.
ReplyDeletejava代写