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

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

学习ASP.NET Core Razor 编程系列一 <http://www.cnblogs.com/chillsrc/p/8579777.html>

学习ASP.NET Core Razor 编程系列二——添加一个实体
<http://www.cnblogs.com/chillsrc/p/8622439.html>

学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面
<http://www.cnblogs.com/chillsrc/p/8651973.html>

学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面
<http://www.cnblogs.com/chillsrc/p/8717199.html>

学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面
<http://www.cnblogs.com/chillsrc/p/8778379.html>

学习ASP.NET Core Razor 编程系列六——数据库初始化
<http://www.cnblogs.com/chillsrc/p/8872303.html>

学习ASP.NET Core Razor 编程系列七——修改列表页面
<http://www.cnblogs.com/chillsrc/p/8968398.html>

学习ASP.NET Core Razor 编程系列八——并发处理
<http://www.cnblogs.com/chillsrc/p/8986512.html>

学习ASP.NET Core Razor 编程系列九——增加查询功能
<http://www.cnblogs.com/chillsrc/p/9025896.html>

学习ASP.NET Core Razor 编程系列十——添加新字段
<https://www.cnblogs.com/chillsrc/p/9077466.html>

学习ASP.NET Core Razor 编程系列十一——把新字段更新到数据库
<https://www.cnblogs.com/chillsrc/p/9111862.html>

学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
<https://www.cnblogs.com/chillsrc/p/9178291.html>

学习ASP.NET Core Razor 编程系列十三——文件上传功能（一）
<https://www.cnblogs.com/chillsrc/p/9243055.html>

学习ASP.NET Core Razor 编程系列十四——文件上传功能（二）
<https://www.cnblogs.com/chillsrc/p/9273635.html>

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

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

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

热门工具换一换