使用ASP.NET，Angular 5，EF core和Highcharts创建轮询应用程序（上）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用ASP.NET，Angular 5，EF core和Highcharts创建轮询应用程序（上），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10432字，纯文字阅读大概需要15分钟。

内容图文

下载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核心数据库第一种方法成功创建了我们的模型。现在，再创建一个类文件来处理数据库相关的操作。右键单击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

内容总结

以上是互联网集市为您收集整理的使用ASP.NET，Angular 5，EF core和Highcharts创建轮询应用程序（上）全部内容，希望文章能够帮你解决使用ASP.NET，Angular 5，EF core和Highcharts创建轮询应用程序（上）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---