下載Highcharts最新版本

在本教程中，我們將使用ASP.NET Core，Visual Studio 2017，SQL Server 2014，Angular 5和Entity Framework核心創建在線輪詢應用程序。由于這是印度IPL賽季（印度專業Twenty20板球聯賽），我們將為“誰將贏得2018年IPL”創建一個在線投票。輪詢結果將使用Highcharts顯示為柱形圖。你不需要成為Cricket粉絲來遵循這個代碼。（如果你是，建議你不要在編碼時看板球）。當然，此代碼可用于創建任何其他主題的民意調查！

最終結果如下面的GiF：

先決條件

• 安裝.NET Core 2.0.0或更高版本的SDK 。
• 安裝最新版本的Visual Studio 2017 Community Edition 。
• 下載并從安裝最新版本的Node.js的位置。
• SQL Server 2008或更高版本。

創建表

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

現在，我們將輸入團隊名稱并將投票計數初始化為零。執行以下insert語句。

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)

創建MVC Web應用程序

打開Visual Studio并選擇File - > New - > Project。 選擇項目后，將打開“New Project”對話框。從左側面板中選擇Visual C＃菜單中的.NET Core。 然后，從可用的項目類型中選擇“ASP.NET Core Web Application”。將項目名稱設為IPLPollDemo，然后按確定。

單擊“OK”后，將打開一個新對話框，要求您選擇項目模板。您可以在模板窗口的左上角觀察兩個下拉菜單。從這些下拉列表中選擇“.NET Core”和“ASP.NET Core 2.0”。然后，選擇“Angular”模板并按OK。

現在，我們的項目已經創建。 由于我們在應用程序中使用Highcharts，因此我們需要為其安裝軟件包。打開文件并將以下代碼放入其中。package.json

{  
  "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"  
  }  
} 

備注

如果在package.json文件中發現Angular的版本為4，則復制上面的完整代碼以將Angular版本更新為5.如果您已經在使用Angular 5，則只需復制行以包含Highcharts依賴項。

現在，關閉Visual Studio實例并導航到包含文件的文件夾并打開命令提示符。執行命令以安裝所有必需的依賴項。請參考下圖：package.jsonnpm install

使用Visual Studio 2017打開項目。您可以在解決方案資源管理器中觀察文件夾結構，如下圖所示。

在這里，我們有控制器和視圖文件夾。我們不會觸及本教程的Views文件夾，因為我們將使用Angular來處理UI。Controllers文件夾將包含我們的Web API控制器。我們感興趣的是我們的應用程序的客戶端所在的ClientApp文件夾。在ClientApp / app / components文件夾中，我們已經創建了很少的組件，默認情況下在VS 2017中提供了Angular模板。這些組件不會影響我們的應用程序，但是為了本教程，我們將刪除fetchdata和來自ClientApp / app / components的計數器文件夾。

將模型應用于應用程序

我們使用Entity Framework核心數據庫的第一種方法來創建我們的模型。導航到工具 - > NuGet包管理器 - >包管理器控制臺。 我們必須為我們所針對的數據庫提供程序安裝軟件包，在這種情況下是SQL Server。運行以下命令： Install-Package Microsoft.EntityFrameworkCore.SqlServer

由于我們使用Entity Framework Tools從現有數據庫創建模型，因此我們也將安裝工具包。運行以下命令： Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables IplTeams 不要忘記放置自己的連接字符串（在“”內）。成功執行此命令后，您可以觀察到已創建的Models文件夾，它包含兩個類文件和。我們使用EF核心數據庫第一種方法成功創建了我們的模型?，F在，再創建一個類文件來處理數據庫相關的操作。右鍵單擊Models文件夾，然后選擇Add - > Class。為您的班級命名，然后點擊添加按鈕 此時，Models文件夾將具有以下結構：

myTestDBContext.csIplTeams.cs
TeamDataAccessLayer.cs

打開并輸入以下代碼來處理數據庫操作。TeamDataAccessLayer.cs

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;  
            }  
        }  
    }  
}  

定義了三種方法：

1. GetAllTeams - 從數據庫中獲取所有八個團隊的列表。
2. RecordVote - 在用戶提交他/她的投票后更新每個團隊的投票計數。
3. GetTotalVoteCount - 獲得所有團隊的投票總和。

繼續創建我們的Web API控制器。

將Web API Controller添加到應用程序

右鍵單擊Controllers文件夾，然后選擇Add - > New Item。 將打開“Add New Item/添加新項”對話框。從左側面板中選擇ASP.NET，然后從模板面板中選擇“Web API Controller Class”并將其命名為。單擊添加。TeamController.cs

這將創建我們的Web API TeamController類，我們將在其中放置所有業務邏輯。我們將調用TeamDataAccessLayer獲取數據的方法并將數據傳遞給Angular前端。 打開文件并將以下代碼放入其中。TeamController.cs

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);  
        }  
    }  
}  

創建Angular服務

接下來，創建一個Angular服務，將Web API響應轉換為JSON并將其傳遞給我們的組件。右鍵單擊ClientApp / app文件夾，然后單擊添加 - >新建文件夾，并將該文件夾命名為服務。

右鍵單擊Sevices文件夾，然后選擇Add - > New Item。將打開“添加新項”對話框。從左側面板中選擇Scripts，然后從templates面板中選擇“TypeScript File”，并將名稱設置為teamservice.service.ts。單擊添加。

將以下代碼放在文件中。teamservice.service.ts

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);  
    }  
}  

在構造函數中，我們注入了應用程序的HTTP服務和基本URL以啟用Web API調用。之后我們定義了三個函數來調用我們的Web API并將結果轉換為JSON格式。我們將從組件中調用這些函數。 此時，您可能會收到錯誤“參數'員工'在文件中隱式包含'任何'類型” 。如果遇到此問題，請在文件中添加以下行。empservice.service.ts tsconfig.json "noImplicitAny": false

購買TeeChart Pro AciveX正版授權，請點擊“”喲！