学习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 编程系列十三——文件上传功能(一)

 

六、添加文件上传 Razor 页面

  1. 在Visual Studio 2017的解决方案资源管理器中,找到“Pages”文件夹,然后点击鼠标右键在弹出菜单中选择“添加-->新建文件夹”,然后把文件夹命名为“Descri”。如下图。

 

        2. 在“Descri”文件夹上使用鼠标右键单击,在弹出菜单中选择“添加-->Razor页面…”,

 

       3.在弹出对话框中选择“Razor页面”,然后点击“添加”按钮。如下图。

 

         4. 在弹出对应框的“Razor页面名称”文本框中输入“Index”然后点击“添加”按钮。如下图。

 

        5. Index.cshtml这个页面用于上传,这个页面的具体内容如下:

@page
@model RazorMvcBooks.Pages.Descri.IndexModel
@{

    ViewData["Title"] = "文件上传";
} 

<h2>文件上传</h2>
<hr />
 

<h3> 文件上传</h3>
<div class="row">
    <div class="col-md-4">
        <form method="post" enctype="multipart/form-data">

            <div class="form-group">
                <label asp-for="FileUpload.FileName" class="control-label"></label>
                <input asp-for="FileUpload.FileName" type="text" class="form-control" />
                <span asp-validation-for="FileUpload.FileName" class="text-danger"></span>
            </div>

            <div class="form-group">

                <label asp-for="FileUpload.UploadPublicDescribe" class="control-label"></label>
                <input asp-for="FileUpload.UploadPublicDescribe" type="file" class="form-control" style="height:auto" />
                <span asp-validation-for="FileUpload.UploadPublicDescribe" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="FileUpload.UploadPrivateDescribe" class="control-label"></label>
                <input asp-for="FileUpload.UploadPrivateDescribe" type="file" class="form-control" style="height:auto" />
                <span asp-validation-for="FileUpload.UploadPrivateDescribe" class="text-danger"></span>

            </div>
            <input type="submit" value="Upload" class="btn btn-default" />

        </form>
    </div>
</div>
 

<h3>已上传文件列表</h3>
<table class="table">    
<thead>

        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.Describe[0].Name)

            </th>
            <th>
                @Html.DisplayNameFor(model => model.Describe[0].UploadDateTime)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Describe[0].PublicScheduleSize)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Describe[0].PrivateScheduleSize)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Describe)
        {
            <tr>
                <td>
                    <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)

                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UploadDateTime)

                </td>
                <td class="text-center">
                    @Html.DisplayFor(modelItem => item.PublicScheduleSize)
                </td>
                <td class="text-center">
                    @Html.DisplayFor(modelItem => item.PrivateScheduleSize)
                </td>
            </tr>
        }
    </tbody>
</table> 

@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

 

        6. 每个窗体组包含一个 <label>,它显示每个类属性的名称。 FileUpload 模型中的 Display 特性提供这些标签的显示值。 例如,UploadPublicDescribe特性的显示名称通过    [Display(Name = "公共描述")]进行设置,因此呈现窗体时会在此标签中显示“公共描述”。如下图。

 

          每个窗体组包含一个验证 <span>。 如果用户输入未能满足 FileUpload 类中设置的属性特性,或者任何 ProcessFormFile 方法文件检查失败,则模型验证会失败。 模型验证失败时,会向用户呈现有用的验证消息。 例如,PublicScheduleSize 属性带有    [DisplayFormat(DataFormatString = "{0:N1}")] 注释。 如果用户输入的值不是数字,则会接收到一条指示值长度不正确的消息。

 

