Count Down Timer in Asp.Net MVC For Exams


Hi I search a lot on the Internet for the to make the timer control as in Asp.Net Web Forms. Which execute with every second and end the test once the time finished the exam will be submitted or showed message expired.

Then i right the custom javascript code to made the time in which we assign the end time for the timer and once the timer is finished. It will redirect to another page.

Let Start Demo.


First you have to Create a MVC Application. Here i m using the basic template for which comes with build in authentication features.

Once you creates the project you will get the Following Screen and Project Structure.

Project Structure

Now we have a 2 Goals Here

  1. Timer Should be Start from where we left after the post back.
  2. After the time finish user must redirect to Home Page.


For this First we have to set the end time of the Timer.

so for Example if i want to Set the time for 2 minutes. I will pass the end time to my View through “ViewBag“.

 public ActionResult Index()
    if (Session["EndDate"] == null)
      Session["EndDate"] = DateTime.Now.AddMinutes(1).ToString("dd-MM-yyyy h:mm:ss tt");
    ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
    ViewBag.EndDate = Session["EndDate"];
    return View();

and Write the Following code on the View.

    var dt = '@ViewBag.EndDate';
    var dateAr = dt.split('-');
    var newDate = dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2];

    var end = new Date(dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2]);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
       var now = new Date();
       var distance = end - now;
       if (distance < 0) {
           document.getElementById('countdown').innerHTML = 'EXPIRED!';
           window.location.href = '/Home/Index';

    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = hours + 'hrs ';
    document.getElementById('countdown').innerHTML += minutes + 'mins ';
    document.getElementById('countdown').innerHTML += seconds + 'secs';

    timer = setInterval(showRemaining, 1000);
 And Create a element on with ID=countdown i prefer create grid.
I create this code on Layout page and and Element on the top of the page.
so once i run the site the timer starts and it will end after exact two minutes.
and if went 2 other page also then it runs from the same place where we left. so the student will get exact 2 min to finish the exam.


You can  download the Sample Here

Single Page Application using Asp.Net and AngularJS

First of all, I always having a trouble with jQuery or Javascript. Sometimes back I started using AngularJS and i become a fan of AngularJS in which way that implements MVC pattern and this increased my interest towards JavaScript. Currently I am working in a Single Page Application(SPA) using AngularJS which communicates with the back end through ASP.NET Web API. I really am seeing the beauty of AngularJS these days.
So if you want to learn AngularJS, of course you need to know how to setup a AngularJS project in Visual Studio. There are couple of Visual Studio templates available like AngularJS SPA Template, which you can download and use with Visual Studio. But in this demo, let’s see how you can create AngularJS app in
Lets create empty Application.
File >> New >> Project
First Screen

Asp.Net Web Application

Select Empty Project

after creating the project install the AngularJS Libraries form the Nuget.

Install AnuglarJS through Nuget

Install AnuglarJS through Nuget



Alternatively, you can use Package Manage Console to install AngularJS. Once it gets installed, you can see a new folder named “Scripts” added to the project which contains all the AngularJS files needed to start the project off with.



Now inside my project, let’s create a folder named “App”. The “App” folder is going to be the one folder which will contain all the UI components Like Controller, views etc. Inside “App” folder, let’s create two folders named “controllers” and “views”. “controllers” folder will contain all the AngularJS controllers and “views” folder will contain all the templates (html pages). All the templates will be rendered inside one html page. Let’s create that main html page named “default.html” on root folder.
Create a new Html Page

Create a new Html Page

Add a javascript file on the root named “app.js” and define AngularJS modules there.

 File Structure
var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
      .when('/', {
          templateUrl: 'app/views/home.html',
          controller: 'homeController'
      .when('/about', {
          templateUrl: 'app/views/about.html',
          controller: 'aboutController'
          redirectTo: '/'
.controller('mainController', function ($scope) {
    $scope.message = "Main Content";

Here in the “app.js”, there are some couple of key components on which AngularJS works. Since our application is Single Page Application, so we don’t want any whole page refreshes or flicking. Here we are using the build in Dependency Injection feature in AngularJS so we are using AngularJS routing capabilities by injecting $routeProvider in AngularJS. There I am saying when the Url is “/” load the “views/home.html” which is bound to “homeController”. When the Url is “/about”, same way load the “views/about.html” which is bound to “aboutController”. There is also a controller defined “mainController”.

 Now lets go and create home and About View and Controllers in app folder. For this first you will create 2 folders in app folder
  2. Controllers

to maintain the separation concern.

Now create a two Javascript files name “HomeController” and “AboutController”. You can use any name convention for the file but i preferred Suffix “Controller” as in MVC to understood the file Role in the application.

the Structure look like this.




Copy this code in “HomeControllers” and “AboutController” to enable them to pass the message to View.

Home Controller:

'use strict';
app.controller('homeController', function ($scope) {
    $scope.message = "This is Home Page loaded using Angular!";

 About Controller:
'use strict';
app.controller('aboutController', function ($scope) {
    $scope.message = "This is about page loaded using Angular!";
Lets create a view for our application as shown below:


copy the following Html on the relevant view


<div ng-controller="homeController">


<div ng-controller="aboutController">
 Let Modify the default.html page to bind all the view and controller together .
<!DOCTYPE html>
<html xmlns="" ng-app="myApp">
    <title>Sample AngularJS project using Visual Studio</title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="app/controllers/homeController.js"></script>
    <script src="app/controllers/aboutController.js"></script>
        <a href="#/">Home</a>
        <a href="#/about">About</a>
    <div ng-controller="mainController">
        <div ng-view>
 Here first in <html>, I have mentioned ng-app directive, which powers up the AngularJS. Then in the <head></head> section, I have included all the necessary scripts. Then in <body></body> section, first I have added a <div> which will contain links for navigation. For linking to pages, # (hash tag) is used. We don’t want the browser to think we are actually travelling to “home.html” or “about.html”.
Then defined a <div> which is bound to “mainController”. There first I am displaying the value in $scope.message in “mainController”. Then I have a ng-view which defines a angular template and the templates will be injected inside ng-view.
to See the output right click on the default.html and click view in browser.
Open Page

Open Page

So when we run the project we got the following output

Note the url is “/” here

Home Page

Home Page


Note the url is “/about” here

About Page

About Page


and when you will find when you click on the other link the whole page will not refresh it loads only the view required. This is the power of AngularJS.


I m attaching the sample Project here you can Download this project from Here




Charanjit Singh

Creating a New Web Application and Domain Model

In this tutorial, you will create a new ASP.NET Web Application that you can use as a starting point for your application. You are going to use the Telerik Data Access Web Application project template. This template will create a new ASP.NET Web Application, and open the Telerik Data Access New Domain Model Wizard. Once you run through the wizard, the new domain model will be added to the web project.

Creating a New ASP.NET Application

  1. Start Visual Studio, on the File menu select New, and then select Project.
  2. In the New Project dialog box, select Visual C# as the programming language.
  3. In the Templates pane, select Telerik Data Access Web Application.
  4. Type DemoApp as the name of the project.
  5. Click OK.
  6. The ASP.NET Web Application is created
New Project Dialog

New Project Dialog