ASP.NET MVC3 快速入門-第九節 實現編輯、刪除與明細信息視圖 .

9.1 實現數據的明細信息視圖

    首先，讓我們來看一下如何實現一條數據的明細信息視圖。爲了更好地體會這一功能，首先我們在前文所述的電影清單視圖（Views文件夾下面的Movies文件夾下面的Index.cshtml文件）中刪除電影清單中的種類、票價、電影等級字段，使其代碼如代碼清單9-1中所示。

    代碼清單9-1 修改後的Index.cshtml文件

@model IEnumerable<MvcMovie.Models.Movie>

@{

    ViewBag.Title = "電影清單";

}

<h2>我的電影清單</h2>

<p>

    @Html.ActionLink("追加", "Create")

</p>

<table>

    <tr>

        <th></th>

        <th>

            電影名稱

        </th>

        <th>

            發行日期

        </th>

    </tr>

@foreach (var item in Model) {

    <tr>

        <td>

            @Html.ActionLink("編輯", "Edit", new { id=item.ID }) |

            @Html.ActionLink("查看明細", "Details", new { id=item.ID }) |

            @Html.ActionLink("刪除", "Delete", new { id=item.ID })

        </td>

        <td>

            @item.Title

        </td>

        <td>

            @String.Format("{0:d}", item.ReleaseDate)

        </td>

    </tr>

}

</table>

@model IEnumerable<MvcMovie.Models.Movie> @{ ViewBag.Title = "電影清單"; } <h2>我的電影清單</h2> <p> @Html.ActionLink("追加", "Create") </p> <table> <tr> <th></th> <th> 電影名稱 </th> <th> 發行日期 </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.ActionLink("編輯", "Edit", new { id=item.ID }) | @Html.ActionLink("查看明細", "Details", new { id=item.ID }) | @Html.ActionLink("刪除", "Delete", new { id=item.ID }) </td> <td> @item.Title </td> <td> @String.Format("{0:d}", item.ReleaseDate) </td> </tr> } </table>
    重新運行該應用程序，在瀏覽器中輸入地址“http://localhost:xx/Movies”，瀏覽器中運行結果如圖9-1所示。

圖9-1 修改後的電影清單畫面

    現在電影清單畫面中就只顯示每條數據的電影名稱與發行日期了，如果像查看該條數據的詳細信息，需要點擊每條數據的“查看明細”鏈接，將畫面導航到明細數據畫面，在該畫面中查看這條數據的明細信息。當一條數據的細節信息比較多，而我們只想在該數據的列舉清單中顯示該數據的幾個摘要信息，通過點擊鏈接或按鈕的操作來查看數據的細節信息時這種處理方法是比較有用的。

    接下來讓我們來追加這個明細數據視圖。首先打開Movie控制器，追加一個返回明細數據視圖的Details方法，代碼如下所示。

//

// GET: /Movies/Details

public ActionResult Details(int id)

{

    Movie movie = db.Movies.Find(id);

    if (movie == null)

        return RedirectToAction("Index");

    return View("Details", movie);

}

// // GET: /Movies/Details public ActionResult Details(int id) { Movie movie = db.Movies.Find(id); if (movie == null) return RedirectToAction("Index"); return View("Details", movie); }
    code-first通過使用Find方法來讓一條數據的尋找變得非常容易。這個方法的一個非常重要的安全特性就是我們可以確保我們尋找的是一條可以被映射爲Movie對象的數據。爲什麼這種做法可以確保安全性呢？舉個例子來說，一個黑客可以將“http://localhost:xxxx/Movies/Details/1”地址修改爲“http://localhost:xxxx/Movies/Details/12345”，如果數據庫中沒有這條id爲12345的數據，根據以上代碼所示，作爲尋找結果的Movie對象將被設定爲null,瀏覽器將重新返回顯示電影清單畫面。

    在Details方法中點擊鼠標右鍵，選擇“添加視圖”，依然勾選“創建強類型視圖”，模型類選擇Movie,在支架模板中選擇“Details”（明細數據），如圖9-2所示。

圖9-2 添加明細數據視圖

如果要創建中文網站或應用程序，則將默認生成的Details.cshtml文件中有關英文文字修改爲中文，修改完畢後該文件中的代碼如代碼清單9-2中所示。

