將頁面發佈到伺服器時,會檢查 ModelState。 如果無效,會重新生成Describe,且頁面會呈現一個或多個驗證消息,陳述頁面驗證失敗的原因。 如果有效,FileUpload 屬性將用於“OnPostAsync”中,以完成兩個上傳文件的上傳,並創建一個用於存儲數據的新 Describe 對象。... ...
學習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 頁面
- 在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 對象。 然後會將這兩個上傳文件保存到資料庫。