ASP.NET MVC: Jquery Coming Soon Counter Plugin

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 Jquery Countdown plugin with 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

Download Now!

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 it s 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 counter 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 may be 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 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 may be a website, promotion or sale etc.