学习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 对象。 然后会将这两个上传文件保存到数据库。

目录
相关文章
|
9月前
|
开发框架 .NET C#
ASP.NET Core Blazor 路由配置和导航
大家好,我是码农刚子。本文系统介绍Blazor单页应用的路由机制,涵盖基础配置、路由参数、编程式导航及高级功能。通过@page指令定义路由,支持参数约束、可选参数与通配符捕获,结合NavigationManager实现页面跳转与参数传递,并演示用户管理、产品展示等典型场景,全面掌握Blazor路由从入门到实战的完整方案。
673 6
|
开发框架 .NET 开发者
简化 ASP.NET Core 依赖注入(DI)注册-Scrutor
Scrutor 是一个简化 ASP.NET Core 应用程序中依赖注入(DI)注册过程的开源库,支持自动扫描和注册服务。通过简单的配置,开发者可以轻松地从指定程序集中筛选、注册服务,并设置其生命周期,同时支持服务装饰等高级功能。适用于大型项目,提高代码的可维护性和简洁性。仓库地址:&lt;https://github.com/khellang/Scrutor&gt;
790 5
|
开发框架 算法 中间件
ASP.NET Core 中的速率限制中间件
在ASP.NET Core中,速率限制中间件用于控制客户端请求速率,防止服务器过载并提高安全性。通过`AddRateLimiter`注册服务,并配置不同策略如固定窗口、滑动窗口、令牌桶和并发限制。这些策略可在全局、控制器或动作级别应用,支持自定义响应处理。使用中间件`UseRateLimiter`启用限流功能,并可通过属性禁用特定控制器或动作的限流。这有助于有效保护API免受滥用和过载。 欢迎关注我的公众号:Net分享 (239字符)
489 1
|
开发框架 缓存 .NET
GraphQL 与 ASP.NET Core 集成:从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL,包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时,文章还探讨了常见问题及其解决方法,如处理复杂查询、错误处理、性能优化和实现认证授权等,旨在帮助开发者构建灵活且高效的API。
529 3
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
953 0
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
550 0
|
开发框架 前端开发 .NET
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
[回馈]ASP.NET Core MVC开发实战之商城系统(三)
395 0
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
484 7
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
397 0
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
405 0