We will use Visual Studio 2017 and SQL Server 2014.
Take a look at the final application.
Before proceeding, I would recommend you to get the source code from GitHub.
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)
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.
{ "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" } }
Important Note
If you notice that, the Angular version is 4 in your package.json file then copy the full code as above so as to update your Angular version to 5. If you are already using angular 5 then just copy the lines to include Highcharts dependency.
We are using Entity Framework core database first approach to create our models. Navigate to Tools >> NuGet Package Manager >> Package Manager Console.
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. Hence, run the following command:
Install-Package Microsoft.EntityFrameworkCore.Tools
After you have installed both the packages, we will scaffold our model from the database tables using 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. The name of your DB Context class will be the name of your database suffixed with the word Context. Here my database name is myTestDB, hence the context class name is myTestDBContext. Hence, we have successfully created our Models using EF core database first approach.
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<IplTeams> 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; } } } }
Now, we will proceed to create our Web API Controller.
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.
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<IplTeams> 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); } } }
We will create an Angular service that will 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.
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); } }
We will be adding two Angular components to our application,
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.
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; }
The save method will be invoked when the user votes for his favorite team. This will call saveVotesfunction of our service to update the vote count of that particular team. The user will be then redirected to PollResults component to view the poll results.
<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>
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: <b>{point.y:.2f} %</b>' }, 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 will then calculate the vote share of each team and then invoke the createCharts()method to create the chart for the poll result. The percentage of vote share for each team is calculated by dividing the vote obtained by each team with the total number of votes. We are doing all these operations in our constructor to display the result as the page loads.
<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>
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 { }
<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>
A web page will open as shown in the image below. Notice the URL showing route for our home component. And navigation menu on the left showing navigation link for Ipl Poll page.
Introduction Blazor is a .NET web framework that allows us to create client-side applications using…
Introduction In this article, we are going to create a sudoku solver with the help…
Introduction In this article, we will learn how to implement Azure serverless with Blazor web…
Introduction Angular is an open-source framework that allows us to create applications for multiple platforms…
Introduction In this article, we will create an optical character recognition (OCR) application using Angular…
Introduction In this article, we will create an optical character recognition (OCR) application using Blazor…
View Comments
Hello sir,
When I created that application I face some issues with respect to angular tech, I am creating this app on visual studio 2019
please provide you skype id so we can discuss in brief