开发者社区> 杰克.陈> 正文

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

简介: 原文:学习ASP.NET Core Razor 编程系列十五——文件上传功能(三) 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
+关注继续查看
原文:学习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 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 编程系列十六——排序
原文:学习ASP.NET Core Razor 编程系列十六——排序 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体  学习ASP.
1172 0
学习ASP.NET Core Razor 编程系列十七——分组
原文:学习ASP.NET Core Razor 编程系列十七——分组 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体  学习ASP.
1197 0
学习ASP.NET Core Razor 编程系列十八——并发解决方案
原文:学习ASP.NET Core Razor 编程系列十八——并发解决方案   学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
1076 0
学习ASP.NET Core Razor 编程系列十四——文件上传功能(二)
原文:学习ASP.NET Core Razor 编程系列十四——文件上传功能(二) 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
1036 0
学习ASP.NET Core Razor 编程系列十三——文件上传功能(一)
原文:学习ASP.NET Core Razor 编程系列十三——文件上传功能(一)   学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
1244 0
学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
原文:学习ASP.NET Core Razor 编程系列十二——在页面中增加校验 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
1335 0
学习ASP.NET Core Razor 编程系列十一——把新字段更新到数据库
原文:学习ASP.NET Core Razor 编程系列十一——把新字段更新到数据库 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
1271 0
学习ASP.NET Core Razor 编程系列十——添加新字段
原文:学习ASP.NET Core Razor 编程系列十——添加新字段 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体  学习ASP.
1017 0
学习ASP.NET Core Razor 编程系列八——并发处理
原文:学习ASP.NET Core Razor 编程系列八——并发处理 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体  学习ASP.
1069 0
基于Asp.Net Mvc开发的个人博客系统
一个基于Mvc 5构建的简单、代码层级分明的开源个人博客系统。前端美观大气、后台采用RightControl .NET通用角色权限系统,开发简单、效率高。网站配置采用XML配置,灵活可以根据自己是需求进行个性化配置。系统功能完备,完全可以满足需求,基本不用二次开发,非常使用程序员的个人博客。
46 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载