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

学习ASP.NET Core Razor 编程系列十五——文件上传功能(三)的更多相关文章

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

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

  2. 学习ASP.NET Core Razor 编程系列十九——分页

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

  3. 学习ASP.NET Core Razor 编程系列十八——并发解决方案

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

  4. 学习ASP.NET Core Razor 编程系列十六——排序

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

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

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

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

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

  7. 学习ASP.NET Core Blazor编程系列十——路由(上)

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  8. 学习ASP.NET Core Razor 编程系列十七——分组

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

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

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

随机推荐

  1. java程序运行结果

    下面这段代码的运行结果是:AB.B 分析原因:也就是说在你的operate()方法中,参数是引用传递,也就是x,y分别为a,b引用的拷贝,在方法中,你给x追加了值,也就相应的改变了a的值,但是第二条语 ...

  2. 【强连通分量】Bzoj1051 HAOI2006 受欢迎的牛

    Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也认 ...

  3. BZOJ_3969_[WF2013]Low Power_二分答案

    BZOJ_3969_[WF2013]Low Power_二分答案 Description 有n个机器,每个机器有2个芯片,每个芯片可以放k个电池. 每个芯片能量是k个电池的能量的最小值. 两个芯片的能 ...

  4. Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页

    1.关于LigerUI: LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以应用于. ...

  5. jsp --- jquery

    1 给标签 添加属性 $('#principalMoney').attr("disabled", false);  $("#career1").css('dis ...

  6. Docker系列之swarm集群搭建

    学习Docker很久了,今天分享一下Docker的swarm集群的搭建过程很简单 首先第一步是 每台机器上面都要安装docker 本人使用的是centos7操作系统,使用3太虚拟机,3太虚拟机必须网络 ...

  7. 微信小程序之滑动日历展示

    滑动日历效果 效果预览 实现要求:顶部固定悬浮的是获取未来一周的日期,分为上下两部分,上面部分显示星期,下面则显示具体日期.今天则显示今天,可点击头部具体日期,可向左向右滑动. 实现代码 顶部日历 页 ...

  8. 关于Python3.6中Twisted模块安装的问题

    今天准备学习爬虫的scrapy模块,在这之前需要安装许多别的模块,Twisted就是其一 一开始想着直接用pycharm来安装就行了,没想到安装了一会就报错了,如下 后来就换到命令提示符来安装,在官网 ...

  9. 8天入门docker系列 —— 第二天 通过一个aspnetcore程序加深对容器的理解

    我们知道容器是一个打包了应用和相关依赖的盒子,那怎么去操控这个盒子呢? 这一篇我通过一个简单的aspnetcore程序来加深对盒子的理解,使用之前先 安装一下Docker的环境. 一:Docker的安 ...

  10. 结合JDK源码看设计模式——桥接模式

    前言: 在我们还没学习框架之前,肯定都学过JDBC.百度百科对JDBC是这样介绍的[JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Jav ...