Navigation

Count Down Timer: Jquery Timer Countdown in MVC Application

jquery timer countdown in MVC, javascript time countdown, javascript time counter, javascript time counter example

Introduction

Timer countdown is very important in our web apps while we are restricting to end user within specified time frame for example apps online Quiz, online survey etc. Here, in this article I am explain in full depth, how to implement Jquery/JavaScript timer count down in our web apps.

Step 1:First of all add following time to start count down while open our MVC web app, here I am adding 2 minutes of time count down.

public ActionResult Index()
{
  if (Session["Rem_Time"] == null)
  {
     Session["Rem_Time"] = DateTime.Now.AddMinutes(2).ToString("dd-MM-yyyy h:mm:ss tt");
   }
   ViewBag.Rem_Time = Session["Rem_Time"];

   ViewBag.Message = "Modify this template to jump-start your MVC application.";
   return View();
}
Step 2: Add following div in Index page of our MVC apps _layout.cshtml page.

id timecountdown

Step 3: Add following script in our MVC web app which will display time (hour, minutes, secs).

Interval Time Count Down

Populating JavaScript Timer Count Down in MVC Web Application

Finally, you can see how populating JavaScript Timer Count Down in MVC Web Application. I hope it will help you all. 
MVC Timer Count Down

Conclusion

I have explained fully with step to step, how we can implement Jquery timer count down in our MVC web apps. If any queries then let me know, I am very happy to reply all of your queries.

Download Complete Project

Download

Suggested Reading

Share

Anjan Kant

Outstanding journey in Microsoft Technologies (ASP.Net, C#, SQL Programming, WPF, Silverlight, WCF etc.), client side technologies AngularJS, KnockoutJS, Javascript, Ajax Calls, Json and Hybrid apps etc. I love to devote free time in writing, blogging, social networking and adventurous life

Post A Comment:

4 comments:

  1. what is the use of window.location.href = 'Account/Login';
    please explain

    ReplyDelete
    Replies
    1. When the time duration expires, then it will navigate to desired page.

      Delete
  2. could this script be modified so that the timer counts up? if so how?

    ReplyDelete
    Replies
    1. you need to make changes in method to achieve desired functionality.

      Delete