学习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 List</a>
    </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<IActionResult> 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<IActionResult> 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 格式的上传时间、公共描述文件的大小和后台描述文件的大小。如下图。