Creating a poll application using ASP.NET, Angular 5, EF core & Highcharts

Logos of Highcharts, ASP net , and AngularJS

 

In this tutorial, we will create an online poll application using ASP.NET Core, Visual Studio 2017, SQL Server 2014, Angular 5 and Entity Framework core. Since this is the season of IPL in India (Professional Twenty20 cricket league in India), we will create an online poll for “Who is going to win IPL 2018”. The poll results will be displayed as a column chart using Highcharts. You do not need to be a Cricket fan to follow this code. (And if you are, you are advised not to watch cricket while coding). Naturally, this code can be used to create a poll on any other topic!

The final result looks like the GiF below:

Prerequisites

  • Install .NET Core 2.0.0 or above SDK from here.
  • Install the latest version of Visual Studio 2017 Community Edition from here.
  • Download and install the latest version of Node.js from here.
  • SQL Server 2008 or above.

Source Code
Let’s dive in the source code.

Remark
Before proceeding, I would recommend you to get the source code from GitHub.

Creating Table
We will store the team data in IplTeams table. Execute the following commands to create the table.

CREATE TABLE IplTeams    
(  
TeamId INTEGER IDENTITY(1,1) PRIMARY KEY,  
TeamName VARCHAR(30) NOT NULL,  
VoteCount INTEGER NOT NULL  
) 

Now, we will put in the team names and initialize the vote count to zero. Execute the following insert statements.

INSERT INTO IplTeams VALUES ('Chennai Super Kings',0)  
INSERT INTO IplTeams VALUES ('Delhi Daredevils',0)  
INSERT INTO IplTeams VALUES ('Kings XI Punjab',0)  
INSERT INTO IplTeams VALUES ('Kolkata Knight Riders',0)  
INSERT INTO IplTeams VALUES ('Mumbai Indians',0)  
INSERT INTO IplTeams VALUES ('Rajasthan Royals',0)  
INSERT INTO IplTeams VALUES ('Royal Challengers Bangalore',0)  
INSERT INTO IplTeams VALUES ('Sunrisers Hyderabad',0)

Create MVC Web Application

Open Visual Studio and select File -> New -> Project.
After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel.
Then, select “ASP.NET Core Web Application” from available project types. Put the name of the project as IPLPollDemo and press OK.

After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select “Angular” template and press OK.

Now, our project is created.
Since we are using Highcharts in our application, we need to install packages for it. Open package.json file and put in the following code into it.

{  
  "name": "IPLPollDemo",  
  "private": true,  
  "version": "0.0.0",  
  "scripts": {  
    "test": "karma start ClientApp/test/karma.conf.js"  
  },  
  "devDependencies": {  
    "@angular/animations": "5.2.10",  
    "@angular/common": "5.2.10",  
    "@angular/compiler": "5.2.10",  
    "@angular/compiler-cli": "5.2.10",  
    "@angular/core": "5.2.10",  
    "@angular/forms": "5.2.10",  
    "@angular/http": "5.2.10",  
    "@angular/platform-browser": "5.2.10",  
    "@angular/platform-browser-dynamic": "5.2.10",  
    "@angular/platform-server": "5.2.10",  
    "@angular/router": "5.2.10",  
    "@ngtools/webpack": "6.0.0-rc.10",  
    "@types/chai": "4.1.3",  
    "@types/highcharts": "^5.0.22",  
    "@types/jasmine": "2.8.6",  
    "@types/webpack-env": "1.13.6",  
    "angular2-router-loader": "0.3.5",  
    "angular2-template-loader": "0.6.2",  
    "aspnet-prerendering": "^3.0.1",  
    "aspnet-webpack": "^2.0.1",  
    "awesome-typescript-loader": "5.0.0",  
    "bootstrap": "4.1.1",  
    "chai": "4.1.2",  
    "css": "2.2.1",  
    "css-loader": "0.28.11",  
    "es6-shim": "0.35.3",  
    "event-source-polyfill": "0.0.12",  
    "expose-loader": "0.7.5",  
    "extract-text-webpack-plugin": "3.0.2",  
    "file-loader": "1.1.11",  
    "html-loader": "0.5.5",  
    "isomorphic-fetch": "2.2.1",  
    "jasmine-core": "3.1.0",  
    "jquery": "3.3.1",  
    "json-loader": "0.5.7",  
    "karma": "2.0.2",  
    "karma-chai": "0.1.0",  
    "karma-chrome-launcher": "2.2.0",  
    "karma-cli": "1.0.1",  
    "karma-jasmine": "1.1.1",  
    "karma-webpack": "3.0.0",  
    "preboot": "6.0.0-beta.3",  
    "raw-loader": "0.5.1",  
    "reflect-metadata": "0.1.12",  
    "rxjs": "^6.0.0",  
    "style-loader": "0.21.0",  
    "to-string-loader": "1.1.5",  
    "typescript": "2.8.3",  
    "url-loader": "1.0.1",  
    "webpack": "4.6.0",  
    "webpack-hot-middleware": "2.22.1",  
    "webpack-merge": "4.1.2",  
    "zone.js": "0.8.26"  
  },  
  "dependencies": {  
    "angular-highcharts": "^5.2.12",  
    "highcharts": "^6.1.0"  
  }  
} 

