Asp.Net Core学习笔记：（二）视图、模型、持久化、文件、错误处理、日志

TagHelper

入门

优点：根据参数自动生成，不需要手写超链接，类似Django模板里面的url命令。

在ViewImport中添加TagHelper

@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers

比如，链接TagHelper使用

<a class="btn btn-outline-primary"

   asp-controller="student" asp-action="get"

   asp-route-id="@student.Id">

    查看

</a>

缓存破坏的TagHelper

<img src="~/images/banner.jpg" alt="Alternate Text" asp-append-version="true" />

环境 TagHelper

在开发环境中使用本地css文件，在非开发环境下使用的是CDN的css文件。

注：integrity是用来做完整性检查的，保证CDN提供文件的完整和安全。

<environment include="Development">

    <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />

</environment>

<environment exclude="Development">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</environment>

为了防止CDN加载失败页面无法显示，可以加上fallback相关属性，第一个是失败时加载的文件，第二个是不检查这个文件的完整性

asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.css"

asp-suppress-fallback-integrity="true"

表单 Tag Helper

直接贴上一个布局的代码，把class样式都去掉了，保留最基本代码。

确实是很方便的，和Django、jinja2之类的模板比完全不输。

@model Student

<form asp-controller="student" asp-action="create">

    <label asp-for="Name"></label>

    <input asp-for="Name" />

    <label asp-for="Email"></label>

    <input asp-for="Email" />

    <label asp-for="ClassName"></label>

    <select asp-for="ClassName" asp-items="Html.GetEnumSelectList<ClassNameEnum>()"></select>

    <button type="submit">提交</button>

</form>

模型绑定

将Http请求中的数据绑定到控制器方法上对应参数的顺序：

Form Values （Post表单数据）
Route Values （路由中的值）
Query String （Get的查询字符串）

模型验证

1.设置模型

首先在Model中加入验证属性，如：

public class Student

{

    public int Id { get; set; }

    [Display(Name = "姓名"), MaxLength(4, ErrorMessage = "名字长度不能超过四个字")]

    [Required(ErrorMessage = "请输入名字！")]

    public string Name { get; set; }

    [Display(Name = "班级")]

    public ClassNameEnum ClassName { get; set; }

    [Required(ErrorMessage = "请输入邮箱！")]

    [Display(Name = "邮箱")]

    [RegularExpression(@"^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$", ErrorMessage = "邮箱格式不正确")]

    public string Email { get; set; }

}

常用的模型验证方法

Required
Range：指定允许的最小值和最大值
MinLength
MaxLength
Compare：比较两个属性，比如密码和确认密码
RegularExpression：正则匹配

2.在控制器中加入验证代码

使用ModelState.IsValid来验证模型属性是否正确

[HttpPost]

public IActionResult Create(Student student)

{

    if (ModelState.IsValid)

    {

        var newStudent = _studentRepository.Add(student);

        return RedirectToAction("details", new { id = newStudent.Id });

    }

    return View();

}

3.使用TagHelper在网页上显示错误信息

例子如下：

<div class="text-danger" asp-validation-summary="All"></div>

<div class="form-group row">

<label asp-for="Name" class="col-sm-2 col-form-label"></label>

<div class="col-sm-10">

<input asp-for="Name" class="form-control" />

<span class="text-danger" asp-validation-for="Name"></span>

</div>

</div>

EF Core入门

首先实现DbContext

public class AppDbContext:DbContext

{

    // 将应用程序的配置传递给DbContext

    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }

    // 对要使用到的每个实体都添加 DbSet<TEntity> 属性

    // 通过DbSet属性来进行增删改查操作

    // 对DbSet采用Linq查询的时候，EFCore自动将其转换为SQL语句

    public DbSet<Student> Students { get; set; }

}

注册DbContext连接池

services.AddDbContextPool<AppDbContext>(options => options.UseSqlServer(_configuration.GetConnectionString("StudentDBConnection")));

其中，本地SqlServer数据库的配置，在appserttings.json中：

"ConnectionStrings": {

    "StudentDBConnection": "server=(localdb)\\MSSQLLocalDB;database=StudentDB;Trusted_Connection=true"

}

实现仓储

public class SqlStudentRepository : IStudentRepository

{

    private readonly AppDbContext _context;

    public SqlStudentRepository(AppDbContext context)

    {

        _context = context;

    }

    public Student Add(Student student)

    {

        _context.Students.Add(student);

        _context.SaveChanges();

        return student;

    }

    public Student Delete(int id)

    {

        var student = _context.Students.Find(id);

        if (student != null)

        {

            _context.Students.Remove(student);

            _context.SaveChanges();

        }

        return student;

    }

    public IEnumerable<Student> GetAll() => _context.Students;

    public Student GetById(int id) => _context.Students.Find(id);

    public Student Update(Student updatedStudent)

    {

        var student = _context.Students.Attach(updatedStudent);

        student.State = EntityState.Modified;

        _context.SaveChanges();

        return updatedStudent;

    }

}