代碼清單9-2 Details.cshtml文件（明細數據視圖）中的代碼

@model MvcMovie.Models.Movie

@{

    ViewBag.Title = "電影詳細信息";

}

<h2>電影詳細信息</h2>

<fieldset>

    <legend>電影</legend>

    <div class="display-label">標題</div>

    <div class="display-field">@Model.Title</div>

    <div class="display-label">發行日期</div>

    <div class="display-field">@String.Format("{0:d}",

Model.ReleaseDate)</div>

    <div class="display-label">種類</div>

    <div class="display-field">@Model.Genre</div>

    <div class="display-label">票價</div>

    <div class="display-field">@String.Format("{0:c2}", Model.Price)</div>

    <div class="display-label">等級</div>

    <div class="display-field">@Model.Rating</div>

</fieldset>

<p>

    @Html.ActionLink("編輯", "Edit", new { id=Model.ID }) |

    @Html.ActionLink("返回電影清單", "Index")

</p>

@model MvcMovie.Models.Movie @{ ViewBag.Title = "電影詳細信息"; } <h2>電影詳細信息</h2> <fieldset> <legend>電影</legend> <div class="display-label">標題</div> <div class="display-field">@Model.Title</div> <div class="display-label">發行日期</div> <div class="display-field">@String.Format("{0:d}", Model.ReleaseDate)</div> <div class="display-label">種類</div> <div class="display-field">@Model.Genre</div> <div class="display-label">票價</div> <div class="display-field">@String.Format("{0:c2}", Model.Price)</div> <div class="display-label">等級</div> <div class="display-field">@Model.Rating</div> </fieldset> <p> @Html.ActionLink("編輯", "Edit", new { id=Model.ID }) | @Html.ActionLink("返回電影清單", "Index") </p>
    重新運行應用程序，在電影清單畫面中點擊某個電影的“查看明細”鏈接，瀏覽器顯示畫面如圖9-3所示。

圖9-3 電影細節信息畫面

9.2 實現數據的修改視圖

    接下來，讓我們來看一下如何實現一個用來修改數據的視圖。

    首先打開Movie控制器，追加一個返回數據修改視圖的Edit方法與一個對該視圖中的表單提交進行處理的Edit方法，代碼如下所示。

//

// GET: /Movies/Edit

public ActionResult Edit(int id)

{

        Movie movie = db.Movies.Find(id);

        if (movie == null)

            return RedirectToAction("Index");



        return View(movie);

}

//

// POST: /Movies/Edit

[HttpPost]

public ActionResult Edit(Movie model)

{

        try

        {

            var movie = db.Movies.Find(model.ID);



            UpdateModel(movie);

            db.SaveChanges();

            return RedirectToAction("Details", new { id = model.ID });

        }

        catch (Exception)

        {

            ModelState.AddModelError("", "修改失敗，請查看詳細錯誤信息。");

        }



        return View(model);

}

// // GET: /Movies/Edit public ActionResult Edit(int id) { Movie movie = db.Movies.Find(id); if (movie == null) return RedirectToAction("Index"); return View(movie); } // // POST: /Movies/Edit [HttpPost] public ActionResult Edit(Movie model) { try { var movie = db.Movies.Find(model.ID); UpdateModel(movie); db.SaveChanges(); return RedirectToAction("Details", new { id = model.ID }); } catch (Exception) { ModelState.AddModelError("", "修改失敗，請查看詳細錯誤信息。"); } return View(model); }

    這兩個Edit方法中，第一個方法將在用戶點擊外部畫面的“編輯”鏈接時被調用,用來在瀏覽器中顯示數據修改視圖，並且在該視圖中顯示用戶選擇編輯的數據。第二個Edit方法前面帶有一個[HttpPost]標記，負責將修改數據視圖中提交的表單數據綁定到一個用模型創建出來的Movie對象實例之上（當用戶在表單中完成數據修改並點擊保存按鈕的時候進行提交），UpdateModel(movie)方法將調用模型拷貝器，該模型拷貝器將修改後的數據(使用model參數，該參數指向一個各屬性值爲編輯後數據的Movie對象實例)拷貝到數據庫中（即爲數據的保存過程）。在保存數據的過程中如果發生任何錯誤而導致保存失敗的話，則畫面重新返回到數據修改視圖。

    接下來讓我們來追加該數據修改視圖、在Edit方法中點擊鼠標右鍵，選擇“添加視圖”，依然勾選“創建強類型視圖”，模型類選擇Movie,在支架模板中選擇“Edit”（修改數據），如圖9-4所示。