七、添加页面模型

       在Visual Studio 2017的解决方案资源管理器中,选中“Descri”文件夹,鼠标右键创建一个新的页面模型 (Index.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;
using RazorMvcBooks.Utils; 

namespace RazorMvcBooks.Pages.Descri
{

    public class IndexModel : PageModel
    {
        private readonly RazorMvcBooks.Models.BookContext _context; 

        public IndexModel(RazorMvcBooks.Models.BookContext context)
        {
            _context = context;
        } 

        [BindProperty]
        public FileUpload FileUpload { get; set; }
        public IList<Describe> Describe { get; private set; }
 

        public async Task OnGetAsync()
        {
            Describe = await _context.Describe.AsNoTracking().ToListAsync();

        }
 

        public async Task<IActionResult> OnPostAsync()
        {
            // Perform an initial check to catch FileUpload class
            // attribute violations.
            if (!ModelState.IsValid)
            {
                Describe = await _context.Describe.AsNoTracking().ToListAsync();
                return Page();
            }
 

            var publicDescribeData =
                await FileHelpers.ProcessFormFile(FileUpload.UploadPublicDescribe, ModelState); 

            var privateDescribeData =
                await FileHelpers.ProcessFormFile(FileUpload.UploadPrivateDescribe, ModelState); 

            // Perform a second check to catch ProcessFormFile method
            // violations.
            if (!ModelState.IsValid)
            {
                Describe = await _context.Describe.AsNoTracking().ToListAsync();
                return Page();
            }
 

            var descr = new Describe()
            {

                PublicDescribe = publicDescribeData,
                PublicScheduleSize = FileUpload.UploadPublicDescribe.Length,
                PrivateDescribe = privateDescribeData,

                PrivateScheduleSize = FileUpload.UploadPrivateDescribe.Length,
                Name = FileUpload.FileName,
                UploadDateTime = DateTime.UtcNow

            };

            _context.Describe.Add(descr);
            await _context.SaveChangesAsync(); 

            return RedirectToPage("./Index");
        }
    }
}

 

 

     在页面模型(Index.cshtml.cs 中的 IndexModel)绑定 FileUpload 类:

    [BindProperty]
   public FileUpload FileUpload { get; set; }

    此模型还使用列表 (IList<Describe>) 在页面上显示数据库中存储的上传文件列表:

    public IList< Describe > Describe { get; private set; }

      页面加载 OnGetAsync 时,会从数据库填充 Describe,用于生成已加载计划的 HTML 表:

public async Task OnGetAsync()
{

   Describe = await _context.Describe.AsNoTracking().ToListAsync();

}  

         将页面发布到服务器时,会检查 ModelState。 如果无效,会重新生成Describe,且页面会呈现一个或多个验证消息,陈述页面验证失败的原因。 如果有效,FileUpload 属性将用于“OnPostAsync”中,以完成两个上传文件的上传,并创建一个用于存储数据的新 Describe 对象。 然后会将这两个上传文件保存到数据库。

目录
相关文章
|
11月前
|
存储 JSON 开发工具
Visual Studio编程效率提升技巧集(提高.NET编程效率)
Visual Studio编程效率提升技巧集(提高.NET编程效率)
194 0
Visual Studio编程效率提升技巧集(提高.NET编程效率)
|
6月前
|
开发框架 .NET PHP
ASP.NET Web Pages - 添加 Razor 代码
ASP.NET Web Pages 使用 Razor 标记添加服务器端代码,支持 C# 和 Visual Basic。Razor 语法简洁易学,类似于 ASP 和 PHP。例如,在网页中加入 `@DateTime.Now` 可以实时显示当前时间。
|
8月前
|
传感器 数据采集 物联网
探索.NET nanoFramework:为嵌入式设备编程的新途径
探索.NET nanoFramework:为嵌入式设备编程的新途
292 7
|
10月前
|
大数据 开发工具 开发者
从零到英雄:.NET核心技术带你踏上编程之旅,构建首个应用,开启你的数字世界探险!
【8月更文挑战第28天】本文带领读者从零开始,使用强大的.NET平台搭建首个控制台应用。无论你是新手还是希望扩展技能的开发者,都能通过本文逐步掌握.NET的核心技术。从环境搭建到创建项目,再到编写和运行代码,详细步骤助你轻松上手。通过计算两数之和的小项目,你不仅能快速入门,还能为未来开发更复杂的应用奠定基础。希望本文为你的.NET学习之旅开启新篇章!
77 1
|
10月前
|
存储 C#
揭秘C#.Net编程秘宝:结构体类型Struct,让你的数据结构秒变高效战斗机,编程界的新星就是你!
【8月更文挑战第4天】在C#编程中,结构体(`struct`)是一种整合多种数据类型的复合数据类型。与类不同,结构体是值类型,意味着数据被直接复制而非引用。这使其适合表示小型、固定的数据结构如点坐标。结构体默认私有成员且不可变,除非明确指定。通过`struct`关键字定义,可以包含字段、构造函数及方法。例如,定义一个表示二维点的结构体,并实现计算距离原点的方法。使用时如同普通类型,可通过实例化并调用其成员。设计时推荐保持结构体不可变以避免副作用,并注意装箱拆箱可能导致的性能影响。掌握结构体有助于构建高效的应用程序。
349 7
|
10月前
|
Java Spring 自然语言处理
Spring 框架里竟藏着神秘魔法?国际化与本地化的奇妙之旅等你来揭开谜底!
【8月更文挑战第31天】在软件开发中,国际化(I18N)与本地化(L10N)对于满足不同地区用户需求至关重要。Spring框架提供了强大支持,利用资源文件和`MessageSource`实现多语言文本管理。通过配置日期格式和货币符号,进一步完善本地化功能。合理应用这些特性,可显著提升应用的多地区适应性和用户体验。
91 0
|
10月前
|
传感器 数据采集 物联网
探索未来:.NET nanoFramework引领嵌入式设备编程革新之旅
【8月更文挑战第28天】.NET nanoFramework 是一款专为资源受限的嵌入式设备设计的轻量级、高性能框架,基于 .NET Core,采用 C# 进行开发,简化了传统底层硬件操作的复杂性,极大提升了开发效率。开发者可通过 Visual Studio 或 Visual Studio Code 快速搭建环境并创建项目,利用丰富的库和驱动程序轻松实现从基础 LED 控制到网络通信等多种功能,显著降低了嵌入式开发的门槛。
196 0
|
开发框架 JSON .NET
学习ASP.NET 中的 默认应用程序配置源
默认主机配置源 使用命令行配置提供程序的命令行参数
80 2
|
JSON 编解码 Go
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第25天】Go语言`net/http`包提供HTTP客户端和服务器功能,简化高性能网络应用开发。本文探讨如何发起HTTP请求,常见问题及解决策略。示例展示GET和POST请求的实现。注意响应体关闭、错误处理、内容类型设置、超时管理和并发控制。最佳实践包括重用`http.Client`,使用`context.Context`,处理JSON以及记录错误日志。通过实践这些技巧,提升HTTP编程技能。
150 1
|
Go 开发者
Golang深入浅出之-HTTP客户端编程:使用net/http包发起请求
【4月更文挑战第24天】Go语言的`net/http`包在HTTP客户端编程中扮演重要角色,但使用时需注意几个常见问题:1) 检查HTTP状态码以确保请求成功;2) 记得关闭响应体以防止资源泄漏;3) 设置超时限制,避免长时间等待;4) 根据需求处理重定向。理解这些细节能提升HTTP客户端编程的效率和质量。
143 1