Remark
If you find the version of Angular is 4 in your package.json file, then copy the full code as above to update your Angular version to 5. If you are already using Angular 5 then just copy the lines to include Highcharts dependency.

Now, close the Visual Studio instance and navigate to the folder containing package.json file and open command prompt. Execute npm install command to install all the required dependencies. Refer to the image below:

Open your project using Visual Studio 2017. You can observe the folder structure in Solution Explorer as shown in the below image.

Here, we have our Controllers and Views folders. We won’t be touching the Views folders for this tutorial since we will be using Angular to handle the UI. The Controllers folders will contain our Web API controller. The point of interest for us is the ClientApp folder where the client side of our application resides. Inside the ClientApp/app/components folder, we already have few components created which are provided by default with the Angular template in VS 2017. These components won’t affect our application, but for the sake of this tutorial, we will delete fetchdata and counter folders from ClientApp/app/components.

Scaffolding the Model to the Application

We are using Entity Framework core database first approach to create our models. Navigate to Tools -> NuGet Package Manager -> Package Manager Console.
We have to install the package for the database provider that we are targeting which is SQL Server in this case. Run the following command:
Install-Package Microsoft.EntityFrameworkCore.SqlServer

Since we are using Entity Framework Tools to create a model from the existing database, we will install the tools package as well. Run the following command:
Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables IplTeams

Do not forget to put your own connection string (inside ” “). After this command is executed successfully you can observe a Models folder has been created and it contains two class files myTestDBContext.cs and IplTeams.cs. We have successfully created our Models using EF core database first approach.
Now, create one more class file to handle database related operations
Right click on Models folder and select Add -> Class. Name your class TeamDataAccessLayer.cs and click Add button. At this point of time, the Models folder will have the following structure:

Open TeamDataAccessLayer.cs and put the following code to handle database operations.

using Microsoft.EntityFrameworkCore;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
  
namespace IPLPollDemo.Models  
{  
    public class TeamDataAccessLayer  
    {  
        myTestDBContext db = new myTestDBContext();  
  
        //To get the list of all teams from database  
        public IEnumerable GetAllTeams()  
        {  
            try  
            {  
                return db.IplTeams.ToList();  
            }  
            catch  
            {  
                throw;  
            }  
        }  
  
        //To update the vote count of a team by one  
        public int RecordVote(IplTeams iplTeam)  
        {  
            try  
            {  
  
                db.Database.ExecuteSqlCommand("update IplTeams set VoteCount = VoteCount + 1 where TeamID = {0}", parameters: iplTeam.TeamId);  
  
                return 1;  
            }  
            catch  
            {  
                throw;  
            }  
        }  
  
        //To get the total votes count   
        public int GetTotalVoteCount()  
        {  
            try  
            {  
                return db.IplTeams.Sum(t => t.VoteCount);  
            }  
            catch  
            {  
                throw;  
            }  
        }  
    }  
}  

In this class we have defined three methods.

  1. GetAllTeams – To get the list of all the eight teams from the database.
  2. RecordVote – To update the vote count for each team after the user submits his/her vote.
  3. GetTotalVoteCount – To get the sum of votes of all the teams.

Now, let’s proceed to create our Web API Controller.

Adding the Web API Controller to the Application

Right click on Controllers folder and select Add -> New Item.

An “Add New Item” dialog box will open. Select ASP.NET from the left panel, then select “Web API Controller Class” from templates panel and put the name as TeamController.cs. Click Add.

This creates our Web API TeamController class, where we will put all our business logic. We will call the methods of TeamDataAccessLayer to fetch data and pass on the data to the Angular frontend.
Open TeamController.cs file and put the following code into it.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using IPLPollDemo.Models;  
using Microsoft.AspNetCore.Mvc;  
  
namespace IPLPollDemo.Controllers  
{  
    [Route("api/Team")]  
    public class TeamController : Controller  
    {  
        TeamDataAccessLayer objTeam = new TeamDataAccessLayer();  
  