EF Core 常用命令

在nuget控制台中，不区分大小写

Get-Help about_enti：显示帮助，about_enti全名很长可以只写前面的
Add-Migration：添加迁移记录
Update-Database：更新数据库

添加种子数据

重写DbContext的OnModelCreating方法

protected override void OnModelCreating(ModelBuilder modelBuilder) {

    modelBuilder.Entity<Student>().HasData(

        new Student { Id = 1, Name = "小米" },

    );

}

为了避免DbContext代码太乱，也可以使用扩展方法的方式：

public static class ModelBuilderExtensions

{

    public static void InsertSeedData(this ModelBuilder mBuilder)

    {

        mBuilder.Entity<Student>().HasData(

            new Student { Id = 1, Name = "小米" },

        );

    }

}

领域模型与数据库架构

使用迁移功能同步领域模型和数据库架构
使用 add-migration 添加迁移记录
使用 remove-migration 删除最近一条记录
使用 update-database 迁移记录名称 可以回滚至任意一次迁移

文件上传

定义ViewModel

要上传的字段采用 IFormFile 类型

public class StudentCreateViewModel

{

    public int Id { get; set; }

	// 省略无关代码...

    [Display(Name = "图片")]

    public IFormFile Photo { get; set; }

}

编写视图

修改cshtml视图文件，修改模型绑定：

@model StudentCreateViewModel

加入上传文件的表单项

<div class="form-group row">

    <label asp-for="Photo" class="col-sm-2 col-form-label"></label>

    <div class="col-sm-10">

        <div class="custom-file">

        <input asp-for="Photo" class="form-control custom-file-input" />

        <label class="custom-file-label">请选择图片</label>

        </div>

    </div>

</div>

为了选择文件后能显示出文件名还要编写js：

$(document).ready(function () {

    $('.custom-file-input').on('change', function () {

        var fileName = $(this).val().split('\\').pop();

        $(this).next('.custom-file-label').html(fileName);

    });

});

编写控制器

通过构造函数注入 HostingEnvironment

public StudentController(IStudentRepository studentRepository, HostingEnvironment hostingEnvironment)

{

    _studentRepository = studentRepository;

    _hostingEnvironment = hostingEnvironment;

}

处理文件上传和保存的逻辑

[HttpPost]

public IActionResult Create(StudentCreateViewModel model)

{

    if (ModelState.IsValid)

    {

        var uniqueFileName = "";

        if (model.Photo != null)

        {

            var uploadDir = Path.Combine(

                _hostingEnvironment.WebRootPath,

                "uploads", "images");

            uniqueFileName = Guid.NewGuid().ToString() +

                "_" + model.Photo.FileName;

            model.Photo.CopyTo(new FileStream(

                Path.Combine(uploadDir, uniqueFileName),

                FileMode.Create));

        }

        var student = new Student

        {

            Name = model.Name,

            Email = model.Email,

            ClassName = model.ClassName,

            PhotoPath = uniqueFileName,

        };

        var newStudent = _studentRepository.Add(student);

        return RedirectToAction("details",

                                new { id = newStudent.Id });

    }

    return View();

}

多文件上传

和单文件差不多

ViewModel

增加 List<IFormFile> 类型字段

[Display(Name = "图库")]

public List<IFormFile> Gallery { get; set; }

修改视图

<div class="form-group row">

    <label asp-for="Gallery" class="col-sm-2 col-form-label"></label>

    <div class="col-sm-10">

        <div class="custom-file">

            <input asp-for="Gallery" multiple id="gallery-input" class="form-control custom-file-input" />

            <label id="gallery-label" class="custom-file-label">请选择图片 可以一次选择多张</label>

        </div>

    </div>

</div>

js代码：

$('#gallery-input').on('change', function () {

    var label = $(this).next('#gallery-label');

    var files = $(this)[0].files;

    if (files.length > 1) {

        label.html(`你已经选择了${files.length}个文件`);

    } else if (files.length == 1) {

        label.html(files[0].name);

    }

});

修改控制器代码

// 处理多文件上传

if (model.Gallery != null && model.Gallery.Count > 0)

{

    foreach(var photo in model.Gallery)

    {

        uniqueFileName = Guid.NewGuid().ToString() + "_"

            + photo.FileName;

        photo.CopyTo(new FileStream(Path.Combine(uploadDir,

        uniqueFileName),FileMode.Create));

    }

}

错误处理

添加错误处理页面

在 Startup.cs 中设置中间件：

app.UseStatusCodePagesWithReExecute("/error/{0}");

推荐用 UseStatusCodePagesWithReExecute 而不是 UseStatusCodePagesWithRedirects，前者在管道内执行执行错误跳转url，后者会重定向到该url，导致http错误状态码变成新页面的正常执行的200码了。

接着编写错误控制器：

public class ErrorController : Controller

{

    [Route("Error/{statusCode}")]

    public IActionResult Index(int statusCode)

