ASP.NET MVC - jQuery Coming Soon Counter Plugin

Introduction 

 

When you are about to launch a new website, promotion or sale, it is important to let your customers base know about remaining launch time, so that your customers don't need to calculate the remaining time by themselves.

 

Today, I shall be demonstrating the integration of the Jquery Countdown plugin with the ASP.NET MVC5 platform.

 

Prerequisites

 

Following are some prerequisites before you proceed any further in this tutorial:

1. Knowledge of Jquery.
2. Knowledge of HTML.
3. Knowledge of JavaScript.
4. Knowledge of Bootstrap.
5. Knowledge of ASP.NET MVC5.
6. Knowledge of C# Programming.

The example code is being developed in Microsoft Visual Studio 2019 Professional

 

Let's begin now.

 

1) Create a new MVC web project and name it "CounterPlugin".  

 

2) Download & Install Jquery Countdown Plugin.

 

3) Create a "Controllerss\HomeController.cs" file with default Index method and its subsequent view "Views\Home\Index.cshtml" with following lines of code i.e.

...
    <div class="row">
       <div id="countdown"></div>

       <p id="countdown-detail"></p>
    </div>
...

In the above code, I have simply created my target 'div' and paragraph where my coming soon counters will be displayed.

 

4) Now, create the JavaScript file "Scripts\script-custom-countdown.js" with the following lines of code i.e.

...
    timeLeftForLaunch = (new Date()).getTime() + 5 * 24 * 60 * 60 * 1000; // days * hours * min * sec * milliseconds

    $('#countdown').countdown({
        timestamp: timeLeftForLaunch,
        callback: function (days, hours, minutes, seconds) {

            var message = "Launch Coming Soon in " + days + " days " + hours + " hours " + minutes + " minutes and " + seconds + " seconds ";
...
            $('#countdown-detail').html(message);
        }
    });
...

In the above code, I have initialized current date with time and add the number of days, hours, minutes and seconds (in milliseconds) left for the launch or maybe a website, promotion or sale, etc.

 

5) Now, execute the provided solution and you will be able to see the following in action i.e.

 

Conclusion

 

In this article, you will learn to integrate Jquery Countdown Plugin with the ASP.NET MVC web platform. You will also learn to customize your 'Coming Soon' message and the days, hours, minutes and seconds (in milliseconds) left for the launch or maybe a website, promotion or sale etc.