學習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 編程系列十四——文件上傳功能（二）

 

8、添加文件 Razor 頁面的連接

       咱們經過前面的二篇文章的學習，已經實現了文件上傳的主要功能，這一篇文章咱們來學習如何把上傳文件的功能頁面添加到首面上面，以及刪除功能的實現 。

1. 在Visual Studio 2017中按F5運行書籍管理應用程序，在瀏覽器瀏覽，以下圖。可是沒有發現上傳頁面的菜單。

 

        2.在Visual Studio 2017中打開「_Layout.cshtml」，而後嚮導航欄添加一個連接以訪問文件上傳頁面，以下圖：

 

        3.在Visual Studio 2017中按F5運行書籍管理應用程序，在瀏覽器瀏覽，以下圖。此時你會發現上傳頁面的菜單。

 

 

9、添加文件刪除確認頁面

      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」）頁面。以下圖。

 

10、上傳文件頁面的說明

     按初始加載所示計劃 Razor 頁面，其中不含驗證錯誤和空字段

     在不填充任何字段的狀況下選擇「上傳」按鈕會違反此模型上的 [Required] 特性。 ModelState 無效。 會向用戶顯示驗證錯誤消息:

 

      驗證錯誤消息顯示在每一個輸入控件旁邊

 

      在「文件名」字段中鍵入兩個字母。 校驗提示信息會提示文件名長度必須介於 3-60 個字符之間:

 

      文件名文本框中輸入「image1」，則校驗信息自動會消失,以下圖。

 

      上傳一個或多個文本文件時，「已上傳文件列表」部分會顯示已經上傳的文件信息，顯示每一個上傳文件的文件名稱、UTC 格式的上傳時間、公共描述文件的大小和後臺描述文件的大小。以下圖。