Как создать онлайн-опрос с помощью ASP.NET Core, Angular 5 и Highcharts

kak sozdat onlajn opros s pomoshhyu aspnet core angular 5 i

В этой статье мы создадим онлайн-приложение для опроса с использованием ASP.NET Core, Angular 5 и Entity Framework Core. Поскольку это сезон крикета Индийской Премьер-лиги в Индии, мы создадим онлайн-опрос по теме «Кто выиграет IPL 2018?» Результаты опроса будут отображаться в виде столбчатой ​​диаграммы, созданной с помощью Highcharts.

Мы будем использовать Visual Studio 2017 и SQL Server 2014 года.

Посмотрите на окончательную заявку.

L7xDS7yWY8CQda2CeNFcB-kgX5vOC3tMBsdY

Предпосылки

  • Отсюда установите .NET Core 2.0.0 или более поздней версии SDK.
  • Отсюда установите последнюю версию Visual Studio 2017 Community Edition.
  • Загрузите и установите последнюю версию Node.js.
  • SQL Server 2008 или более поздней версии.

Исходный код

Прежде чем продолжить, я бы рекомендовал вам получить исходный код из GitHub.

Создание таблицы

Мы будем хранить данные команды в IplTeams стол. Для создания таблицы выполните следующие команды.

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

Теперь мы введем названия команд и инициализируем подсчет голосов до нуля. Выполните следующие операторы вставки.

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

Откройте Visual Studio и выберите Файл >> Новый >> Проект. После выбора проекта откроется диалоговое окно Новый проект. Выберите .NET Core в меню Visual C# на левой панели.

Затем выберите ASP.NET Core Web Application из доступных типов проектов. Введите название проекта как IPPollDemo и нажмите OK.

не найдено

После нажатия ОК откроется новое диалоговое окно с просьбой выбрать шаблон проекта. Вы увидите два нисходящих меню в верхнем левом углу окна шаблона. Выберите «.NET Core» и «ASP.NET Core 2.0» в раскрывающемся меню. Затем выберите шаблон «Угловой» и нажмите OK.

9CM3t5cdgS3UmU1ekMhYF3WHHIz4b10WlZKi

Теперь наш проект создан.

Поскольку мы используем 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"    }  }

Здесь мы добавили зависимость Highcharts в строки 22, 64 и 65.

Важное примечание: Если у вас есть версия Angular 4 package.json файл, а затем скопируйте полный код, как описано выше, чтобы обновить вашу версию Angular до 5. Если вы уже используете angular 5, просто скопируйте строки, чтобы включить зависимость Highcharts.

Теперь закройте экземпляр Visual Studio и перейдите в папку проекта, содержащую файл package.json файл и откройте командную строку. Выполнить «npm установить команду для установления всех требуемых зависимостей. Обратитесь к картинке ниже:

не найдено

После успешного выполнения команды откройте проект Visual Studio. Вы увидите структуру папок в Solution Explorer, как показано на рисунке ниже.

не найдено

Вот, имеем свое Контроллеры и Просмотры папки. Мы не будем прикасаться Просмотры папки для этого учебника, поскольку мы будем использовать Angular для обработки пользовательского интерфейса.

The Контроллеры папки будут содержать наш контроллер Web API. Нас интересует папка ClientApp, где находится клиентская сторона нашей программы.

Внутри ClientApp/app/components мы уже создали несколько компонентов, которые по умолчанию предоставляются с шаблоном Angular в VS 2017. Эти компоненты не будут влиять на нашу программу, но ради этого учебника мы удалим fetchdata и счетчик папки из ClientApp/app/components.

Составление модели в программу

Мы используем первый подход к базовой базе данных Entity Framework для создания наших моделей. Перейти к Инструменты >> Диспетчер пакетов NuGet >> Консоль диспетчера пакетов.

Мы должны установить пакет для поставщика базы данных, на который мы ориентируемся, а в данном случае это SQL Server. Итак, теперь выполните следующую команду:

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Поскольку мы используем Entity Framework Tools для создания модели из существующей базы данных, мы также установим пакет инструментов. Выполните следующую команду:

Install-Package Microsoft.EntityFrameworkCore.Tools

После того, как вы установили оба пакета, мы будем составлять нашу модель из таблиц базы данных с помощью такой команды:

Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables IplTeams

Примечание: Не забудьте ввести собственную строку подключения (внутри « »).

