IplTeams<\/code> table. Execute the following commands to create the table.<\/p>\nCREATE TABLE IplTeams \r\n( \r\nTeamId INTEGER IDENTITY(1,1) PRIMARY KEY, \r\nTeamName VARCHAR(30) NOT NULL, \r\nVoteCount INTEGER NOT NULL \r\n) \r\n<\/pre>\nNow, we will put in the team names and initialize the vote count to zero. Execute the following insert statements.<\/p>\n
INSERT INTO IplTeams VALUES ('Chennai Super Kings',0) \r\nINSERT INTO IplTeams VALUES ('Delhi Daredevils',0) \r\nINSERT INTO IplTeams VALUES ('Kings XI Punjab',0) \r\nINSERT INTO IplTeams VALUES ('Kolkata Knight Riders',0) \r\nINSERT INTO IplTeams VALUES ('Mumbai Indians',0) \r\nINSERT INTO IplTeams VALUES ('Rajasthan Royals',0) \r\nINSERT INTO IplTeams VALUES ('Royal Challengers Bangalore',0) \r\nINSERT INTO IplTeams VALUES ('Sunrisers Hyderabad',0)<\/pre>\nCreate MVC Web Application<\/h2>\n
Open Visual Studio and select File -> New -> Project.
\nAfter selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel.
\nThen, select \u201cASP.NET Core Web Application\u201d from available project types. Put the name of the project as IPLPollDemo<\/code> and press OK.<\/p>\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06155333\/CreateProejct_1.png\")
<\/p>\n
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 \u201c.NET Core\u201d and \u201cASP.NET Core 2.0\u201d from these dropdowns. Then, select \u201cAngular\u201d template and press OK.<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06155451\/CreateProejct_2.png\")
<\/p>\n
Now, our project is created.
\nSince we are using Highcharts in our application, we need to install packages for it. Open package.json<\/code> file and put in the following code into it.<\/p>\n{ \r\n \"name\": \"IPLPollDemo\", \r\n \"private\": true, \r\n \"version\": \"0.0.0\", \r\n \"scripts\": { \r\n \"test\": \"karma start ClientApp\/test\/karma.conf.js\" \r\n }, \r\n \"devDependencies\": { \r\n \"@angular\/animations\": \"5.2.10\", \r\n \"@angular\/common\": \"5.2.10\", \r\n \"@angular\/compiler\": \"5.2.10\", \r\n \"@angular\/compiler-cli\": \"5.2.10\", \r\n \"@angular\/core\": \"5.2.10\", \r\n \"@angular\/forms\": \"5.2.10\", \r\n \"@angular\/http\": \"5.2.10\", \r\n \"@angular\/platform-browser\": \"5.2.10\", \r\n \"@angular\/platform-browser-dynamic\": \"5.2.10\", \r\n \"@angular\/platform-server\": \"5.2.10\", \r\n \"@angular\/router\": \"5.2.10\", \r\n \"@ngtools\/webpack\": \"6.0.0-rc.10\", \r\n \"@types\/chai\": \"4.1.3\", \r\n \"@types\/highcharts\": \"^5.0.22\", \r\n \"@types\/jasmine\": \"2.8.6\", \r\n \"@types\/webpack-env\": \"1.13.6\", \r\n \"angular2-router-loader\": \"0.3.5\", \r\n \"angular2-template-loader\": \"0.6.2\", \r\n \"aspnet-prerendering\": \"^3.0.1\", \r\n \"aspnet-webpack\": \"^2.0.1\", \r\n \"awesome-typescript-loader\": \"5.0.0\", \r\n \"bootstrap\": \"4.1.1\", \r\n \"chai\": \"4.1.2\", \r\n \"css\": \"2.2.1\", \r\n \"css-loader\": \"0.28.11\", \r\n \"es6-shim\": \"0.35.3\", \r\n \"event-source-polyfill\": \"0.0.12\", \r\n \"expose-loader\": \"0.7.5\", \r\n \"extract-text-webpack-plugin\": \"3.0.2\", \r\n \"file-loader\": \"1.1.11\", \r\n \"html-loader\": \"0.5.5\", \r\n \"isomorphic-fetch\": \"2.2.1\", \r\n \"jasmine-core\": \"3.1.0\", \r\n \"jquery\": \"3.3.1\", \r\n \"json-loader\": \"0.5.7\", \r\n \"karma\": \"2.0.2\", \r\n \"karma-chai\": \"0.1.0\", \r\n \"karma-chrome-launcher\": \"2.2.0\", \r\n \"karma-cli\": \"1.0.1\", \r\n \"karma-jasmine\": \"1.1.1\", \r\n \"karma-webpack\": \"3.0.0\", \r\n \"preboot\": \"6.0.0-beta.3\", \r\n \"raw-loader\": \"0.5.1\", \r\n \"reflect-metadata\": \"0.1.12\", \r\n \"rxjs\": \"^6.0.0\", \r\n \"style-loader\": \"0.21.0\", \r\n \"to-string-loader\": \"1.1.5\", \r\n \"typescript\": \"2.8.3\", \r\n \"url-loader\": \"1.0.1\", \r\n \"webpack\": \"4.6.0\", \r\n \"webpack-hot-middleware\": \"2.22.1\", \r\n \"webpack-merge\": \"4.1.2\", \r\n \"zone.js\": \"0.8.26\" \r\n }, \r\n \"dependencies\": { \r\n \"angular-highcharts\": \"^5.2.12\", \r\n \"highcharts\": \"^6.1.0\" \r\n } \r\n} \r\n<\/pre>\nRemark<\/b>
\nIf 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.<\/i><\/p>\n
Now, close the Visual Studio instance and navigate to the folder containing package.json<\/code> file and open command prompt. Execute npm install<\/code> command to install all the required dependencies. Refer to the image below:<\/p>\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06155840\/Cmd.png\")
<\/p>\n
Open your project using Visual Studio 2017. You can observe the folder structure in Solution Explorer as shown in the below image.<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06155934\/solutionexp_1.png\")
<\/p>\n
Here, we have our Controllers and Views folders. We won\u2019t 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<\/i> folder, we already have few components created which are provided by default with the Angular template in VS 2017. These components won\u2019t affect our application, but for the sake of this tutorial, we will delete fetchdata and counter folders from ClientApp\/app\/components<\/i>.<\/p>\nScaffolding the Model to the Application<\/h2>\n
We are using Entity Framework core database first approach to create our models. Navigate to Tools -> NuGet Package Manager -> Package Manager Console.
\nWe have to install the package for the database provider that we are targeting which is SQL Server in this case. Run the following command:
\nInstall-Package Microsoft.EntityFrameworkCore.SqlServer<\/code><\/p>\nSince 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:
\nScaffold-DbContext \"Your connection string here\" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables IplTeams <\/code><\/p>\nDo 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<\/code> and IplTeams.cs<\/code>. We have successfully created our Models using EF core database first approach.
\nNow, create one more class file to handle database related operations
\nRight click on Models folder and select Add -> Class. Name your class TeamDataAccessLayer.cs<\/code> and click Add button. At this point of time, the Models folder will have the following structure:<\/p>\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06160803\/solutionexp_2.png\")
<\/p>\n
Open TeamDataAccessLayer.cs<\/code> and put the following code to handle database operations.<\/p>\nusing Microsoft.EntityFrameworkCore; \r\nusing System; \r\nusing System.Collections.Generic; \r\nusing System.Linq; \r\nusing System.Threading.Tasks; \r\n \r\nnamespace IPLPollDemo.Models \r\n{ \r\n public class TeamDataAccessLayer \r\n { \r\n myTestDBContext db = new myTestDBContext(); \r\n \r\n \/\/To get the list of all teams from database \r\n public IEnumerable GetAllTeams() \r\n { \r\n try \r\n { \r\n return db.IplTeams.ToList(); \r\n } \r\n catch \r\n { \r\n throw; \r\n } \r\n } \r\n \r\n \/\/To update the vote count of a team by one \r\n public int RecordVote(IplTeams iplTeam) \r\n { \r\n try \r\n { \r\n \r\n db.Database.ExecuteSqlCommand(\"update IplTeams set VoteCount = VoteCount + 1 where TeamID = {0}\", parameters: iplTeam.TeamId); \r\n \r\n return 1; \r\n } \r\n catch \r\n { \r\n throw; \r\n } \r\n } \r\n \r\n \/\/To get the total votes count \r\n public int GetTotalVoteCount() \r\n { \r\n try \r\n { \r\n return db.IplTeams.Sum(t => t.VoteCount); \r\n } \r\n catch \r\n { \r\n throw; \r\n } \r\n } \r\n } \r\n} \r\n<\/pre>\nIn this class we have defined three methods.<\/p>\n
\n- GetAllTeams \u2013 To get the list of all the eight teams from the database.<\/li>\n
- RecordVote \u2013 To update the vote count for each team after the user submits his\/her vote.<\/li>\n
- GetTotalVoteCount \u2013 To get the sum of votes of all the teams.<\/li>\n<\/ol>\n
Now, let\u2019s proceed to create our Web API Controller.<\/p>\n
Adding the Web API Controller to the Application<\/h2>\n
Right click on Controllers folder and select Add -> New Item.<\/p>\n
An \u201cAdd New Item\u201d dialog box will open. Select ASP.NET from the left panel, then select \u201cWeb API Controller Class\u201d from templates panel and put the name as TeamController.cs<\/code>. Click Add.
\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06161058\/AddController.png\")
<\/p>\nThis creates our Web API TeamController class, where we will put all our business logic. We will call the methods of TeamDataAccessLayer<\/code> to fetch data and pass on the data to the Angular frontend.
\nOpen TeamController.cs<\/code> file and put the following code into it.<\/p>\nusing System; \r\nusing System.Collections.Generic; \r\nusing System.Linq; \r\nusing System.Threading.Tasks; \r\nusing IPLPollDemo.Models; \r\nusing Microsoft.AspNetCore.Mvc; \r\n \r\nnamespace IPLPollDemo.Controllers \r\n{ \r\n [Route(\"api\/Team\")] \r\n public class TeamController : Controller \r\n { \r\n TeamDataAccessLayer objTeam = new TeamDataAccessLayer(); \r\n \r\n [HttpGet] \r\n [Route(\"GetTeamList\")] \r\n public IEnumerable GetTeamList() \r\n { \r\n return objTeam.GetAllTeams(); \r\n } \r\n \r\n [HttpGet] \r\n [Route(\"TotalVotes\")] \r\n public int TotalVotes() \r\n { \r\n return objTeam.GetTotalVoteCount(); \r\n } \r\n \r\n [HttpPut] \r\n [Route(\"UpdateVoteCount\")] \r\n public int UpdateVoteCount([FromBody] IplTeams team) \r\n { \r\n return objTeam.RecordVote(team); \r\n } \r\n } \r\n} \r\n<\/pre>\nCreate the Angular Service<\/h2>\n
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.<\/p>\n
Right click on Sevices folder and select Add -> New Item. An \u201cAdd New Item\u201d dialog box will open. Select Scripts from the left panel, then select “TypeScript File\u201d from templates panel, and put the name as teamservice.service.ts. Click Add.<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06161304\/AddComponent.png\")
<\/p>\n
Put the below code in teamservice.service.ts<\/code> file.<\/p>\nimport { Injectable, Inject } from '@angular\/core'; \r\nimport { Http, Response } from '@angular\/http'; \r\nimport { Observable } from 'rxjs\/Observable'; \r\nimport { Router } from '@angular\/router'; \r\nimport 'rxjs\/add\/operator\/map'; \r\nimport 'rxjs\/add\/operator\/catch'; \r\nimport 'rxjs\/add\/observable\/throw'; \r\n \r\n \r\n@Injectable() \r\nexport class TeamService { \r\n myAppUrl: string = \"\"; \r\n \r\n constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) { \r\n this.myAppUrl = baseUrl; \r\n } \r\n \r\n getTeams() { \r\n return this._http.get(this.myAppUrl + 'api\/Team\/GetTeamList') \r\n .map((response: Response) => response.json()) \r\n .catch(this.errorHandler); \r\n } \r\n \r\n getTotalVotes() { \r\n return this._http.get(this.myAppUrl + 'api\/Team\/TotalVotes') \r\n .map((response: Response) => response.json()) \r\n .catch(this.errorHandler); \r\n } \r\n \r\n saveVotes(team) { \r\n return this._http.put(this.myAppUrl + 'api\/Team\/UpdateVoteCount', team) \r\n .map((response: Response) => response.json()) \r\n .catch(this.errorHandler); \r\n } \r\n \r\n errorHandler(error: Response) { \r\n console.log(error); \r\n return Observable.throw(error); \r\n } \r\n} \r\n<\/pre>\nIn 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.
\nAt this point of time, you might get an error \u201cParameter ’employee’ implicitly has an ‘any’ type\u201d in empservice.service.ts<\/code> file.
\nIf you encounter this issue, then add the following line inside tsconfig.json<\/code> file.<\/p>\n\"noImplicitAny\": false<\/code><\/p>\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06161458\/tsconfig.png\")
<\/p>\n
Now, it is time to create our components.<\/p>\n
Creating Angular Components<\/h2>\n
We add two Angular components to our application.<\/p>\n
\n- Poll component \u2013 to display the team names and a corresponding button to vote for the team.<\/li>\n
- Result component \u2013 to display the poll results.<\/li>\n<\/ol>\n
Right click on ClientApp\/app\/components<\/code> folder and select Add -> New Folder and name the folder as Poll.
\nRight click on Poll folder and select Add -> New Item. An \u201cAdd New Item\u201d dialog box will open. Select Scripts from the left panel, then select \u201cTypeScript File\u201d from templates panel, and put the name as IPLPoll.component.ts.<\/code> Click Add. This will add a typescript file inside poll folder.<\/p>\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06161652\/AddService.png\")
<\/p>\n
Right click on Poll folder and select Add -> New Item. An \u201cAdd New Item\u201d dialog box will open. Select ASP.NET Core from the left panel, then select \u201cHTML Page\u201d from templates panel, and put the name as IPLPoll.component.html.<\/code> Click Add. This will add an HTML file inside Poll folder.<\/p>\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06161804\/AddHtml.png\")
<\/p>\n
Similarly create a Results folder inside ClientApp\/app\/components<\/code> folder and add PollResult.component.ts<\/code> typescript file and PollResult.component.html<\/code> HTML file to it.<\/p>\nNow, our ClientApp\/app will have the following structure.
\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06161906\/clientfolder.png\")
<\/p>\n
Put the following code in IPLPoll.component.ts<\/code> file.<\/p>\nimport { Component, OnInit } from '@angular\/core'; \r\nimport { Http, Headers } from '@angular\/http'; \r\nimport { PercentPipe } from '@angular\/common'; \r\nimport { Router, ActivatedRoute } from '@angular\/router'; \r\nimport { TeamService } from '..\/..\/services\/teamservice.service' \r\n \r\n@Component({ \r\n templateUrl: '.\/IPLPoll.component.html', \r\n}) \r\n \r\nexport class IPLPoll { \r\n \r\n public teamList: TeamData[]; \r\n \r\n constructor(public http: Http, private _teamService: TeamService, private _router: Router) { \r\n this.getTeamList(); \r\n } \r\n \r\n getTeamList() { \r\n this._teamService.getTeams().subscribe( \r\n data => this.teamList = data \r\n ) \r\n } \r\n \r\n save(team) { \r\n \r\n this._teamService.saveVotes(team) \r\n .subscribe((data) => { \r\n this._router.navigate(['\/results']); \r\n }) \r\n } \r\n} \r\nexport class TeamData { \r\n teamId: number; \r\n teamName: string; \r\n voteCount: number; \r\n voteShare: number; \r\n} \r\n<\/pre>\nWe have created a class TeamData<\/code> to hold the details of each team such as teamId<\/code>, teamName<\/code>, voteCoun<\/code>t and voteShare<\/code>. Inside our component class IPLPoll<\/code> , we have created an array variable teamList of type TeamData<\/code>. The getTeamList<\/code> method calls the getTeam<\/code> function of our service TeamService<\/code>, to get the list of teams from database and assign it to teamList<\/code> variable. The getTeamList<\/code> method is called inside the constructor so that the team data will be displayed as the page loads.
\nThe save method is invoked when the user votes for his favorite team. This calls saveVotes<\/code> function of our service to increment the vote count of that particular team. The user is then redirected to PollResults<\/code> component to view the poll results.<\/p>\nOpen IPLPoll.component.html<\/code> file and put the following code into it.<\/p>\n<h1>Who Will Win IPL 2018 ?<\/h1> \r\n \r\n<h3>Vote for your favourite team !!! <\/h3> \r\n<hr \/> \r\n \r\n<p *ngIf=\"!teamList\"><em>Loading...<\/em><\/p> \r\n \r\n<table class='table' *ngIf=\"teamList\"> \r\n <thead> \r\n <tr> \r\n <th>Team Name<\/th> \r\n <\/tr> \r\n <\/thead> \r\n <tbody> \r\n <tr *ngFor=\"let team of teamList\"> \r\n <td>{{ team.teamName }}<\/td> \r\n <td> \r\n <button (click)=\"save(team)\" class=\"btn btn-primary\"> Vote <i class=\"glyphicon glyphicon-thumbs-up\"><\/i><\/button> \r\n <\/td> \r\n <\/tr> \r\n <\/tbody> \r\n<\/table> \r\n<\/pre>\nThis 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<\/code> page.<\/p>\nNow open PollResults.component.ts<\/code> file and put the following code into it:<\/p>\nimport { Component, OnInit } from '@angular\/core'; \r\nimport { Http, Headers } from '@angular\/http'; \r\nimport { PercentPipe } from '@angular\/common'; \r\nimport { Router, ActivatedRoute } from '@angular\/router'; \r\nimport { TeamData } from '..\/poll\/IPLPoll.component'; \r\nimport { TeamService } from '..\/..\/services\/teamservice.service'; \r\n \r\nimport { Observable } from 'rxjs\/Observable'; \r\nimport 'rxjs\/add\/observable\/zip'; \r\n \r\nimport { Chart } from 'angular-highcharts'; \r\n \r\n@Component({ \r\n templateUrl: '.\/PollResult.component.html', \r\n}) \r\n \r\nexport class PollResult { \r\n \r\n public chart: any; \r\n public totalVotes: number; \r\n public resultList: TeamData[]; \r\n \r\n constructor(public http: Http, private _teamService: TeamService) { \r\n \r\n Observable.zip(this._teamService.getTotalVotes(), this._teamService.getTeams()) \r\n .subscribe(([totalVoteCount, teamListData]) => { \r\n this.totalVotes = totalVoteCount; \r\n this.resultList = teamListData; \r\n \r\n for (let i = 0; i < teamListData.length; i++) { \r\n teamListData[i].voteShare = (((teamListData[i].voteCount) \/ this.totalVotes) * 100); \r\n } \r\n \r\n this.createCharts(); \r\n }); \r\n } \r\n \r\n createCharts() { \r\n this.chart = new Chart({ \r\n chart: { \r\n type: 'column' \r\n }, \r\n title: { \r\n text: 'Vote share for each team' \r\n }, \r\n xAxis: { \r\n type: 'category', \r\n labels: { \r\n rotation: -45, \r\n style: { \r\n fontSize: '13px', \r\n fontFamily: 'Verdana, sans-serif' \r\n } \r\n } \r\n }, \r\n yAxis: { \r\n min: 0, \r\n title: { \r\n text: 'Percentage of Votes' \r\n } \r\n }, \r\n legend: { \r\n enabled: false \r\n }, \r\n tooltip: { \r\n pointFormat: 'Vote: {point.y:.2f} %<\/b>' \r\n }, \r\n \r\n series: [{ \r\n type: 'column', \r\n data: [ \r\n { name: this.resultList[0].teamName, y: this.resultList[0].voteShare, color: 'rgba(253, 185, 19, 0.85)' }, \r\n { name: this.resultList[1].teamName, y: this.resultList[1].voteShare, color: 'rgba(0, 76, 147, 0.85)' }, \r\n { name: this.resultList[2].teamName, y: this.resultList[2].voteShare, color: 'rgba(170, 69, 69, 0.85)' }, \r\n { name: this.resultList[3].teamName, y: this.resultList[3].voteShare, color: 'rgba(112, 69, 143, 0.85)' }, \r\n { name: this.resultList[4].teamName, y: this.resultList[4].voteShare, color: 'rgba(0, 93, 160, 0.85)' }, \r\n { name: this.resultList[5].teamName, y: this.resultList[5].voteShare, color: 'rgba(45, 77, 157, 0.85)' }, \r\n { name: this.resultList[6].teamName, y: this.resultList[6].voteShare, color: 'rgba(0, 0, 0, 0.85)' }, \r\n { name: this.resultList[7].teamName, y: this.resultList[7].voteShare, color: 'rgba(251, 100, 62, 0.85)' } \r\n ], \r\n }] \r\n \r\n }); \r\n \r\n } \r\n} \r\n<\/pre>\nWe 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()<\/code> 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.
\nThis entire operation takes place in the constructor to display the result as the page loads.<\/p>\nThe createCharts()<\/code> 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.<\/p>\nOpen PollResults.component.html<\/code> file and put the following code into it:<\/p>\n<h2>Your vote has been registered successfully !!! <\/h2> \r\n \r\n<h3>Here are voting results <\/h3> \r\n<hr \/> \r\n \r\n<p><b>Total votes <\/b> : {{totalVotes}}<\/p> \r\n \r\n<div [chart]=\"chart\"><\/div><\/pre>\nThis 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.<\/p>\n
Defining route and navigation menu for our Application<\/h2>\n
Open \/app\/app.shared.module.ts file and put the following code into it.<\/p>\n
import { NgModule } from '@angular\/core'; \r\nimport { CommonModule } from '@angular\/common'; \r\nimport { FormsModule } from '@angular\/forms'; \r\nimport { HttpModule } from '@angular\/http'; \r\nimport { RouterModule } from '@angular\/router'; \r\nimport { ChartModule } from 'angular-highcharts'; \r\n \r\nimport { TeamService } from '.\/services\/teamservice.service' \r\nimport { AppComponent } from '.\/components\/app\/app.component'; \r\nimport { NavMenuComponent } from '.\/components\/navmenu\/navmenu.component'; \r\nimport { HomeComponent } from '.\/components\/home\/home.component'; \r\nimport { IPLPoll } from '.\/components\/Poll\/IPLPoll.component'; \r\nimport { PollResult } from '.\/components\/Results\/PollResult.component'; \r\n \r\n@NgModule({ \r\n declarations: [ \r\n AppComponent, \r\n NavMenuComponent, \r\n HomeComponent, \r\n IPLPoll, \r\n PollResult \r\n ], \r\n imports: [ \r\n CommonModule, \r\n HttpModule, \r\n FormsModule, \r\n ChartModule, \r\n RouterModule.forRoot([ \r\n { path: '', redirectTo: 'home', pathMatch: 'full' }, \r\n { path: 'home', component: HomeComponent }, \r\n { path: 'poll', component: IPLPoll }, \r\n { path: 'results', component: PollResult }, \r\n { path: '**', redirectTo: 'home' } \r\n ]) \r\n ], \r\n providers: [TeamService] \r\n}) \r\nexport class AppModuleShared { \r\n} \r\n<\/pre>\nHere we have also imported all our components and defined the route for our application as below:<\/p>\n
\n- home – To redirect to
Home<\/code> component<\/li>\n- poll – To redirect to
IPLPoll<\/code> component<\/li>\n- results – To redirect to
PollResults<\/code> component<\/li>\n<\/ul>\nOne last thing is to define the navigation menu for our application. Open \/app\/components\/navmenu\/navmenu.component.html<\/code> file and put the following code to it.<\/p>\n<div class='main-nav'> \r\n <div class='navbar navbar-inverse'> \r\n <div class='navbar-header'> \r\n <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'> \r\n <span class='sr-only'>Toggle navigation<\/span> \r\n <span class='icon-bar'><\/span> \r\n <span class='icon-bar'><\/span> \r\n <span class='icon-bar'><\/span> \r\n <\/button> \r\n <a class='navbar-brand' [routerLink]=\"['\/home']\">IPLPollDemo<\/a> \r\n <\/div> \r\n <div class='clearfix'><\/div> \r\n <div class='navbar-collapse collapse'> \r\n <ul class='nav navbar-nav'> \r\n <li [routerLinkActive]=\"['link-active']\"> \r\n <a [routerLink]=\"['\/home']\"> \r\n <span class='glyphicon glyphicon-home'><\/span> Home \r\n <\/a> \r\n <\/li> \r\n <li [routerLinkActive]=\"['link-active']\"> \r\n <a [routerLink]=\"['\/poll']\"> \r\n <span class='glyphicon glyphicon-th-list'><\/span> Ipl Poll \r\n <\/a> \r\n <\/li> \r\n <\/ul> \r\n <\/div> \r\n <\/div> \r\n<\/div> \r\n<\/pre>\nAnd that\u2019s it. We have created a Poll application using angular 5 and Entity Framework core.<\/p>\n
Execution Demo<\/h2>\n
Press F5 to launch the application.
\nA 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.<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06164001\/Home_1.png\")
<\/p>\n
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 \u201c\/Poll\u201d appended to it.<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06164033\/PollPage.png\")
<\/p>\n
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.<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06164110\/Results_1.png\")
<\/p>\n
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:<\/p>\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06164145\/Results_2.png\")
<\/p>\n
Conclusion<\/h2>\n
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.<\/p>\n
Get the source code from Github<\/a> and play around. Please make sure to put your own connection string before executing the code.<\/p>\n","protected":false},"excerpt":{"rendered":"A complete tutorial on how to set up an online poll with ASP.net, Visual Studio 2017, SQL Server 2014, Angular 5, Entity Framework core and Highcharts<\/p>\n","protected":false},"author":230,"featured_media":21945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105,210],"tags":[555,822,1031],"coauthors":[755],"class_list":["post-16532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","category-tutorials","tag-net","tag-angular","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/230"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16532"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16532\/revisions"}],"predecessor-version":[{"id":29137,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/16532\/revisions\/29137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21945"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16532"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/06\/06105334\/AppDemoGif.gif\")
<\/p>\n