圖9-4 追加數據修改視圖

    如果要創建中文網站或應用程序，則將默認生成的Edit.cshtml文件中有關英文文字修改爲中文，修改完畢後該文件中的代碼如代碼清單9-3中所示。

    代碼清單9-3 Edit.cshtml文件（修改數據視圖）中的代碼

@model MvcMovie.Models.Movie

@{

    ViewBag.Title = "修改電影信息";

}

<h2>修改電影信息</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"

type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"

type="text/javascript"></script>

@using (Html.BeginForm()) {

    @Html.ValidationSummary(true)

    <fieldset>

        <legend>電影</legend>



        @Html.HiddenFor(model => model.ID)



        <div class="editor-label">

            標題

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Title)

            @Html.ValidationMessageFor(model => model.Title)

        </div>



        <div class="editor-label">

            發行日期

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.ReleaseDate)

            @Html.ValidationMessageFor(model => model.ReleaseDate)

        </div>



        <div class="editor-label">

            種類

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Genre)

            @Html.ValidationMessageFor(model => model.Genre)

        </div>



        <div class="editor-label">

            票價

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Price)

            @Html.ValidationMessageFor(model => model.Price)

        </div>



        <div class="editor-label">

            電影等級

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Rating)

            @Html.ValidationMessageFor(model => model.Rating)

        </div>



        <p>

            <input type="submit" value="保存" />

        </p>

    </fieldset>

}

<div>

    @Html.ActionLink("返回電影清單", "Index")

</div>

@model MvcMovie.Models.Movie @{ ViewBag.Title = "修改電影信息"; } <h2>修改電影信息</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>電影</legend> @Html.HiddenFor(model => model.ID) <div class="editor-label"> 標題 </div> <div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div> <div class="editor-label"> 發行日期 </div> <div class="editor-field"> @Html.EditorFor(model => model.ReleaseDate) @Html.ValidationMessageFor(model => model.ReleaseDate) </div> <div class="editor-label"> 種類 </div> <div class="editor-field"> @Html.EditorFor(model => model.Genre) @Html.ValidationMessageFor(model => model.Genre) </div> <div class="editor-label"> 票價 </div> <div class="editor-field"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div> <div class="editor-label"> 電影等級 </div> <div class="editor-field"> @Html.EditorFor(model => model.Rating) @Html.ValidationMessageFor(model => model.Rating) </div> <p> <input type="submit" value="保存" /> </p> </fieldset> } <div> @Html.ActionLink("返回電影清單", "Index") </div>
    重新運行應用程序，在電影清單畫面中點擊某個電影的“編輯”鏈接，瀏覽器顯示畫面如圖9-5所示。

圖9-5 數據修改視圖

    在該視圖中修改選中的數據，然後點擊保存按鈕，瀏覽器將修改後的數據顯示在明細數據視圖中，如圖9-6所示。

圖9-6 數據修改完成後被顯示在明細數據視圖中

9.3 實現數據的刪除視圖

    接下來，讓我們來看一下如何實現一個用來刪除數據的視圖。

    首先打開Movie控制器，追加一個返回數據修改視圖的Edit方法與一個對該視圖中的表單提交進行處理的Edit方法，代碼如下所示。

//

//GET: /Movies/Delete

public ActionResult Delete(int id)

{

    Movie movie = db.Movies.Find(id);

    if (movie == null)

        return RedirectToAction("Index");



    return View(movie);

}

//

// POST: /Movies/Delete

[HttpPost]

public RedirectToRouteResult Delete(int id,FormCollection collection)

{

    var movie = db.Movies.Find(id);

    db.Movies.Remove(movie);

    db.SaveChanges();

    return RedirectToAction("Index");

}

