ASP.NET MVC 實務精要｜第四章 串接關聯式資料庫 - SQL Server
相較於資料新增作業，資料編輯與刪除操作是針對某筆資料進行資料維護功能，因此必須先提供資料查詢介面，讓使用者取出所要編輯的目標資料，然後再進行更新或是刪除等操作。現在開啟HomeController.cs，於其中新增一個ProductList() 方法：
Name 為使用者於網頁端查詢傳送進來的參數，直接連結至此動作不會有參數值，因此將其預設值設為null，如果這個值是null直接回傳檢視檔案，否則的話，根據name參數調用Where() 方法，取得名稱包含此name字串的的商品，最後將其轉換成為List物件進行回傳。建立此動作的對應檢視檔案ProductList.cshtml，於其中輸入以下的內容：
一開始宣告@model 以支援Product物件資料的存取，接下來建立表單並且於其中配置所需的查詢文字方塊與按鈕，加上新增商品的連結以方便使用者切換至前述完成的商品新增頁。
if判斷式檢查是否Model物件為null，是的話表示第一次載入，因此不執行任何資料呈現作業，只顯示表格的標題。
第二段 if 判斷式檢視是否有任何資料回傳，有的話才進行內容的建立作業，逐一取得欄位內容嵌入td元素中。
在每一行結束前，預留「編輯」與「刪除」按鈕連結，讓使用者可以針對特定資料進行編輯與行刪除操作。
完成後的畫面如下，因為沒有查詢參數，直接載入網頁不會有任何商品。
配置好必要的功能之後，現在可以開始測試網頁了，於文字方塊中輸入查詢條件，如果資料庫中的品項名稱包含了文字方塊的關鍵字，則回傳相關的品項資料，例如以下的畫面：
直接按一下「查詢」按鈕進行查詢，空字串被當作參數回傳，所有的資料均符合條件因此到目前為止我們新增的兩筆資料均顯示出來。
輸入特定的品項名稱，按一下「查詢」按鈕即會到符合此查詢參數LINQ的資料。
現在回到編輯與刪除功能，其中預留的內容如下：
為了讓使用者按下功能連結能夠調用對應的動作方法，因此於控制器中，必須另外新增兩個動作方法－Update與Delete，完成資料編輯與刪除的功能，下一篇針對這一部份的功能進行討論。
public ActionResult ProductList(string name = null )
{
if (name != null)
{
KTStore db = new KTStore();
var rows = db.Product.Where(x => x.Name.Contains(name));
return View(rows.ToList());
}else
{
return View();
}
}
Name 為使用者於網頁端查詢傳送進來的參數，直接連結至此動作不會有參數值，因此將其預設值設為null，如果這個值是null直接回傳檢視檔案，否則的話，根據name參數調用Where() 方法，取得名稱包含此name字串的的商品，最後將其轉換成為List物件進行回傳。建立此動作的對應檢視檔案ProductList.cshtml，於其中輸入以下的內容：
@model IList<DBModelDemo.Models.Product>
@{
ViewBag.Title = "ProductList";
}
<div>
@using (Html.BeginForm())
{
<p>
<span>品項名稱：</span>@Html.TextBox("Name")
<input type="submit" value="查詢" class="editButton">
@Html.ActionLink("新增一筆商品",
"Insert", "home", null, new { @class = "editButton" })
</p>
}
</div>
<div>
<table>
<tr>
<th>編號</th>
<th>品項名稱</th>
<th>描述說明</th>
<th>價格</th>
<th></th>
<th></th>
</tr>
@if (Model != null)
{
if (Model.Count() > 0)
{
foreach (var product in Model)
{
<tr>
<td>@product.ID</td>
<td>@product.Name</td>
<td>@product.Description</td>
<td>@product.Price</td>
<td>
@Html.ActionLink("編輯",
"Update/" + product.ID,
"Home", null, new { @class = "editButton" })
</td>
<td>
@Html.ActionLink("刪除",
"Delete/" + product.ID,
"Home", null, new { @class = "editButton" })
</td>
</tr>
}
}
}
</table>
</div>
一開始宣告@model 以支援Product物件資料的存取，接下來建立表單並且於其中配置所需的查詢文字方塊與按鈕，加上新增商品的連結以方便使用者切換至前述完成的商品新增頁。
if判斷式檢查是否Model物件為null，是的話表示第一次載入，因此不執行任何資料呈現作業，只顯示表格的標題。
第二段 if 判斷式檢視是否有任何資料回傳，有的話才進行內容的建立作業，逐一取得欄位內容嵌入td元素中。
在每一行結束前，預留「編輯」與「刪除」按鈕連結，讓使用者可以針對特定資料進行編輯與行刪除操作。
完成後的畫面如下，因為沒有查詢參數，直接載入網頁不會有任何商品。
配置好必要的功能之後，現在可以開始測試網頁了，於文字方塊中輸入查詢條件，如果資料庫中的品項名稱包含了文字方塊的關鍵字，則回傳相關的品項資料，例如以下的畫面：
直接按一下「查詢」按鈕進行查詢，空字串被當作參數回傳，所有的資料均符合條件因此到目前為止我們新增的兩筆資料均顯示出來。
輸入特定的品項名稱，按一下「查詢」按鈕即會到符合此查詢參數LINQ的資料。
現在回到編輯與刪除功能，其中預留的內容如下：
<td>
@Html.ActionLink("編輯",
"Update/" + product.ID,
"Home", null, new { @class = "editButton" })
</td>
<td>
@Html.ActionLink("刪除",
"Delete/" + product.ID,
"Home", null, new { @class = "editButton" })
</td>
為了讓使用者按下功能連結能夠調用對應的動作方法，因此於控制器中，必須另外新增兩個動作方法－Update與Delete，完成資料編輯與刪除的功能，下一篇針對這一部份的功能進行討論。
沒有留言:
張貼留言