После успешного выполнения этой команды вы увидите, что папка Models была создана и содержит два класса: myTestDBContext.cs и IplTeams.cs. Мы успешно создали наши модели, используя первый подход к базовой базе данных EF.

Теперь мы создадим еще один файл класса для обработки операций, связанных с базой данных.

Щелкните правой кнопкой мыши на Модели папку и выберите Добавить >> Класс. Назовите свое класс TeamDataAccessLayer.cs и clicктон кнопка Добавить. Сейчас папка Models будет иметь такую ​​структуру.

не найдено

ОТКРЫТО 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<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;              }          }      }  }

В этом классе мы определили три способа.

  1. GetAllTeams — список всех восьми команд из базы данных.
  2. RecordVote — обновление подсчета голосов для каждой команды после того, как пользователь подает свой голос.
  3. GetTotalVoteCount — получение суммы голосов всех команд.

Теперь мы создадим наш контроллер веб-API.

Добавление контроллера веб-API в программу

Щелкните правой кнопкой мыши на Контроллеры папку и выберите Добавить >> Новый элемент.

Откроется диалоговое окно «Добавить новый элемент». Выберите ASP.NET на панели слева, затем выберите «Класс контроллера веб-API» на панели шаблонов и назовите его TeamController.cs. Щелкните Добавить.

kIXTfjNgJLHUsxkVQI4OfFD6YrwA56EnGOFf

Это создаст наш веб-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<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);          }      }  }

Создайте службу Angular

Мы создадим службу Angular, которая превратит ответ Web API в JSON и передаст ее нашему компоненту. Щелкните правой кнопкой мыши на Клиентская программа/приложение папку, а затем Добавить >> Новая папка и назовите згиер как Seрпороки.

Щелкните правой кнопкой мыши папку «Службы» и выберите «Добавить >> Новый элемент». Откроется диалоговое окно «Добавить новый элемент». Свыбрать Сcrips с левой панели, затем select “TypeScript Файл» на панели шаблонов. намне это 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-адрес программы, чтобы включить вызовы веб-API. После этого мы определили три функции для вызова нашего веб-API и преобразования результата в формат JSON. Мы будем вызывать эти функции из наших компонентов.

На этом этапе можно получить сообщение об ошибке «Параметр «сотрудник» неявно имеет тип «любой»» в empservice.service.ts файл. Если вы столкнулись с этой проблемой, добавьте следующую строчку внутрь tsconfig.jsonfile:

«noImplicitAny»: false

не найдено

Теперь мы приступим к созданию наших компонентов.

Создание компонентов Angular

Мы добавим два компонента Angular в нашу программу:

  1. Компонент «Опрос» – для отображения названий команд и соответствующей кнопки для голосования за команду.
  2. Компонент результата – для отображения результатов опроса.

Щелкните правой кнопкой мыши на ClientApp/app/components папку и выберите Добавить >> Новая папка и назовите файл fстарыйр Опрос.

Щелкните правой кнопкой мыши на Опрос папку и выберите Добавить >> Новый элемент. Откроется диалоговое окно «Добавить новый элемент». Свыбрать Сcrips с левой панели, затем select “TypeScript Файл с панели шаблонов. намне это IPLPoll.component.ts и нажмите Добавить. Это придаст файл машинописи внутрие-гоe Папка опроса.

T80wl97gZYuBRhdG7ICrAKAYa4kElMbCMe9h

Щелкните правой кнопкой мыши на Опрос папку и выберите Добавить >> Новый элемент. Откроется диалоговое окно «Добавить новый элемент». Свыбрать ASP.NET Core на панели слева, затем выберите «HTML-страница» на панели шаблонов и намне это IPLPoll.componenт.html. Щелкните Добавить. Это добавит файл HTML внутрь.е-гоe Папка опроса.

не найдено

Аналогично создайте a Результаты папка внутри ClientApp/app/components папку и добавьте a PollResult.component.ts файл машинописи и PollResult.component.html HTML файл к нему.

Теперь наш Клиентская программа/приложение будет выглядеть как на картинке ниже.

vzSQEMn9gFpybcRtR-qi8DHxwpFmK2gaHObh

Откройте IPLPoll.component.ts файл и вставьте в него следующий код.

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

Мы создали класс TeamData для хранения сведений о каждой команде, например teamId, teamName, voteCount и voteShare. Внутри нашего класса компонентов IPLPoll мы создали переменную массиву. список команд типа TeamData.

