public class User{public int? Id { get; set; }public string FirstName { get; set; }public int Age { get; set; }public string Gender { get; set; }public DateTime CreatedAt { get; set; }public int ProfessionId { get; set; }public Profession Profession { get; set; }}

public class Profession{public int Id { get; set; }public string Name { get; set; }public List<User> Users { get; set; }}

2）设置数据库

public class UserEntityConfiguration : IEntityTypeConfiguration<User>{public void Configure(EntityTypeBuilder<User> builder){builder.ToTable("User");builder.Property(u => u.Id).ValueGeneratedOnAdd().HasColumnType("serial").IsRequired();builder.HasKey(u => u.Id).HasName("pk_user");builder.Property(u => u.FirstName).IsRequired();builder.Property(u => u.Age).IsRequired().HasDefaultValue(0);builder.Property(u => u.Gender).IsRequired().HasDefaultValue("Male");builder.Property(u => u.CreatedAt).IsRequired().HasDefaultValueSql("CURRENT_TIMESTAMP");builder.Property(u => u.ProfessionId).HasColumnType("int");builder.HasOne(u => u.Profession).WithMany(p => p.Users).HasForeignKey(u => u.ProfessionId).HasConstraintName("fk_user_profession");}}

public class ProfessionEntityConfiguration : IEntityTypeConfiguration<Profession>
{public void Configure(EntityTypeBuilder<Profession> builder){builder.ToTable("Profession");builder.HasKey(p => p.Id).HasName("pk_profession");builder.HasIndex(p => p.Name).IsUnique(true).HasDatabaseName("uc_profession_name");builder.HasMany(p => p.Users).WithOne(u => u.Profession);}
}

public static class ModelBuilderExtensions{public static void Seed(this ModelBuilder modelBuilder){List<Profession> professions = new List<Profession>(){new Profession() { Id = 1, Name = "Software Developer"},new Profession() { Id = 2, Name = "Dentist"},new Profession() { Id = 3, Name = "Physician" }};modelBuilder.Entity<Profession>().HasData(professions);List<User> users = new List<User>(){new User() { Id=1, FirstName = "O.Nasri 1", Age = 30, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2019, 01, 01) },new User() { Id=2, FirstName = "O.Nasri 2 ", Age = 31, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2019, 01, 02) },new User() { Id=3, FirstName = "O.Nasri 3", Age = 32, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2019, 01, 02) },new User() { Id=4, FirstName = "O.Nasri 4", Age = 33, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2019, 01, 04) },new User() { Id=5, FirstName = "O.Nasri 4", Age = 33, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2019, 02, 05) },new User() { Id=6, FirstName = "Sonia 1", Age = 20, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2019, 04, 01) } ,new User() { Id=7, FirstName = "Sonia 2", Age = 20, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2019, 04, 02) } ,new User() { Id=8, FirstName = "Sonia 3", Age = 20, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2019, 05, 03) } ,new User() { Id=9, FirstName = "Sonia 4", Age = 20, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2019, 05, 04) } ,new User() { Id=10, FirstName = "O.Nasri 1", Age = 30, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2020, 01, 01) },new User() { Id=11, FirstName = "O.Nasri 2 ", Age = 31, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2020, 01, 02) },new User() { Id=12, FirstName = "O.Nasri 3", Age = 32, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2020, 01, 02) },new User() { Id=13, FirstName = "O.Nasri 4", Age = 33, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2020, 01, 04) },new User() { Id=14, FirstName = "O.Nasri 4", Age = 33, Gender = "Male", ProfessionId = 1, CreatedAt = new DateTime(2020, 01, 05) },new User() { Id=15, FirstName = "Thomas 1", Age = 41, Gender = "Male", ProfessionId = 2, CreatedAt = new DateTime(2020, 03, 01) } ,new User() { Id=16, FirstName = "Thomas 2", Age = 42, Gender = "Male", ProfessionId = 2, CreatedAt = new DateTime(2020, 03, 02) } ,new User() { Id=17, FirstName = "Thomas 3", Age = 43, Gender = "Male", ProfessionId = 2, CreatedAt = new DateTime(2020, 03, 03) } ,new User() { Id=18, FirstName = "Thomas 4", Age = 44, Gender = "Male", ProfessionId = 2, CreatedAt = new DateTime(2020, 03, 04) } ,new User() { Id=19, FirstName = "Christophe 1", Age = 25, Gender = "Male", ProfessionId = 3, CreatedAt = new DateTime(2020, 05, 01) },new User() { Id=20, FirstName = "Christophe 2", Age = 26, Gender = "Male", ProfessionId = 3, CreatedAt = new DateTime(2020, 05, 02) },new User() { Id=21, FirstName = "Christophe 3", Age = 27, Gender = "Male", ProfessionId = 3, CreatedAt = new DateTime(2020, 05, 03)},new User() { Id=22,  FirstName = "Linda 1", Age = 18, Gender = "Female", ProfessionId = 1, CreatedAt = new DateTime(2020, 06, 01) },new User() { Id=23,  FirstName = "Linda 2 ", Age = 19, Gender = "Female", ProfessionId = 1, CreatedAt = new DateTime(2020, 06, 02) },new User() { Id=24, FirstName = "Linda 3", Age = 20, Gender = "Female", ProfessionId = 1, CreatedAt = new DateTime(2020, 06, 02) },new User() { Id=25, FirstName = "Linda 4", Age = 21, Gender = "Female", ProfessionId = 1, CreatedAt = new DateTime(2020, 06, 04) },new User() { Id=26, FirstName = "Linda 4", Age = 22, Gender = "Female", ProfessionId = 1, CreatedAt = new DateTime(2020, 06, 05) },new User() { Id=27, FirstName = "Dalida 1", Age = 40, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2020, 09, 06) } ,new User() { Id=28, FirstName = "Dalida 2", Age = 41, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2020, 09, 07) } ,new User() { Id=29, FirstName = "Dalida 3", Age = 42, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2020, 09, 08) } ,new User() { Id=30, FirstName = "Dalida 4", Age = 43, Gender = "Female", ProfessionId = 2, CreatedAt = new DateTime(2020, 09, 09) } ,};modelBuilder.Entity<User>().HasData(users);}}

