學習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 格式的上傳時間、公共描述文件的大小和後臺描述文件的大小。如下圖。