个人网站项目：基于ASP.NET CORE MVC和bootstrap实现

个人网站项目：基于ASP.NET CORE和bootstrap实现（更新中）

基本内容：

• 个人主页
• 个人相册
• 个人音乐

基本功能：

• 利用数据库实现个人资料修改、更新
• 借助bootstrap框架实现响应式页面
• 借助bootstrap框架实现页面内导航

项目文件目录：

wwwroot：存放js文件和css文件，以及图片、音乐、视频文件；
Controlles：存放控制器，即拥有以下功能的类：

• 处理浏览器请求
• 检索模型数据
• 调用返回响应的视图模板
  Data：存放数据库上下文
  Migrations：存放快照
  Models：存放应用和管理数据的类
  Vies：存放UI组件，显示数据

基本操作步骤及部分代码：

1、开发环境准备
我使用的是visual studio 2019，如果你之前没有安装ASP.NET CORE，可以通过visual studio installer安装。其中一种打开方式如下：

2、新建项目：
选择ASP.NET CORE Web应用（MVC），然后一直下一步生成项目。

3、在浏览器中启动项目
可以通过Ctrl + F5不经调试在浏览器中启动项目，界面如下：

可以看到地址栏中visual studio为我们随机分配的端口，页面中的链接有着ASP.NET CORE的详细教程。

4、添加控制器
选择Controllers，添加控制器，操作如下：

5、添加视图
选择Views文件夹，在其下新建一个Record文件夹，然后选择Record文件夹，右键—新建—视图，然后一直选添加即可。

然后向 Views\Record\Index.cshtml 文件中添加如下的代码：

@{
    ViewData["Title"] = "Record";
}

<div class="text-center">
    <h1>添加的第一个模块视图</h1>
</div>

在浏览器地址栏输入https://localhost:44370/Record，具体端口号根据实际情况输入，即可看到如下界面：

但是我们看到最上方的导航栏中并没有Record模块，我们需要在 Views\Shared_Layout.cshtml 文件中更改默认内容。我们可以找到下面的这段代码，稍作更改即可。

<ul class="navbar-nav flex-grow-1">
	<li class="nav-item">
    	<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>
</ul>

我们再添加一个列表项，将 asp-controller 属性改成 "Record" , 然后将asp-action属性更改为Index，中间的文本改成Record，更改后的代码如下：

<ul class="navbar-nav flex-grow-1">
	<li class="nav-item">
    	<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
    	<a class="nav-link text-dark" asp-area="" asp-controller="Record" asp-action="Index">Record</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>
</ul>

然后，Ctrl + S 保存，我们可以看到刷新后的页面长这样：

导航栏里多了一个Record，点击即可出现对应的界面。

6、添加模型
选择Models文件夹，添加一个名为Test.cs的类，然后更改其中的代码如下：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Test
    {

        public int Id { get; set; }
        public string Name { get; set; }
        public string Sex { get; set; }
        public string Hometown { get; set; }
        public string School { get; set; }
        public string Profile { get; set; }
        [Display(Name = "Birthday")]
        [DataType(DataType.Date)]
        public DateTime Birthday { get; set; }
    }
}

然后添加 NuGet 包，从“工具”菜单中，选择“NuGet 包管理器”>“包管理器控制台”(PMC)。添加如下命令：

Install-Package Microsoft.EntityFrameworkCore.Design

如果出现版本方面的报错，请参考这篇博客：VS 2019 ASP.Net Core MVC 项目中“新建基架项目“时报错

然后新建基架项目，选择Controllers，添加新建基架项目。

选择 视图使用EF的MVC控制器，添加。

模型类在下拉框中选中，数据上下文点加号后出现，然后点击添加。

然后我们可以再Controllers文件夹下看到TestsController.cs，在Views下看到Tests文件夹及里面的各个视图。
紧接着，从“工具”菜单中，选择“NuGet 包管理器”>“包管理器控制台”。在包管理器控制台 (PMC) 中输入以下命令：

Add-Migration InitialCreate
Update-Database

然后访问https://localhost:[端口号]/Tests，可以看到如下界面：

可以测试一下Create功能，将会创建一个如下所示的列表项：

然后再测试一下Edit，Details，Delete功能。表格的样式是框架自己生成的，你可以根据自己的需求生成不同的基架项目，在视图界面修改代码，以不同的方式显示数据。

7、使用数据库
我们可以在视图中打开SQL资源管理器，然后打开视图设计器，可以在这里查看和修改数据，效果和在网页中修改是一样的。

视图设计器界面如下，可以看到，表中的名称正是我们在Models中添加的那些变量。

我们也可以初始化数据库中的数据，在Models模块新建一个SeedData.cs的类（这里因为我误删了之前的项目，新建的项目里的列表项简化为一个Profile，如果有更多的列表项，模仿着加即可），更改为如下内容：

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using WebApplication1.Data;
using System;
using System.Linq;

namespace WebApplication1.Models
{
    public class SeedData
    {
        public static void Initialize(IServiceProvider serviceProvider)
        {
            using (var context = new TestContext(
                serviceProvider.GetRequiredService<
                    DbContextOptions<TestContext>>()))
            {
                // Look for any Tests.
                if (context.Test.Any())
                {
                    return;   // DB has been seeded
                }

                context.Test.AddRange(
                    new Test
                    {
                        Profile = "学习MySQl"
                    },
                    new Test
                    {
                        Profile = "学习JDBC"
                    }
                );
                context.SaveChanges();
            }
        }
    }
}

然后更改Program.cs中的内容如下：

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using WebApplication1.Data;
using WebApplication1.Models;
using System;

namespace WebApplication1
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var host = CreateHostBuilder(args).Build();

            using (var scope = host.Services.CreateScope())
            {
                var services = scope.ServiceProvider;

                try
                {
                    SeedData.Initialize(services);
                }
                catch (Exception ex)
                {
                    var logger = services.GetRequiredService<ILogger<Program>>();
                    logger.LogError(ex, "An error occurred seeding the DB.");
                }
            }

            host.Run();

        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}

将数据库中的数据删完，然后重新启动项目，可以看到如下的初始数据：