        [HttpGet]  
        [Route("GetTeamList")]  
        public IEnumerable GetTeamList()  
        {  
            return objTeam.GetAllTeams();  
        }  
  
        [HttpGet]  
        [Route("TotalVotes")]  
        public int TotalVotes()  
        {  
            return objTeam.GetTotalVoteCount();  
        }  
  
        [HttpPut]  
        [Route("UpdateVoteCount")]  
        public int UpdateVoteCount([FromBody] IplTeams team)  
        {  
            return objTeam.RecordVote(team);  
        }  
    }  
}  

Create the Angular Service

Next, create an Angular service to convert the Web API response to JSON and pass it to our component. Right click on ClientApp/app folder and then Add -> New Folder and name the folder as Services.

Right click on Sevices folder and select Add -> New Item. An “Add New Item” dialog box will open. Select Scripts from the left panel, then select “TypeScript File” from templates panel, and put the name as teamservice.service.ts. Click Add.

Put the below code in teamservice.service.ts file.

import { Injectable, Inject } from '@angular/core';  
import { Http, Response } from '@angular/http';  
import { Observable } from 'rxjs/Observable';  
import { Router } from '@angular/router';  
import 'rxjs/add/operator/map';  
import 'rxjs/add/operator/catch';  
import 'rxjs/add/observable/throw';  
  
  
@Injectable()  
export class TeamService {  
    myAppUrl: string = "";  
  
    constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) {  
        this.myAppUrl = baseUrl;  
    }  
  
    getTeams() {  
        return this._http.get(this.myAppUrl + 'api/Team/GetTeamList')  
            .map((response: Response) => response.json())  
            .catch(this.errorHandler);  
    }  
  
    getTotalVotes() {  
        return this._http.get(this.myAppUrl + 'api/Team/TotalVotes')  
            .map((response: Response) => response.json())  
            .catch(this.errorHandler);  
    }  
  
    saveVotes(team) {  
        return this._http.put(this.myAppUrl + 'api/Team/UpdateVoteCount', team)  
            .map((response: Response) => response.json())  
            .catch(this.errorHandler);  
    }  
  
    errorHandler(error: Response) {  
        console.log(error);  
        return Observable.throw(error);  
    }  
}  

In the constructor, we are injecting the HTTP service and Base URL of the application to enable web API calls. After that we have defined three functions to call our Web API and convert the result to JSON format. We will call these functions from our components.
At this point of time, you might get an error “Parameter ’employee’ implicitly has an ‘any’ type” in empservice.service.ts file.
If you encounter this issue, then add the following line inside tsconfig.json file.

"noImplicitAny": false

Now, it is time to create our components.

Creating Angular Components

We add two Angular components to our application.

  1. Poll component – to display the team names and a corresponding button to vote for the team.
  2. Result component – to display the poll results.

Right click on ClientApp/app/components folder and select Add -> New Folder and name the folder as Poll.
Right click on Poll folder and select Add -> New Item. An “Add New Item” dialog box will open. Select Scripts from the left panel, then select “TypeScript File” from templates panel, and put the name as IPLPoll.component.ts. Click Add. This will add a typescript file inside poll folder.

Right click on Poll folder and select Add -> New Item. An “Add New Item” dialog box will open. Select ASP.NET Core from the left panel, then select “HTML Page” from templates panel, and put the name as IPLPoll.component.html. Click Add. This will add an HTML file inside Poll folder.

Similarly create a Results folder inside ClientApp/app/components folder and add PollResult.component.ts typescript file and PollResult.component.html HTML file to it.

Now, our ClientApp/app will have the following structure.

Put the following code in IPLPoll.component.ts file.

import { Component, OnInit } from '@angular/core';  
import { Http, Headers } from '@angular/http';  
import { PercentPipe } from '@angular/common';  
import { Router, ActivatedRoute } from '@angular/router';  
import { TeamService } from '../../services/teamservice.service'  
  
@Component({  
    templateUrl: './IPLPoll.component.html',  
})  
  
export class IPLPoll {  
  
    public teamList: TeamData[];  
  
    constructor(public http: Http, private _teamService: TeamService, private _router: Router) {  
        this.getTeamList();  
    }  
  
    getTeamList() {  
        this._teamService.getTeams().subscribe(  
            data => this.teamList = data  
        )  
    }  
  
    save(team) {  
  
        this._teamService.saveVotes(team)  
            .subscribe((data) => {  
                this._router.navigate(['/results']);  
            })  
    }  
}  
export class TeamData {  
    teamId: number;  
    teamName: string;  
    voteCount: number;  
    voteShare: number;  
} 

