MIS2000 Lab. - ASP.NET專題實務 & WebForm +MVC 遠距教學: ASP.NET MVC

2019年8月26日星期一

ASP.NET MVC - 編輯 (Edit) 與檔案上傳 (FileUpload)

微軟的 ASP.NET MVC範例，新增 (Create)有搭配檔案上傳

但沒有提供編輯 (Edit) 的功能
其實，以微軟提供的範例來說，這些功能都有了

"拼湊"都能做到您想要的功能。

詳見 9vs1.com線上課程 - https://9vs1.com/go/?i=4db77e0bf891（課程優惠代碼 4BbKKha ）

=========================================================
因為微軟改為ASP.NET Core版的MVC
https://github.com/MicrosoftLearning/20486-DevelopingASPNETMVCWebApplications

所以原本範例 (PhotoSharing) 只能從網友留下的 "備份"去找
https://github.com/faiteo/Photo-Sharing-Application-using-Asp.Net-mvc-4-/tree/master/PhotoSharingApplication-2015/PhotoSharingApplication-2015

我手邊還有 MVC 4 與 MVC 5的版本，但內容大同小異。上面的範例就夠用了。

public ActionResult Edit_NEW(int id = 0)
{
Photo photo = _db.Photos.Find(id);
if (photo == null)
{
return HttpNotFound(); // 找不到
}
return View(photo);
}

接下來的 Edit_NEW檢視畫面中，要將 Photo資料表裡面的二進位內容（放置圖片的欄位，資料型態為 VarBinary(MAX)），還原成「圖片檔」，

這段程式在 Details檢視畫面 就有
（上傳以後，把圖片存入資料表。
所以，呈現圖片時，必須寫一段程式，把二進位內容，還原成圖片檔）

詳見 9vs1.com線上課程 - https://9vs1.com/go/?i=4db77e0bf891（課程優惠代碼 4BbKKha ）

@model PhotoSharingApplication.Models.Photo
@{
Layout = null;
}

@using (Html.BeginForm("Edit", "Photo", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
................（後續省略）

Photo

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.PhotoID)

@if (Model.PhotoFile != null)
{

@Url.Action("GetImage", "Photo", new { Model.PhotoID })

" />

}

@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

Upload new @Html.LabelFor(model => model.PhotoFile):

@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.CreatedDate, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.CreatedDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.CreatedDate, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.ModifiedDate, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.ModifiedDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ModifiedDate, "", new { @class = "text-danger" })

}

@Html.ActionLink("Back to List", "Index")

按下 Submit按鈕以後，交給下一個動作來處理

詳見 9vs1.com線上課程 -  https://9vs1.com/go/?i=4db77e0bf891（課程優惠代碼 4BbKKha ）

=========================================================
//
// POST: /Photo/Edit/5 （原本範例沒有，這是我們額外增添的功能）
[HttpPost]
[ValidateAntiForgeryToken] // 避免CSRF攻擊
public ActionResult Edit(Photo _photo, HttpPostedFileBase image)
{ // ****************************
if (ModelState.IsValid)    {
//*** 檔案上傳 ****************************************(start) 這段程式在 Create動作裡面也有
if (image != null)
{
_photo.ImageMimeType = image.ContentType;
_photo.PhotoFile = new byte[image.ContentLength];
image.InputStream.Read(_photo.PhotoFile, 0, image.ContentLength);
}
//*** 檔案上傳 ****************************************(end)
// 第一種寫法：
_db.Entry(_photo).State = System.Data.Entity.EntityState.Modified; //確認被修改（狀態：Modified）
_db.SaveChanges();
//return Content(" 更新一筆記錄，成功！"); // 更新成功後，出現訊息（字串）。
return RedirectToAction("Index");
}
else   {
return Content(" *** 更新失敗！！*** ");
}

}