顯示資料庫資料的資料表 (C#)

發行項
09/27/2024

在此教學課程中，我示範兩種方法來顯示一組資料庫記錄。我在 HTML 資料表中顯示將一組資料庫記錄格式化的兩種方法首先，我展示如何直接在檢視中將資料庫記錄格式化。接著，我示範如何在格式化資料庫記錄時利用部分資料。

此教學課程的目標是說明如何在 ASP.NET MVC 應用程式中顯示資料庫資料的 HTML 資料表。首先，您了解如何使用 Visual Studio 中包含的 Scaffolding 工具來產生會自動顯示一組記錄的檢視。接著，您了解如何在格式化資料庫記錄時使用部分資料做為範本。

建立模型類別

我們將從 Movies 資料庫資料表顯示一組記錄。 Movies 資料庫資料表包含下列各欄：

資料行名稱	資料類型	允許 Null
Id	int	False
標題	Nvarchar(200)	False
主管	NVarchar(50)	False
DateReleased	Datetime	False

為了表示 ASP.NET MVC 應用程式中的 Movies 資料表，我們需要建立模型類別。在此教學課程中，我們使用 Microsoft Entity Framework 建立模型類別。

注意

在此教學課程中，我們使用 Microsoft Entity Framework。不過，請務必了解您可以使用各種不同的技術，從 ASP.NET MVC 應用程式與資料庫互動，包括 LINQ to SQL、NHibernate 或 ADO.NET。

請按照下列步驟啟動實體資料模型精靈：

在 [方案總管] 視窗中，對 [Models] 資料夾按一下滑鼠右鍵，然後依序選取 [新增]、[新項目] 功能表選項。
選取 [資料] 類別，並選取 [ADO.NET 實體資料模型] 範本。
提供資料模型名稱「MoviesDBModel.edmx」，然後按一下 [新增] 按鈕。

按一下 [新增] 按鈕後，[實體資料模型精靈] 隨即出現 (請見圖 1)。請依照下列步驟完成精靈視窗的步驟：

在 [選擇模型內容] 步驟中，選取 [從資料庫產生] 選項。
在 [選擇資料連線] 步驟中，使用 [MoviesDB.mdf] 資料連線和 [MoviesDBEntities] 名稱進行連線設定。按一下 [下一步] 按鈕。
在 [選擇資料庫物件] 步驟中，展開 [資料表] 節點，並選取 [Movies] 資料表。輸入命名空間模型，然後按一下 [完成] 按鈕。

圖 01：建立 LINQ to SQL 類別 (按一下以檢視全尺寸影像)

完成 [實體資料模型精靈] 後，[實體資料模型設計工具] 隨即開啟。設計工具應該顯示 Movies 實體 (參見圖 2)。

圖 02：實體資料模型設計工具 (按一下以檢視完整大小的影像)

繼續之前，我們需要先進行一項變更。實體資料精靈會產生名為「Movies」的模型類別，用來代表電影資料庫資料表。由於我們會以 Movies 類別代表特定電影，因此需要將類別的名稱修改為「Movie」，而不是「Movies」 (是單數，非複數)。

按兩下設計工具介面的類別名稱，並將類別的名稱從「Movies」變更為「Movie」。完成這項變更之後，按一下 [儲存] 按鈕 (磁碟片圖示)，即可產生 Movie 類別。

建立電影控制器

既然我們已經有方法可以表示資料庫記錄，我們可以建立控制器來傳回電影的集合。在 Visual Studio 方案總管視窗中，以滑鼠右鍵按一下 [控制器] 資料夾，然後選取 [新增]、[控制器] 功能表選項 (參見圖 3)。

圖 03：[新增控制器] 功能表 (按一下以檢視全尺寸影像)

當 [新增控制器] 對話方塊出現時，請輸入控制器名稱 MovieController (參見圖 4)。按一下 [ 新增 ] 按鈕以新增控制器。

圖 04：[新增控制器] 對話方塊 (按一下以檢視全尺寸影像)

我們需要修改 Movie 控制器所公開的 Index() 動作，以便傳回資料庫記錄集。修改控制器，使其看起來像清單 1 中的控制器。

清單 1 – Controllers\MovieController.cs

using System.Linq;

using System.Web.Mvc;

using MvcApplication1.Models; 

namespace MvcApplication1.Controllers

{

    public class MovieController : Controller

    {

        //

        // GET: /Movie/ 

        public ActionResult Index()

        {

            var entities = new MoviesDBEntities();

            return View(entities.MovieSet.ToList());

        } 

    }

}

在清單 1 中，MoviesDBEntities 類別是用來表示 MoviesDB 資料庫。若要使用此類別，您必須匯入 MvcApplication1.Models 命名空間，如下所示：

使用 MvcApplication1.Models;

運算式 entities.MovieSet.ToList() 從 Movies 資料庫資料表傳回所有電影的集合。

建立檢視表

在 HTML 資料表中顯示一組資料庫記錄的最簡單方式，就是利用 Visual Studio 所提供的 Scaffolding 的優點。

選取 [建置]、[建置方案] 功能表選項建置您的應用程式。您必須先建置應用程式，才能開啟 [新增檢視] 對話方塊，否則您的資料類別不會出現在對話方塊中。

以滑鼠右鍵按下 Index() 動作，然後選取 [新增檢視] 功能表選項 (參見圖 5)。

圖 05：新增檢視 (按一下以檢視全尺寸影像)

在 [新增檢視] 對話方塊中，勾選標示為 [建立強型別檢視] 核取方塊。選取 Movie 類別做為檢視資料類別。選取 [清單 ] 做為檢視內容 (參見圖 6)。選取這些選項後，會產生顯示電影清單的強型別檢視。

圖 06：[新增檢視] 對話方塊 (按一下以檢視全尺寸影像)

按一下 [新增 ] 按鈕之後，就會自動產生清單 2 中的檢視。此檢視包含逐一查看電影集合，並顯示每個電影屬性所需的程式碼。

清單 2 – Views\Movie\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Movie>>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

      Index

</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <table>

        <tr>

            <th></th>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% foreach (var item in Model) { %>

        <tr>

            <td>

                <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |

                <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>

            </td>

            <td>

                <%= Html.Encode(item.Id) %>

            </td>

            <td>

                <%= Html.Encode(item.Title) %>

            </td>

            <td>

                <%= Html.Encode(item.Director) %>

            </td>

            <td>

                <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>

            </td>

        </tr>

    <% } %> 

    </table> 

    <p>

        <%= Html.ActionLink("Create New", "Create") %>

    </p> 

</asp:Content>

您可以選取功能表選項 [偵錯]、[開始偵錯] 或點擊 F5 鍵來執行應用程式。執行應用程式會啟動 Internet Explorer。如果您瀏覽至 /Movie URL，您會看到圖 7 中的頁面。

圖 07：電影資料表 (按一下以檢視全尺寸影像)

如果您不喜歡圖 7 中資料庫記錄方格外觀的任何項目，您可以直接修改 [索引] 檢視。例如，您可以透過修改 [索引] 檢視，將 DateReleased 標頭變更為 [發行日期]。

使用部分資料建立範本

當檢視表變得太複雜時，最好開始將檢視表拆分成小部分。使用部分資料可讓您的檢視表更容易理解和維護。我們會建立局部以用來做為範本，將每個電影資料庫記錄格式化。

請遵循下列步驟來建立局部：

以滑鼠右鍵按一下 Views\Movie 資料夾，然後選取 [新增檢視] 功能表選項。
核取標示為 建立部分檢視 (.ascx) 的核取方塊。
命名局部 MovieTemplate。
勾選標示為 [建立強型別檢視] 的核取方塊。
選取 [電影] 做為檢視資料類別。
選取 [空白] 做為檢視內容。
按一下 [新增] 按鈕，將局部新增至您的專案。

完成這些步驟後，將 MovieTemplate 局部修改為清單 3。

清單 3 – Views\Movie\MovieTemplate.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication1.Models.Movie>" %> 

<tr>

    <td>

        <%= Html.Encode(Model.Id) %>

    </td>

    <td>

        <%= Html.Encode(Model.Title) %>

    </td>

    <td>

        <%= Html.Encode(Model.Director) %>

    </td>

    <td>

        <%= Html.Encode(String.Format("{0:g}", Model.DateReleased)) %>

    </td>

</tr>

清單 3 中的局部包含單一記錄列的範本。

清單 4 中修改過的索引檢視表會使用 MovieTemplate 局部。

清單 4 – Views\Movie\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Movie>>" %> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <table>

        <tr>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% foreach (var item in Model) { %>

        <% Html.RenderPartial("MovieTemplate", item); %>

    <% } %> 

    </table> 

</asp:Content>

清單 4 中的檢視表包含逐一查看所有電影的 Foreach 迴圈。對於每部電影，MovieTemplate 局部是用來格式化電影。 MovieTemplate 是藉由呼叫 RenderPartial() Helper 方法來轉譯。

修改過的索引檢視表，會轉譯資料庫記錄的相同 HTML 資料表。不過，檢視表已大幅簡化。

RenderPartial() 方法與其他大多數 Helper 方法不同，因為它不會傳回字串。因此，您必須使用 <% Html.RenderPartial(); %> 而不是使用 <%= Html.RenderPartial(); %> 來呼叫 RenderPartial() 方法。

摘要

本教學課程的目的，是要說明如何在 HTML 資料表中顯示一組資料庫記錄。首先，您已了解如何利用 Microsoft Entity Framework，從控制器動作傳回一組資料庫記錄。接著，您已了解如何使用 Visual Studio Scaffolding 產生自動顯示項目集合的檢視表。最後，您已了解如何利用部分資料來簡化檢視表。您已了解如何使用部分資料做為範本，以便格式化每個資料庫記錄。

上一個下一個

共用方式為

顯示資料庫資料的資料表 (C#)

建立模型類別

建立電影控制器

建立檢視表

使用部分資料建立範本

摘要

意見反應

其他資源