    {

        var statusCodeResult = HttpContext.Features.

            Get<IStatusCodeReExecuteFeature>();

        var viewModel = new ErrorViewModel

        {

            Path = statusCodeResult.OriginalPath,

            QueryString = statusCodeResult.

                OriginalQueryString,

        };

        switch (statusCode)

        {

            case 404:

                viewModel.Message = "页面未找到";

                break;

        }

        return View("Error", viewModel);

    }

}

对了，我还定义了ViewModel：

public class ErrorViewModel

{

    public int Code { get; set; }

    public string Message { get; set; }

    public string Path { get; set; }

    public string QueryString { get; set; }

}

视图代码就不贴了，无非就是显示ViewModel里的这些错误信息~

设置全局异常跳转

添加中间件

app.UseExceptionHandler("/exception");

编写处理用的控制器，这里需要添加AllowAnonymous注解，允许用户在未登录的时候访问到这个异常页面，保证无论如何可以显示出异常页面。

[AllowAnonymous]

[Route("exception")]

public IActionResult ExceptionHandler()

{

    var exception = HttpContext.Features.

        Get<IExceptionHandlerPathFeature>();

    var viewModel = new ExceptionViewModel

    {

        Path = exception.Path,

        Message = exception.Error.Message,

        StackTrace = exception.Error.StackTrace,

    };

    return View("Exception", viewModel);

}

另外，ViewModel定义如下：

public class ExceptionViewModel

{

    public string Path { get; set; }

    public string Message { get; set; }

    public string StackTrace { get; set; }

}

日志记录

AspNetCore里面自带了一套日志系统，默认已经注册到了服务容器里了，只要在控制器的构造函数里注入就可以使用了，比如：

public class ErrorController : Controller

{

    private ILogger<ErrorController> _logger;

    public ErrorController(ILogger<ErrorController> logger)

    {

        this._logger = logger;

    }

}

默认的日志只会记录到控制台或者调试输出，不过我们为了实现更多功能，比如记录到文件或者推送到日志服务器，我们需要使用第三方的日志组件。这里我用的是NLog。

首先要安装NLog.Web.AspNetCore这个包。

之后在Program.cs里引入nlog服务：

public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>

    WebHost.CreateDefaultBuilder(args)

    .ConfigureLogging((hostingContext, logging) =>

     {

         // 保留官方的代码中的默认日志程序

 logging.AddConfiguration(hostingContext.Configuration.GetSection("Logging"));

         logging.AddConsole();

         logging.AddDebug();

         logging.AddEventSourceLogger();

         // 引入 nlog

         logging.AddNLog();

      }).UseStartup<Startup>();

保留官方默认日志程序那里，要看AspNetCore的源代码，本文用的是2.2版本，在github看，地址如下：

https://github.com/dotnet/aspnetcore/blob/v2.2.8/src/DefaultBuilder/src/WebHost.cs

然后，为了使用nlog，需要创建一个配置文件，在项目根目录创建 NLog.config：

关于配置文件的说明可以参考：https://github.com/NLog/NLog/wiki

<?xml version="1.0" encoding="utf-8" ?>

<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"

      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

      autoReload="true"

      throwConfigExceptions="true">

  <targets>

    <target name="f1" xsi:type="File" fileName="Logs\nlog-all-${shortdate}.log"/>

    <target name="n1" xsi:type="Network" address="tcp://localhost:4001"/>

    <target name="c1" xsi:type="Console" encoding="utf-8"

            error="true"

            detectConsoleAvailable="true" />

    <target name="c2" xsi:type="ColoredConsole" encoding="utf-8"

          useDefaultRowHighlightingRules="true"

          errorStream="true"

          enableAnsiOutput="true"

          detectConsoleAvailable="true"

          DetectOutputRedirected="true">

    </target>

  </targets>

  <rules>

    <logger name="*" maxLevel="Debug" writeTo="c2" />

    <logger name="*" minLevel="Info" writeTo="f1" />

  </rules>

</nlog>

之后在程序中就可以正常使用日志功能了。比如：

var viewModel = new StatusCodeViewModel

{

    Code = statusCode,

    Path = statusCodeResult.OriginalPath,

    QueryString = statusCodeResult.OriginalQueryString,

};

_logger.LogWarning(viewModel.ToString());

还有可以在appsettings.json里面配置日志等级和命名空间过滤，跟在NLog.conf里面配置效果是一样的。例如：

"Logging": {

    "LogLevel": {

        "Default": "Warning",

        "StudyManagement.Controllers.ErrorController":

        "Warning"

    }

},

欢迎交流

程序设计实验室专注于互联网热门新技术探索与团队敏捷开发实践，在公众号「程序设计实验室」后台回复 linux、flutter、c#、netcore、android、kotlin、java、python 等可获取相关技术文章和资料，同时有任何问题都可以在公众号后台留言~

博客园：https://www.cnblogs.com/deali/
打代码直播间：https://live.bilibili.com/11883038
知乎：https://www.zhihu.com/people/dealiaxy

巴特西