學習ASP.NET Core Razor 編程系列十四——文件上傳功能（二）

@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}")] 註釋。若是用戶輸入的值不是數字，則會接收到一條指示值長度不正確的消息。

7、添加頁面模型

在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 對象。而後會將這兩個上傳文件保存到數據庫。