public class BDDContext : DbContext{public BDDContext([NotNullAttribute] DbContextOptions options) : base(options){}public DbSet<User> Users { get; set; }public DbSet<Profession> Professions { get; set; }#region Requiredprotected override void OnModelCreating(ModelBuilder modelBuilder){modelBuilder.UseSerialColumns();modelBuilder.ApplyConfiguration<User>(new UserEntityConfiguration());modelBuilder.ApplyConfiguration<Profession>(new ProfessionEntityConfiguration());modelBuilder.Seed();}#endregion}

public class Program{public static void Main(string[] args){var host = CreateHostBuilder(args).Build();using (var scope = host.Services.CreateScope()){var db = scope.ServiceProvider.GetRequiredService<BDDContext>();db.Database.Migrate();}host.Run();}public static IHostBuilder CreateHostBuilder(string[] args) =>Host.CreateDefaultBuilder(args).ConfigureWebHostDefaults(webBuilder =>{webBuilder.UseStartup<Startup>();});}

通过使用dotnet迁移工具，我们可以在Infrastructure项目中运行以下命令：

dotnet ef migrations add InitialCreate --output-dir Migrations

最后，当我们启动Visual Studio项目时，我们的模型和数据将在所选数据库中创建。

public class Repository<TEntity> where TEntity : class{internal BDDContext context;internal DbSet<TEntity> dbSet;public Repository(BDDContext context){this.context = context;this.dbSet = context.Set<TEntity>();}/// <summary>/// remove entity if exists./// </summary>/// <param name="entity"></param>public virtual void Delete(TEntity entity){this.dbSet.Remove(entity);}/// <summary>/// return all entities that match with condition passed by filter argument. /// The result will include all specified relations specified by the /// propertiesToInclude argument./// </summary>/// <param name="filter">where condition</param>/// <param name="propertiesToInclude">list of relation can be eager loaded</param>/// <returns></returns>public virtual List<TEntity> GetAll(Expression<Func<TEntity, bool>> filter = null, List<string> propertiesToInclude = null){var query = this.dbSet.AsQueryable();if (propertiesToInclude != null && propertiesToInclude.Count > 0){propertiesToInclude.ForEach(p =>{query = query.Include(p);});}if (filter != null){return query.Where(filter).ToList();}else{return query.ToList();}}/// <summary>/// create a new entity/// </summary>/// <param name="entity"></param>public virtual void Insert(TEntity entity){this.dbSet.Add(entity);}/// <summary>/// update an existing entity. /// </summary>/// <param name="entity"></param>public virtual void Update(TEntity entity){this.dbSet.Update(entity);}}

public interface IUserRepository{List<User> GetUsersByYear(int year);List<int> GetAllCreatedUsersYears();}

之后，我们在DashBoardWebApp.Infrastructure/Data/Repositories文件夹中创建UserRepository.cs。此类应重用该Repository类的通用方法并实现IUserRepository接口声明的方法：

public class UserRepository : Repository<User>, IUserRepository{private readonly BDDContext _context;public UserRepository(BDDContext context) : base(context){this._context = context;}public List<User> GetUsersByYear(int year){Expression<Func<User, bool>> filterByYear = (u) => u.CreatedAt.Year == year;List<String> propertiesToInclude = new List<string>() { "Profession" };return base.GetAll(filterByYear, propertiesToInclude)?.OrderBy(u => u.CreatedAt).ToList();}public List<int> GetAllCreatedUsersYears(){return this.dbSet?.Select(u => u.CreatedAt.Year).Distinct().OrderBy(y => y).ToList();}}

一旦完成了存储库的实现，就可以使用它们来构建我们的应用程序逻辑吗？但是，在此之前，我们需要通过修改Startup class以下ConfigureServices方法将其声明为依赖注入（DI）系统：

public void ConfigureServices(IServiceCollection services){services.AddControllersWithViews();services.AddDbContext<BDDContext>(options => options.UseNpgsql("Host=localhost; user id=postgres;password=YOUR_PASSWORD; database=DashboardBDD"));services.AddScoped<IUserRepository, UserRepository>();}

II）实现应用逻辑

public class LineChartDataDTO{public DateTime X { get; set; }public decimal Y { get; set; }public LineChartDataDTO(){}public LineChartDataDTO(DateTime x, int y){this.X = x;this.Y = y;}}

public class PieChartDataDTO{public string Label { get; set; }public decimal Value { get; set; }public PieChartDataDTO(){}public PieChartDataDTO(string label, decimal value){Label = label;Value = Math.Round(value, 2);}}

public class DashBoardDTO{public List<int> Years { get; set; }public List<LineChartDataDTO> SubscribedUsersForYearGroupedByMonth { get; set; }public List<PieChartDataDTO> SubscribedUsersForYearGroupedByGender { get; set; }public List<PieChartDataDTO>SubscribedUsersForYearGroupedByProfession { get; set; }}

public interface IDashboardService{DashBoardDTO GetSubscribedUsersStatsByYear(int? year);}

public class DashboardService : IDashboardService{private IUserRepository _userRepository;public DashboardService(IUserRepository userRepository){this._userRepository = userRepository;}public DashBoardDTO GetSubscribedUsersStatsByYear(int? year){DashBoardDTO dashBoard = new DashBoardDTO();dashBoard.Years = this._userRepository.GetAllCreatedUsersYears();if (dashBoard.Years == null || dashBoard.Years.Count == 0){return dashBoard;}if (!year.HasValue){//if year not exists then set it with the last year from years list.year = dashBoard.Years.LastOrDefault();}List<User> subsribedUsers = this._userRepository.GetUsersByYear(year.Value);if (subsribedUsers?.Count == 0){return dashBoard;}dashBoard.SubscribedUsersForYearGroupedByMonth =subsribedUsers.GroupBy(g => g.CreatedAt.Month).Select(g => new LineChartDataDTO(g.First().CreatedAt, g.Count())).ToList();var totalCount = subsribedUsers.Count;dashBoard.SubscribedUsersForYearGroupedByGender = subsribedUsers.GroupBy(g => g.Gender).Select(g => new PieChartDataDTO(g.Key, g.Count()*100/(decimal)totalCount )).ToList();dashBoard.SubscribedUsersForYearGroupedByProfession =subsribedUsers.GroupBy(g => g.Profession.Name).Select(g => new PieChartDataDTO(g.Key, g.Count() *100 / (decimal)totalCount )).ToList();dashBoard.SubscribedUsersForYearGroupedByGender.Last().Value =100 - dashBoard.SubscribedUsersForYearGroupedByGender.Where(d => d !=dashBoard.SubscribedUsersForYearGroupedByGender.Last()).Sum(d => d.Value);dashBoard.SubscribedUsersForYearGroupedByProfession.Last().Value =100 - dashBoard.SubscribedUsersForYearGroupedByProfession.Where(d => d != dashBoard.SubscribedUsersForYearGroupedByProfession.Last()).Sum(d => d.Value);return dashBoard;}}

最后，我们声明DI系统内的DashboardService类将根据每个请求在我们的控制器内自动实例化。我们需要将以下指令添加到Startup类的ConfigureServices方法。

services.AddScoped<IDashboardService, DashboardService>();

III）实现Web服务

[Route("api/dashboard")][ApiController]public class DashboardApi : ControllerBase{private readonly IDashboardService _dashboardService;public DashboardApi(IDashboardService dashboardService){this._dashboardService = dashboardService;}[HttpGet("{year:int?}")]public IActionResult FilterByYear([FromRoute] int? year){return Ok(this._dashboardService.GetSubscribedUsersStatsByYear(year));}}

IV）测试Web API

@{ViewData["Title"] = "Home Page";
}<div class="text-center"><p><h4>Developing a dashboard web application with ASP.NET MVC Core, WEB Api, JavaScript, PostegreSql and ChartJs</h4></p><div class="flex-d-column"><select id="filterByYear"></select><div class="fullWidth"><canvas id="mylineChart1"></canvas></div><div class="flex-d-row fullWidth"><div class="chart-container"><canvas id="mypieChart1"></canvas></div><div class="chart-container"><canvas id="mypieChart2"></canvas></div></div></div>
</div>

.fullWidth {width: 100%
}.flex-d-column {display: flex;flex-direction: column;
}.flex-d-row {display: flex;flex-direction: row;
}.chart-container {flex: 1;
}

$(document).ready(function () {let lineChart1 = null;let pieChart1 = null;let pieChart2 = null;function drawChart(chartInstance, canvasId, chartSettings) {if (chartInstance != null) {//update chart with new configurationchartInstance.options = { ...chartSettings.options };chartInstance.data = { ...chartSettings.data };chartInstance.update();return chartInstance;} else {//create new chart.var ctx = document.getElementById(canvasId).getContext('2d');return new Chart(ctx, chartSettings);}}function buildSelectFilter(years, currentYear) {//clear all options.$("#filterByYear").empty();var selectOptionsFilterHtml = "";if (years) {years.forEach((year) => {selectOptionsFilterHtml += `<option value="${year}" ${currentYear == year ? 'selected':''}>${year}</option>`});}$("#filterByYear").append(selectOptionsFilterHtml);}function makeRandomColor() {return "#" + Math.floor(Math.random() * 16777215).toString(16);}function drawLineChart(chartInstance, canvasId, data, titleText) {let settings = {// The type of chart we want to createtype: 'line',// The data for our datasetdata: {datasets: [{backgroundColor: 'rgba(255,0,0,0)',borderColor: makeRandomColor(),data: data}]},// Configuration options go hereoptions: {legend: {display: false},title: {display: true,text: titleText,fontSize: 16},scales: {xAxes: [{type: 'time',time: {unit: 'month',displayFormats: {month: 'MM YYYY'}}}]}}};return drawChart(chartInstance, canvasId, settings);}function drawPieChart(chartInstance, canvasId, data, labels, titleText) {//generate random color for each label.let bgColors = [];if (labels) {bgColors = labels.map(() => {return makeRandomColor();});}var settings = {// The type of chart we want to createtype: 'pie',// The data for our datasetdata: {labels: labels,datasets: [{backgroundColor: bgColors,borderColor: bgColors,data: data}],},// Configuration options go hereoptions: {tooltips: {callbacks: {label: function (tooltipItem, data) {//create custom display.var label = data.labels[tooltipItem.index] || '';var currentData = data.datasets[0].data[tooltipItem.index];if (label) {label = `${label} ${Number(currentData)} %`;}return label;}}},title: {display: true,text: titleText,fontSize: 16},}};return drawChart(chartInstance, canvasId, settings);}function filterDashboardDataByYear(currentYear) {currentYear = currentYear || '';let url = `http://localhost:65105/api/dashboard/${currentYear}`;$.get(url, function (data) {if (!currentYear && data.years.length > 0) {//pick the last year.currentYear = data.years.reverse()[0];}buildSelectFilter(data.years, currentYear);let data1 = [];if (data.subscribedUsersForYearGroupedByMonth) {data1 = data.subscribedUsersForYearGroupedByMonth.map(u => { return { "x": moment(u.x, "YYYY-MM-DD"), "y": u.y } });}let data2 = [];let labels2 = []; if (data.subscribedUsersForYearGroupedByGender) {data2 = data.subscribedUsersForYearGroupedByGender.map(u => u.value);labels2 = data.subscribedUsersForYearGroupedByGender.map(u => u.label);}let data3 = [];let labels3 = [];if (data.subscribedUsersForYearGroupedByProfession) {data3 = data.subscribedUsersForYearGroupedByProfession.map(u => u.value);labels3 = data.subscribedUsersForYearGroupedByProfession.map(u => u.label);}lineChart1 = drawLineChart(lineChart1, "mylineChart1", data1, `Number of subscribed users per month in ${currentYear}`);pieChart1 = drawPieChart(pieChart1, "mypieChart1", data2, labels2, `Number of subscribed users in ${currentYear} grouped by gender`);pieChart2 = drawPieChart(pieChart2, "mypieChart2", data3, labels3, `Number of subscribed users in ${currentYear} grouped by profession`);});}filterDashboardDataByYear();$(document).on("change", "#filterByYear", function () {filterDashboardDataByYear(parseInt($(this).val()));});
});     

该JS文件应导入到布局页面中。