Skills Counter Dynamically in ASP.Net MVC

Introduction

 

This article will explain, how to create counter count of skills dynamically in ASP.Net MVC.  

 

This article requires the following basic understanding

• Bootstrap 4
• CSS3
• JQuery
• MVC
• Entity Framework
• View Model
• SQL Server 

Step-1 Open your favorite SQL server database, any version.  It doesn’t really matter.  Create tables’ frontend technology and backend technology.

CREATE TABLE [dbo].[FrontendTechnology](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [ProgrammingLanguage] [nvarchar](50) NULL,
    [Percentage] [int] NULL,
 CONSTRAINT [PK_FrontendTechnology] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

CREATE TABLE [dbo].[BackendTechnology](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [ProgrammingLanguage] [nvarchar](50) NULL,
    [Percentage] [int] NULL,
 CONSTRAINT [PK_BackendTechnology] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

Step-2 Now, open your favorite visual studio 2017, or any version you wish.

 

 

Step-3 Create an empty project in visual studio and give an appropriate name.  Check MVC checkbox and click on OK.

 

 

 

Step-4 Right-click on the Models folder and add a database model.  Add Entity Framework now.  For that, right-click on Models folder, select Add, then select New Item.

 

 

 

You will get a window; from there, select Data from the left panel and choose ADO.NET Entity Data Model, give it the name SkillModel (this name is not mandatory, you can give any name) and click "Add"

 

 

 

After you click on "Add a window", the wizard will open.  Choose EF Designer, from the database, and click "Next".

 

 

 

After clicking on "Next", a window will appear.  Choose New Connection.  Another window will appear.  Add your server name.  If it is local, then enter a dot (.). Choose your database and click "OK".

 

 

 

The connection will be added.  If you wish, save the connection name, as you want.  You can change the name of your connection below.  It will save the connection in the web config.  Now, click "Next".

 

 

 

After clicking on NEXT, another window will appear.  Choose the database table name, as shown, in the below screenshot and click "Finish".

 

 

 

Entity Framework gets added and the respective class gets generated under the Models folder.

 

 

 

Step 5 Right-click on Controllers folder and add a controller.

 

 

 

A window will appear.  Choose MVC5 Controller-Empty and click "Add".

 

 

 

After clicking on "Add", another window will appear with DefaultController.  Change the name to HomeController and click "Add".  The HomeController will be added under the Controllers folder.  Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home.

 

 

 

Step-6 Right click on project “Add Folder” and name it ViewModel.  Now, right click on this folder and “Add Class”, with name SkillViewModel, and write following code.

using MvcSkillsCounter_Demo.Models;
using System.Collections.Generic;

namespace MvcSkillsCounter_Demo.ViewModel
{
    public class SkillViewModel
    {
        public IEnumerable<FrontendTechnology> FrontendTechnologies { get; set; }
        public IEnumerable<BackendTechnology> BackendTechnologies { get; set; }
    }
}

Controller Class Code

using MvcSkillsCounter_Demo.Models;
using MvcSkillsCounter_Demo.ViewModel;
using System.Linq;
using System.Web.Mvc;

namespace MvcSkillsCounter_Demo.Controllers
{
    public class HomeController : Controller
    {
        private readonly MvcDemoContext db = new MvcDemoContext();

        public ActionResult Index()
        {
            var skillsCounter = new SkillViewModel
            {
                FrontendTechnologies = db.FrontendTechnologies.ToList(),
                BackendTechnologies = db.BackendTechnologies.ToList()
            };
            return View(skillsCounter);
        }
    }
}

Step-7 Right click on the Index action method in controller class “Add View”

 

 

 

 

 

Index View Code

@model MvcSkillsCounter_Demo.ViewModel.SkillViewModel

@{
    ViewBag.Title = "Index";
}

<div class="container py-4">
    <h3 class="technology">Frontend Technologies</h3>
    <div class="row">
        @foreach (var frontend in Model.FrontendTechnologies)
        {
            <div class="col-md-2">
                <div class="skill">
                    <span class="title">@frontend.ProgrammingLanguage</span>
                    <p class="counter"><span class="skill-count">@frontend.Percentage</span><span>%</span></p>
                </div>
            </div>
        }
    </div>
    <h3 class="technology">Backend Technologies</h3>
    <div class="row">
        @foreach (var backend in Model.BackendTechnologies)
        {
        <div class="col-md-2">
            <div class="skill">
                <span class="title">@backend.ProgrammingLanguage</span>
                <p class="counter"><span class="skill-count">@backend.Percentage</span><span>%</span></p>
            </div>
        </div>
        }
    </div>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.skill-count').each(function () {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                    duration: 5000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
        });
    });
</script>

Step-8 Install latest version of bootstrap and JQuery from NuGet package manager, under tool in visual studio.

 

Step-9 Write following CSS, if you wish a similar design in Site.css file under content folder.

.technology {
    font-size: 18px;
    color: darkblue;
    text-transform: uppercase;
    margin: 15px 0 15px 0;
}
.skill {
    text-align: center;
    border: 1px solid var(--gray);
    border-radius: 5px;
    box-shadow: 2px 2px 4px var(--gray);
    padding: 10px;
}
.title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pink);
    text-align: center;
}
.counter {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid var(--pink);
    border-radius: 50%;
    background: var(--pink);
    color: white;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 700;
    margin:auto;
}

Step-10 Build your project and Run by pressing Ctrl+F5