I am displaying a message via ViewBag in C# and it works fine. Now what I want is to auto Hide the ViewBag message after 15 seconds. How should I do that?
Following is my code where I am using ViewBag:
public ActionResult ForgetPassword(String EmailId, string message)
{
ViewBag.Message = message;
ForgetPassword objForgetPassword = new ForgetPassword { EmailId = EmailId };
return View();
}
//Other Model where I am passing the Message
if (objResult.Status)
{
return RedirectToAction("Login", new { message = "Password changed Successfully. Please Login with the New Password."});
}
CSHTML code for the same:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal for-pass">
<h4><b>@ViewBag.Message</b></h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.OTP, htmlAttributes: new { @class = "control-label" })
<div class="col-md-12">
@Html.EditorFor(model => model.OTP, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.OTP, "", new { @class = "text-danger" })
</div>
</div>
You can use the javascript setTimeout function to run the code to hide the message using the query fadeOut function:
$(document).ready(function(){
setTimeout(function(){
$("#msg").fadeOut();
}, 15000);
});
and in view:
<h4 id="msg"><b>@ViewBag.Message</b></h4>
here's fiddle: https://dotnetfiddle.net/3Sw1O9
You can use Javascript setTimeout() function to do so.
Give your label an particular Id like ' lblMsg '
setTimeout(function(){ document.getElementById('lblMsg').style.display = "none"; }, 15000);
Or Simply you want to remove the element after 15 seconds.
Using JQuery you can use remove() function.
setTimeout(function(){ $('#lblMsg').remove(); }, 15000);
You can use JS to hide element which contains ViewBag
data like this:
setTimeout(function() { $("h4").hide(); }, 15000);
$("h4").delay(15000).fadeOut();
Or using CSS selector display: none
:
setTimeout(function() { $("h4").css('display','none'); }, 15000);
Make sure the h4
is the only one element which contains the message, otherwise use <div>
with id
attribute.
Give an id to the container of the message. Then add document.ready method that hide the container after 15 sec. Use settimeout function as below:
setTimeout(function() {
$("#successMessage").hide('bind', {}, 500)
}, 5000);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.