学习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"] = "删除上传文件";}
删除上传文件
你是否确认要删除此文件?
     
    
      
上传文件
    
      
    
      
        
       
                    @Html.DisplayNameFor(model => model.Describe.Name)        
       
        
       
                    @Html.DisplayFor(model => model.Describe.Name)        
       
        
       
                    @Html.DisplayNameFor(model => model.Describe.PublicScheduleSize)        
       
        
       
                    @Html.DisplayFor(model => model.Describe.PublicScheduleSize)        
       
        
       
                    @Html.DisplayNameFor(model => model.Describe.PrivateScheduleSize)        
       
        
       
                    @Html.DisplayFor(model => model.Describe.PrivateScheduleSize)        
       
        
       
                    @Html.DisplayNameFor(model => model.Describe.UploadDateTime)        
       
        
       
                    @Html.DisplayFor(model => model.Describe.UploadDateTime)        
       
    
      
    
      
        
               
        |        
       Back to List    
      
     

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