We have created a class TeamData to hold the details of each team such as teamId, teamName, voteCount and voteShare. Inside our component class IPLPoll , we have created an array variable teamList of type TeamData. The getTeamList method calls the getTeam function of our service TeamService, to get the list of teams from database and assign it to teamList variable. The getTeamList method is called inside the constructor so that the team data will be displayed as the page loads.
The save method is invoked when the user votes for his favorite team. This calls saveVotes function of our service to increment the vote count of that particular team. The user is then redirected to PollResults component to view the poll results.

Open IPLPoll.component.html file and put the following code into it.

<h1>Who Will Win IPL 2018 ?</h1>  
  
<h3>Vote for your favourite team !!! </h3>  
<hr />  
  
<p *ngIf="!teamList"><em>Loading...</em></p>  
  
<table class='table' *ngIf="teamList">  
    <thead>  
        <tr>  
            <th>Team Name</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr *ngFor="let team of teamList">  
            <td>{{ team.teamName }}</td>  
            <td>  
                <button (click)="save(team)" class="btn btn-primary"> Vote <i class="glyphicon glyphicon-thumbs-up"></i></button>  
            </td>  
        </tr>  
    </tbody>  
</table> 

This html page will display the list of teams along with a Vote button besides each team. When the user clicks on any of the vote button, it will update the vote count and redirects the user to the PollResults page.

Now open PollResults.component.ts file and put the following code into it:

import { Component, OnInit } from '@angular/core';  
import { Http, Headers } from '@angular/http';  
import { PercentPipe } from '@angular/common';  
import { Router, ActivatedRoute } from '@angular/router';  
import { TeamData } from '../poll/IPLPoll.component';  
import { TeamService } from '../../services/teamservice.service';  
  
import { Observable } from 'rxjs/Observable';  
import 'rxjs/add/observable/zip';  
  
import { Chart } from 'angular-highcharts';  
  
@Component({  
    templateUrl: './PollResult.component.html',  
})  
  
export class PollResult {  
  
    public chart: any;  
    public totalVotes: number;  
    public resultList: TeamData[];  
  
    constructor(public http: Http, private _teamService: TeamService) {  
  
        Observable.zip(this._teamService.getTotalVotes(), this._teamService.getTeams())  
            .subscribe(([totalVoteCount, teamListData]) => {  
                this.totalVotes = totalVoteCount;  
                this.resultList = teamListData;  
  
                for (let i = 0; i < teamListData.length; i++) {  
                    teamListData[i].voteShare = (((teamListData[i].voteCount) / this.totalVotes) * 100);  
                }  
  
                this.createCharts();  
            });  
    }  
  
    createCharts() {  
        this.chart = new Chart({  
            chart: {  
                type: 'column'  
            },  
            title: {  
                text: 'Vote share for each team'  
            },  
            xAxis: {  
                type: 'category',  
                labels: {  
                    rotation: -45,  
                    style: {  
                        fontSize: '13px',  
                        fontFamily: 'Verdana, sans-serif'  
                    }  
                }  
            },  
            yAxis: {  
                min: 0,  
                title: {  
                    text: 'Percentage of Votes'  
                }  
            },  
            legend: {  
                enabled: false  
            },  
            tooltip: {  
                pointFormat: 'Vote: {point.y:.2f} %'  
            },  
  
            series: [{  
                type: 'column',  
                data: [  
                    { name: this.resultList[0].teamName, y: this.resultList[0].voteShare, color: 'rgba(253, 185, 19, 0.85)' },  
                    { name: this.resultList[1].teamName, y: this.resultList[1].voteShare, color: 'rgba(0, 76, 147, 0.85)' },  
                    { name: this.resultList[2].teamName, y: this.resultList[2].voteShare, color: 'rgba(170, 69, 69, 0.85)' },  
                    { name: this.resultList[3].teamName, y: this.resultList[3].voteShare, color: 'rgba(112, 69, 143, 0.85)' },  
                    { name: this.resultList[4].teamName, y: this.resultList[4].voteShare, color: 'rgba(0, 93, 160, 0.85)' },  
                    { name: this.resultList[5].teamName, y: this.resultList[5].voteShare, color: 'rgba(45, 77, 157, 0.85)' },  
                    { name: this.resultList[6].teamName, y: this.resultList[6].voteShare, color: 'rgba(0, 0, 0, 0.85)' },  
                    { name: this.resultList[7].teamName, y: this.resultList[7].voteShare, color: 'rgba(251, 100, 62, 0.85)' }  
                ],  
            }]  
  
        });  
  
    }  
}  

