学习ASP.NET Core Razor 编程系列十五——文件上传功能（三）

学习ASP.NET Core Razor 编程系列目录

学习ASP.NET Core Razor 编程系列一

学习ASP.NET Core Razor 编程系列二——添加一个实体

 学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面

学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面

学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面

学习ASP.NET Core Razor 编程系列六——数据库初始化

学习ASP.NET Core Razor 编程系列七——修改列表页面

学习ASP.NET Core Razor 编程系列八——并发处理

学习ASP.NET Core Razor 编程系列九——增加查询功能

 学习ASP.NET Core Razor 编程系列十——添加新字段

学习ASP.NET Core Razor 编程系列十一——把新字段更新到数据库

学习ASP.NET Core Razor 编程系列十二——在页面中增加校验

学习ASP.NET Core Razor 编程系列十三——文件上传功能（一）

学习ASP.NET Core Razor 编程系列十四——文件上传功能（二）

 

八、添加文件 Razor 页面的链接

       我们通过前面的二篇文章的学习，已经实现了文件上传的主要功能，这一篇文章我们来学习如何把上传文件的功能页面添加到首面上面，以及删除功能的实现 。

1. 在Visual Studio 2017中按F5运行书籍管理应用程序，在浏览器浏览，如下图。但是没有发现上传页面的菜单。

 

        2.在Visual Studio 2017中打开“_Layout.cshtml”，然后向导航栏添加一个链接以访问文件上传页面，如下图：

 

        3.在Visual Studio 2017中按F5运行书籍管理应用程序，在浏览器浏览，如下图。此时你会发现上传页面的菜单。

 

 

九、添加文件删除确认页面

      1.  为了更好的用户体验，当用户单击删除上传文件时，要提供一个删除确认的操作。 在Visual Studio 2017的解决方案资源管理器中找到“Descri”文件夹，并添加删除确认页面 (Delete.cshtml),html代码如下:

@page "{id:int}"
@model RazorMvcBooks.Pages.Descri.DeleteModel
@{
    ViewData["Title"] = "删除上传文件";
}

<h2>删除上传文件h2>
<h3>你是否确认要删除此文件?h3>
<div>
    <h4>上传文件h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Describe.Name)

        dt>
        <dd>
            @Html.DisplayFor(model => model.Describe.Name)

        dd>
        <dt>
            @Html.DisplayNameFor(model => model.Describe.PublicScheduleSize)

        dt>
        <dd>
            @Html.DisplayFor(model => model.Describe.PublicScheduleSize)

        dd>
        <dt>
            @Html.DisplayNameFor(model => model.Describe.PrivateScheduleSize)

        dt>
        <dd>
            @Html.DisplayFor(model => model.Describe.PrivateScheduleSize)

        dd>
        <dt>
            @Html.DisplayNameFor(model => model.Describe.UploadDateTime)

        dt>
        <dd>
            @Html.DisplayFor(model => model.Describe.UploadDateTime)

        dd>
    dl>

    <form method="post">
        <input type="hidden" asp-for="Describe.ID" />
        <input type="submit" value="Delete" class="btn btn-default" /> |
        <a asp-page="./Index">Back to Lista>
    form>
div>

        2. 在Visual Studio 2017的解决方案资源管理器中，打开Delete.cshtml.cs文件，修改Delete.cshtml.cs中的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorMvcBooks.Models;
using Microsoft.EntityFrameworkCore; 

namespace RazorMvcBooks.Pages.Descri
{
    public class DeleteModel : PageModel
    { 

        private readonly RazorMvcBooks.Models.BookContext _context;
 
        public DeleteModel(RazorMvcBooks.Models.BookContext context)

        {
            _context = context;
        }


        [BindProperty]
        public Describe Describe { get; set; }

        public async Task OnGetAsync(int? id)
        {
            if (id == null)
            {
                return NotFound();

            } 

            Describe = await _context.Describe.SingleOrDefaultAsync(m => m.ID == id); 

            if (Describe == null)
            {
                return NotFound();

            }
            return Page();
        } 

// OnPostAsync 方法按 id 处理计划删除：
        public async Task OnPostAsync(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
            Describe = await _context.Describe.FindAsync(id); 

            if (Describe != null)
            {
                _context.Describe.Remove(Describe);

                await _context.SaveChangesAsync();

            } 
            return RedirectToPage("./Index");
        }

    }
}

 

      3. 在Visual Studio 2017中按F5运行书籍管理应用程序，然后在浏览器中点击“上传文件”菜单，浏览上传文件页面，并上传文件。如下图。

 

     4.  在已上传文件列表中，点击要删除的上传文件记录，按下图操作。用户可单击该表中的“删除”链接以访问删除确认视图，并在其中选择确认或取消删除操作。

 

     5.  成功删除上传文件后，RedirectToPage 将返回到计划的上传文件（“Index.cshtml”）页面。如下图。

 

十、上传文件页面的说明

     按初始加载所示计划 Razor 页面，其中不含验证错误和空字段

     在不填充任何字段的情况下选择“上传”按钮会违反此模型上的 [Required] 特性。 ModelState 无效。 会向用户显示验证错误消息:

 

      验证错误消息显示在每个输入控件旁边

 

      在“文件名”字段中键入两个字母。 校验提示信息会提示文件名长度必须介于 3-60 个字符之间:

 

      文件名文本框中输入“image1”，则校验信息自动会消失,如下图。

 

      上传一个或多个文本文件时，“已上传文件列表”部分会显示已经上传的文件信息，显示每个上传文件的文件名称、UTC 格式的上传时间、公共描述文件的大小和后台描述文件的大小。如下图。