// //GET: /Movies/Delete public ActionResult Delete(int id) { Movie movie = db.Movies.Find(id); if (movie == null) return RedirectToAction("Index"); return View(movie); } // // POST: /Movies/Delete [HttpPost] public RedirectToRouteResult Delete(int id,FormCollection collection) { var movie = db.Movies.Find(id); db.Movies.Remove(movie); db.SaveChanges(); return RedirectToAction("Index"); }
    這裏請注意第一個沒有[HttpPost]標記的Delete方法並不會將數據刪除，因爲如果通過GET請求而刪除（或者追加、修改）刪除數據的話都會打開一個安全漏洞。

    接下來讓我們來追加該數據刪除視圖、在Delete方法中點擊鼠標右鍵，選擇“添加視圖”，依然勾選“創建強類型視圖”，模型類選擇Movie,在支架模板中選擇“Delete”（刪除數據），如圖9-7所示。

圖9-7 追加數據刪除視圖

    如果要創建中文網站或應用程序，則將默認生成的Delete.cshtml文件中有關英文文字修改爲中文，修改完畢後該文件中的代碼如代碼清單9-3中所示。

    代碼清單9-3 Delete.cshtml文件（刪除數據視圖）中的代碼

@model MvcMovie.Models.Movie



@{

    ViewBag.Title = "刪除電影數據";

}



<h2>刪除電影數據</h2>



<h3>你確實想將這條電影數據刪除嗎?</h3>

<fieldset>

    <legend>電影</legend>



    <div class="display-label">標題</div>

    <div class="display-field">@Model.Title</div>



    <div class="display-label">發行日期</div>

    <div class="display-field">@String.Format("{0:d}",

Model.ReleaseDate)</div>

    <div class="display-label">種類</div>

    <div class="display-field">@Model.Genre</div>

    <div class="display-label">票價</div>

    <div class="display-field">@String.Format("{0:F}", Model.Price)</div>

    <div class="display-label">電影等級</div>

    <div class="display-field">@Model.Rating</div>

</fieldset>

@using (Html.BeginForm()) {

    <p>

        <input type="submit" value="刪除" /> |

        @Html.ActionLink("返回電影清單", "Index")

    </p>

}

@model MvcMovie.Models.Movie @{ ViewBag.Title = "刪除電影數據"; } <h2>刪除電影數據</h2> <h3>你確實想將這條電影數據刪除嗎?</h3> <fieldset> <legend>電影</legend> <div class="display-label">標題</div> <div class="display-field">@Model.Title</div> <div class="display-label">發行日期</div> <div class="display-field">@String.Format("{0:d}", Model.ReleaseDate)</div> <div class="display-label">種類</div> <div class="display-field">@Model.Genre</div> <div class="display-label">票價</div> <div class="display-field">@String.Format("{0:F}", Model.Price)</div> <div class="display-label">電影等級</div> <div class="display-field">@Model.Rating</div> </fieldset> @using (Html.BeginForm()) { <p> <input type="submit" value="刪除" /> | @Html.ActionLink("返回電影清單", "Index") </p> }
在電影清單畫面中點擊一條數據的刪除按鈕，瀏覽器打開數據刪除視圖，如圖9-8所示。

 

圖9-8 數據刪除視圖

    點擊刪除按鈕，該條數據將被刪除，瀏覽器中返回顯示電影清單畫面。

    最後，我們來回顧一下本教程中所講述的內容。本教程中首先講述瞭如何創建控制器、視圖、如何將控制器中的數據傳遞給視圖。然後我們設計並創建了一個數據模型。code-first根據模型在指定的數據庫服務器中創建了一個數據庫。我們可以從這個數據庫中獲取數據並顯示在一個HTML表格中。然後我們追加了一個添加數據所用的視圖。接下來我們通過添加一個數據列（也稱字段）的方式來改變數據表，同時修改了數據清單畫面與數據追加視圖來顯示這個新追加的數據列。然後我們通過使用DataAnnotations命名空間，爲數據模型標註屬性的方式來追加了一些數據驗證規則。這些數據驗證即可以在客戶端實現，也可以在服務器端實現。最後，我們添加代碼與視圖模板來創建了數據的修改視圖，刪除視圖與明細數據視圖。

    接下來，我鼓勵你繼續看筆者即將發表的“MVC書店”這篇連載教程，來進一步瞭解一下ASP.NET MVC的實現方法。