We are fetching the updated list of team data from the database and also the total count of votes for all the teams. We calculate the vote share of each team and then invoke the createCharts() method to create the chart of the poll result. The percentage of vote share for each team is calculated by dividing the vote obtained by each team with total number of votes.
This entire operation takes place in the constructor to display the result as the page loads.

The createCharts() method creates the columnar chart with the help of Highcharts library. The percentage of votes is selected as Y-axis and the team name is selected as X-axis. To make the things interesting the color of each column corresponds to the team jersey color.

Open PollResults.component.html file and put the following code into it:

<h2>Your vote has been registered successfully !!! </h2>  
  
<h3>Here are voting results </h3>  
<hr />  
  
<p><b>Total votes </b> : {{totalVotes}}</p>  
  
<div [chart]="chart"></div>

This HTML page is simple. We are displaying the voting results as columnar chart. Just above the chart, we are also displaying the total number of votes.

Defining route and navigation menu for our Application

Open /app/app.shared.module.ts file and put the following code into it.

import { NgModule } from '@angular/core';  
import { CommonModule } from '@angular/common';  
import { FormsModule } from '@angular/forms';  
import { HttpModule } from '@angular/http';  
import { RouterModule } from '@angular/router';  
import { ChartModule } from 'angular-highcharts';  
  
import { TeamService } from './services/teamservice.service'  
import { AppComponent } from './components/app/app.component';  
import { NavMenuComponent } from './components/navmenu/navmenu.component';  
import { HomeComponent } from './components/home/home.component';  
import { IPLPoll } from './components/Poll/IPLPoll.component';  
import { PollResult } from './components/Results/PollResult.component';  
  
@NgModule({  
    declarations: [  
        AppComponent,  
        NavMenuComponent,  
        HomeComponent,  
        IPLPoll,  
        PollResult  
    ],  
    imports: [  
        CommonModule,  
        HttpModule,  
        FormsModule,  
        ChartModule,  
        RouterModule.forRoot([  
            { path: '', redirectTo: 'home', pathMatch: 'full' },  
            { path: 'home', component: HomeComponent },  
            { path: 'poll', component: IPLPoll },  
            { path: 'results', component: PollResult },  
            { path: '**', redirectTo: 'home' }  
        ])  
    ],  
    providers: [TeamService]  
})  
export class AppModuleShared {  
}  

Here we have also imported all our components and defined the route for our application as below:

  • home – To redirect to Home component
  • poll – To redirect to IPLPoll component
  • results – To redirect to PollResults component

One last thing is to define the navigation menu for our application. Open /app/components/navmenu/navmenu.component.html file and put the following code to it.

<div class='main-nav'>  
    <div class='navbar navbar-inverse'>  
        <div class='navbar-header'>  
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>  
                <span class='sr-only'>Toggle navigation</span>  
                <span class='icon-bar'></span>  
                <span class='icon-bar'></span>  
                <span class='icon-bar'></span>  
            </button>  
            <a class='navbar-brand' [routerLink]="['/home']">IPLPollDemo</a>  
        </div>  
        <div class='clearfix'></div>  
        <div class='navbar-collapse collapse'>  
            <ul class='nav navbar-nav'>  
                <li [routerLinkActive]="['link-active']">  
                    <a [routerLink]="['/home']">  
                        <span class='glyphicon glyphicon-home'></span> Home  
                    </a>  
                </li>  
                <li [routerLinkActive]="['link-active']">  
                    <a [routerLink]="['/poll']">  
                        <span class='glyphicon glyphicon-th-list'></span> Ipl Poll  
                    </a>  
                </li>  
            </ul>  
        </div>  
    </div>  
</div> 

And that’s it. We have created a Poll application using angular 5 and Entity Framework core.

Execution Demo

Press F5 to launch the application.
A web page will open as shown in the image below. Notice the URL showing route for our home component. The navigation menu on the left shows the navigation link for Ipl Poll page.

Click on IPL Poll in the navigation menu, the menu will redirect to Poll component showing all the team names along with a vote button beside them. Notice the URL has “/Poll” appended to it.

Click on the vote button to vote for your favorite team. You will be redirected to the results page showing the poll results as a columnar chart.

Since this is the first vote, so it is showing 100% for one team. After submitting few votes across teams, you will see a chart similar to the one below:

Conclusion

We have created an online poll using ASP.NET Core, Angular 5 and Entity Framework core database first approach with the help of Visual Studio 2017 and SQL Server 2014. We also created a column chart using Highcharts to display the poll results.

Get the source code from Github and play around. Please make sure to put your own connection string before executing the code.