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

时间:2018-09-29 15:18:14 浏览量:262 阅读时间:14.76 分钟

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


打赏

感谢您的支持,我会继续努力的!


支付宝
注册用户登录后才能发表评论,请 登录 注册,请访问 网站首页。
总计(0)条评论

admin

软件工程师

    文章目录

    返回顶部小火箭