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

 

 

目录
相关文章
|
11天前
|
数据可视化 网络协议 C#
C#/.NET/.NET Core优秀项目和框架2024年3月简报
公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍、功能特点、使用方式以及部分功能截图等(打不开或者打开GitHub很慢的同学可以优先查看公众号推文,文末一定会附带项目和框架源码地址)。注意:排名不分先后,都是十分优秀的开源项目和框架,每周定期更新分享(欢迎关注公众号:追逐时光者,第一时间获取每周精选分享资讯🔔)。
|
1月前
|
开发框架 人工智能 .NET
C#/.NET/.NET Core拾遗补漏合集(持续更新)
C#/.NET/.NET Core拾遗补漏合集(持续更新)
|
1月前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
60 0
|
2月前
|
开发框架 前端开发 .NET
福利来袭,.NET Core开发5大案例,30w字PDF文档大放送!!!
为了便于大家查找,特将之前开发的.Net Core相关的五大案例整理成文,共计440页,32w字,免费提供给大家,文章底部有PDF下载链接。
32 1
福利来袭,.NET Core开发5大案例,30w字PDF文档大放送!!!
|
2月前
|
算法 BI API
C#/.NET/.NET Core优秀项目和框架2024年1月简报
C#/.NET/.NET Core优秀项目和框架2024年1月简报
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0
|
30天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
28 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
95 5
|
8月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
114 0

相关实验场景

更多