The getTeamList() метод вызовет функцию getTeams нашего сервиса TeamService, чтобы получить список команд из базы данных и назначить его переменной teamList. Метод getTeamList вызывается внутри конструктора, чтобы данные команды отображались при загрузке страницы.

Метод сохранения будет вызван, когда пользователь проголосует за любимую команду. Это вызовет сохранить голоса функция нашей службы обновлять подсчет голосов этой команды. Затем пользователь будет перенаправлен в компонент PollResults, чтобы просмотреть результаты опроса.

Откройте IPLPoll.component.html файл и вставьте в него следующий код.

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

На этой HTML-странице отобразится список команд вместе с a Голосуйте кнопку у каждой команды. Когда пользователь нажимает любую из кнопок голосования, он обновит подсчет голосов и перенаправит пользователя на страницу результатов опроса.

Теперь откройте PollResults.component.ts файл и вставьте в него следующий код.

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)' }                  ],              }]            });        }  }

Мы получаем обновленный список команд из базы данных и общее количество голосов для всех команд. Затем мы подсчитаем долю голосов каждой команды и воспользуемся createCharts() метод создания диаграммы для результатов опроса

Процент доля голосов для каждой команды рассчитывается путем деления голосов, полученных каждой командой, на общее количество голосов. Мы выполняем все эти операции в нашем конструкторе, чтобы отобразить результат при загрузке страницы.

The createCharts() метод создаст столбчатую диаграмму с помощью библиотеки Highcharts. Процент голосов выбирается как ось Y, а название команды выбирается как ось X. Чтобы сделать все интересное, мы устанавливаем цвет каждого столбца как соответствующий цвет майки команды.

Откройте PollResults.component.html файл и вставьте в него следующий код:

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

Эта HTML-страница проста. Результаты голосования отображаются в виде столбчатой ​​диаграммы. Несколько над диаграммой мы также показываем общее количество голосов.

Определение маршрута и навигационного меню для нашей программы

Откройте /app/app.shared.module.ts файл и вставьте в него следующий код.

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

Здесь мы также импортировали все наши компоненты и определили маршрут для программы, как показано ниже:

  • home — перенаправляющий к Домой компонент
  • опрос — перенаправляет на IPPoll компонент
  • результаты — перенаправляет на Результаты опроса компонент

Наконец нам нужно определить навигационное меню для нашей программы. Откройте /app/components/navmenu/navmenu.component.html файл и вставьте в него следующий код:

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

И все это. Мы создали нашу программу IPL Poll, используя Angular 5 и ядро ​​Entity Framework.

Демо исполнение

Нажмите F5, чтобы запустить приложение.

Откроется веб-страница, как показано ниже. Вы можете увидеть URL-адрес, показывающий маршрут для нашего домашнего компонента, а навигационное меню слева показывает навигационную ссылку для страницы Ipl Poll.

не найдено

Нажмите Опрос IPL в меню навигации. Он перенаправляет компонент Опроса, где отображаются названия всех команд вместе с кнопкой голосования рядом с ними. Обратите внимание, что в URL-адресе есть «/Poll».

не найдено

Нажмите кнопку голосования, чтобы проголосовать за любимую команду. Вы будете перенаправлены на страницу результатов опроса, где результаты опроса отображаются в виде столбчатой ​​диаграммы.

DLLueoKdpGQQW9sxwmzPxz1Zn2Bn2ptFwsP1

Поскольку это первое голосование, то оно показывает 100% для одной команды и 0% для других. После нескольких голосов за все команды мы получим таблицу результатов голосования, как показано ниже.

не найдено

Вывод

Мы создали онлайн-опрос с использованием ASP.NET Core, Angular 5 и базовой базы данных Entity Framework с помощью Visual Studio 2017 и SQL Server 2014. Мы также создали столбчатую диаграмму с помощью Highcharts для отображения результатов опроса.

Получите исходный код из Github и поиграйте. Не забудьте ввести свою строку подключения перед выполнением кода.

Вы также можете найти статью на C# Corner.

Вы можете просмотреть мои другие статьи о Angular 5 здесь

Смотрите также

Первоначально опубликовано на ankitsharmablogs.com 3 мая 2018 года.

Добавить комментарий

Ваш адрес email не будет опубликован.