使用 ASP.NET MVC 在 15 分鐘內建立影片資料庫應用程式 (VB)

發行項
09/27/2024

Stephen Walther 會從頭到尾建置整個由資料庫驅動的 ASP.NET MVC 應用程式。本教學課程非常適合新手入門，歡迎剛開始接觸 ASP.NET MVC Framework 或想瞭解 ASP.NET MVC 應用程式程式建置程序的使用者加入。

本教學課程的目的是讓您掌握建置 ASP.NET MVC 應用程式的「感覺」。在本教學課程中，我會從頭到尾詳細介紹如何建置整個 ASP.NET MVC 應用程式。我會示範如何建置簡易的資料庫驅動應用程式，包括如何列出、建立和編輯資料庫記錄。

為簡化應用程式的建置程序，我們將利用 Visual Studio 2008 的 Scaffolding (建構) 功能。我們會讓 Visual Studio 產生控制器、模型和檢視的初始程式碼及內容。

如果您使用過 Active Server Pages 或 ASP.NET，使用 ASP.NET MVC 時應該也會覺得很熟悉。 ASP.NET MVC 檢視非常類似 Active Server Pages 應用程式中的頁面。而且，如同傳統的 ASP.NET Web Form 應用程式，ASP.NET MVC 可讓您完整存取 .NET Framework 中一系列豐富的語言和類別。

希望本教學課程有助於您瞭解 ASP.NET MVC 應用程式與 Active Server Pages 或 ASP.NET Web Form 應用程式，在建置體驗上有哪些相似與不同之處。

電影資料庫應用程式概觀

我們的目標是盡量化繁為簡，因此將建置非常簡易的電影資料庫應用程式。簡易的電影資料庫應用程式將可執行以下三個動作：

列出一組電影資料庫記錄
建立新的電影資料庫記錄
編輯現有的電影資料庫記錄

再次強調，我們希望專案能盡量簡化，因此建置應用程式時，只會建置需要達到的 ASP.NET MVC 架構功能數目下限。例如，我們不會採用測試導向開發功能。

若要建立應用程式，必須完成下列各項步驟：

建立 ASP.NET MVC Web 應用程式專案
建立資料庫
建立資料庫模型
建立 ASP.NET MVC 控制器
建立 ASP.NET MVC 檢視

準備工作

您需要 Visual Studio 2008 或 Visual Web Developer 2008 Express，才能建置 ASP.NET MVC 應用程式。此外，也需要下載 ASP.NET MVC 架構。

如果您沒有 Visual Studio 2008，可從這個網站下載 Visual Studio 2008 的 90 天試用版：

https://msdn.microsoft.com/vs2008/products/cc268305.aspx

或者，您可以使用 Visual Web Developer Express 2008 建立 ASP.NET MVC 應用程式。如果您決定使用 Visual Web Developer Express，則須安裝 Service Pack 1。您可以從這個網站下載 Visual Web Developer 2008 Express 含 Service Pack 1：

https://www.microsoft.com/downloads/details.aspx?FamilyId=BDB6391C-05CA-4036-9154-6DF4F6DEBD14&displaylang=en

安裝 Visual Studio 2008 或 Visual Web Developer 2008 之後，您需要安裝 ASP.NET MVC 架構。您可從下列網站下載 ASP.NET MVC 架構：

https://www.asp.net/mvc/

注意

您可利用 Web Platform Installer，而不是個別下載 ASP.NET 架構和 ASP.NET MVC 架構。 Web Platform Installer 是一個應用程式，可讓您輕鬆地管理已安裝的應用程式是您的電腦。

建立 ASP.NET MVC Web 應用程式專案

首先，我們從在 Visual Studio 2008 中建立新的 ASP.NET MVC Web 應用程式專案開始。依序選取 [檔案] 和 [新增專案] 功能表選項，即可看到圖 1 中的 [新增專案] 對話方塊。選取 Visual Basic 作為程式設計語言，然後選取 ASP.NET MVC Web 應用程式專案範本。將專案命名為 MovieApp，然後按下 [確定] 按鈕。

圖 01：[新增專案] 對話方塊 (按一下檢視完整大小的影像)

請務必從 [新增專案] 對話方塊頂端的下拉式清單選取 .NET Framework 3.5，否則不會出現 ASP.NET MVC Web 應用程式專案範本。

每當您建立新的 MVC Web 應用程式專案，Visual Studio 就會提示您建立個別的單元測試專案。圖 2 中的對話方塊隨即出現。基於時間有限，本教學課程不會建立測試作業 (很抱歉，我們確實有點愧疚)，請選取 [否] 選項，然後按一下 [確定] 按鈕。

注意

Visual Web Developer 不支援測試專案。

圖 02：[建立單元測試專案] 對話方塊 (按一下以檢視完整大小的影像)

ASP.NET MVC 應用程式有一組標準資料夾：Models (模型)、Views (檢視) 和 Controllers (控制器) 資料夾。您可以在 [方案總管] 視窗中看到這組標準資料夾。我們需要將檔案新增至每個模型、檢視和控制器資料夾，才能建置電影資料庫應用程式。

您使用 Visual Studio 建立新的 MVC 應用程式時，可取得範例應用程式。因為我們想要從頭開始，所以必須刪除此範例應用程式的內容。您需要刪除下列檔案及資料夾：

Controllers\HomeController.vb
Views\Home

建立資料庫

我們需要建立資料庫，以保存電影資料庫記錄。很幸運，Visual Studio 內含免費資料庫「SQL Server Express 」。請按照這些步驟建立資料庫：

在 [方案總管] 視窗中，對 [App_Data] 資料夾按一下滑鼠右鍵，然後依序選取 [新增]、[新項目] 功能表選項。
選取 [資料] 類別，然後選取 [SQL Server 資料庫] 範本 (請見圖 3)。
命名新的資料庫 MoviesDB.mdf，然後按一下 [新增] 按鈕。

建立資料庫後，請在 App_Data資料夾中按兩下 [MoviesDB.mdf] 檔案，即可連結資料庫。按兩下 [MoviesDB.mdf] 檔案可開啟 [伺服器總管] 視窗。

注意

在 Visual Web Developer 中，[伺服器總管] 視窗的名稱為 [資料庫總管] 視窗。

圖 03：建立 Microsoft SQL Server 資料庫 (按一下以檢視完整大小的影像)

接下來，我們需要建立新的資料庫資料表。從 [伺服器總管] 視窗中，對 [資料表] 資料夾按一下滑鼠右鍵，然後選取 [新增資料表] 功能表選項。選取此功能表選項會開啟資料庫資料表設計工具。建立以下資料庫資料行：

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

第一行 (識別碼資料行) 有兩個特殊屬性。首先，您必須將 [識別碼] 資料行標為主索引鍵資料行。選取 [識別碼] 資料行後，按一下 [設定主索引鍵] 按鈕 (看起來像鑰匙圖示）。第二，您必須將 [識別碼] 資料行標為 [識別碼] 資料行。在 [資料行] 屬性視窗中，向下捲動至 [識別碼] 規格區段並展開。將 [是識別碼]Is Identity 的屬性值變更為 [是]。完成後，資料表看起來應該會像圖 4。

圖 04：電影資料庫資料表 (按一下以檢視完整大小的影像)

最後一步驟是儲存新的資料表。按一下 [儲存] 按鈕 (磁片圖示)，然後將新資料表命名為 Movies。

建立資料表後，請將一些電影記錄新增至數據表。以滑鼠右鍵按兩下 [伺服器總管] 視窗中的 [電影] 資料表，然後選取 [顯示資料表資料] 選單選項。輸入您最愛的電影清單 (請見圖 5)。

圖 05：輸入電影記錄 (按一下以檢視完整大小的影像)

建立模型

接下來，我們需要建立一組代表資料庫的類別。我們需要建立資料庫模型。我們將利用 Microsoft Entity Framework，自動產生資料庫模型的類別。

注意

ASP.NET MVC 架構不會繫結至 Microsoft Entity Framework。您可利用各種物件關聯式對應 (OR/M) 工具來建立資料庫模型類別，包括 LINQ to SQL、Subsonic 和 NHibernate。

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

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

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

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

圖 06：使用 [實體資料模型精靈] 產生資料庫模型 (按一下以檢視完整大小的影像)

完成 [實體資料模型精靈] 後，[實體資料模型設計工具] 隨即開啟。設計工具應會顯示電影資料庫資料表 (請見圖 7)。

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

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

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

建立 ASP.NET MVC 控制器

下一步是建立 ASP.NET MVC 控制器。控制器負責控制使用者如何與 ASP.NET MVC 應用程式互動。

執行下列步驟:

在 [方案總管] 視窗中，對 [Controllers] 資料夾按一下滑鼠右鍵，然後依序選取 [新增]、[控制器] 功能表選項。
在 [新增控制器] 對話方塊中，輸入名稱「HomeController」，並勾選標有 [新增建立、更新和詳細資料情境的動作方法] 的核取方塊 (請見圖 8)。
按一下 [新增] 按鈕，將新的控制器新增至專案。

完成這些步驟後，清單 1 中的控制器即已建立。請注意，其中包含名為 Index、Details、Create 和 Edit 的方法。在下列各節中，我們將新增必要的程式碼，這些方法才能運作。

圖 08：新增 ASP.NET MVC 控制器 (按一下以檢視完整大小的影響)

清單 1 – Controllers\HomeController.vb

Public Class HomeController

        Inherits System.Web.Mvc.Controller 

        '

        ' GET: /Home/ 

        Function Index() As ActionResult

            Return View()

        End Function 

        '

        ' GET: /Home/Details/5 

        Function Details(ByVal id As Integer) As ActionResult

            Return View()

        End Function 

        '

        ' GET: /Home/Create 

        Function Create() As ActionResult

            Return View()

        End Function 

        '

        ' POST: /Home/Create 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Create(ByVal collection As FormCollection) As ActionResult

            Try

                ' TODO: Add insert logic here

                Return RedirectToAction("Index")

            Catch

                Return View()

            End Try

        End Function 

        '

        ' GET: /Home/Edit/5 

        Function Edit(ByVal id As Integer) As ActionResult

            Return View()

        End Function 

        '

        ' POST: /Home/Edit/5 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult

            Try

                ' TODO: Add update logic here 

                Return RedirectToAction("Index")

            Catch

                Return View()

            End Try

        End Function

    End Class

列出資料庫記錄

首頁控制器的 Index() 方法是 ASP.NET MVC 應用程式的預設方法。執行 ASP.NET MVC 應用程式時，系統呼叫的第一個控制器方法是 Index()。

我們將使用 Index() 方法，顯示電影資料庫資料表中的記錄清單。我們將利用稍早建立的資料庫模型類別，透過 Index() 方法擷取電影資料庫記錄。

我已修改清單 2 中的 HomeController 類別，使其包含新的私人欄位，稱為「_db」。 MoviesDBEntities 類別代表資料庫模型，我們將使用該類別與資料庫通訊。

我也修改了清單 2 中的 Index() 方法。 Index() 方法會使用 MoviesDBEntities 類別，從電影資料庫資料表擷取所有電影記錄。運算式 _db.MovieSet.ToList() 會從電影資料庫資料表傳回所有電影記錄的清單。

影片清單會傳遞至檢視。凡是傳遞至 View() 方法的所有項目，都將以檢視資料的形式傳遞至檢視。

清單 2 – Controllers/HomeController.vb (Index 方法已修改)

Public Class HomeController

        Inherits System.Web.Mvc.Controller 

        Private _db As New MoviesDBEntities() 

        Function Index() As ActionResult

            Return View(_db.MovieSet.ToList())

        End Function

    End Class

Index() 方法會傳回名為「Index」的檢視。我們需要建立此檢視，以顯示電影資料庫記錄的清單。執行下列步驟:

在開啟 [新增檢視] 對話方塊之前，您應先建置專案 (依序選取 [建置]、[建置解決方案] 功能表選項) 對話方塊，否則 [檢視資料類別] 下拉式清單中不會顯示任何類別。

在程式碼編輯器中，對 Index() 方法按一下滑鼠右鍵，然後選取 [新增檢視] 功能表選項 (請見圖 9)。
在 [新增檢視] 對話方塊中，確認標為 [建立強型別檢視] 的核取方塊已勾選。
從 [檢視內容] 下拉式清單中，選取 [值] 值。
從 [檢視資料類別] 下拉式清單，選取 [MovieApp.Movie] 值。。
按一下 [新增] 按鈕建立新的檢視 (請見圖 10)。

完成這些步驟後，名為「Index.aspx」的新檢視將新增至 [Views\Home] 資料夾。清單 3 包含索引檢視的內容。

圖 09：從控制器動作新增檢視 (按一下以檢視完整大小的影像)

圖 10：使用 [新增檢視] 對話方塊建立新的檢視 (按一下以檢視完整大小的影像)

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of MovieApp.Movie))" %> 

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

       Index

    </asp:Content> 

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

        <h2>Index</h2> 

        <p>

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

        </p>

        <table>

            <tr>

                <th></th>

                <th>

                    Id

                </th>

                <th>

                    Title

                </th>

                <th>

                    Director

                </th>

                <th>

                    DateReleased

                </th>

            </tr> 

        <% For Each item In Model%>

            <tr>

                <td>

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

                    <%=Html.ActionLink("Details", "Details", New With {.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>

        <% Next%> 

        </table> 

    </asp:Content>

[索引] 檢視會顯示 HTML 資料表內，電影資料庫資料表中的所有電影記錄。檢視包含 For Each 迴圈，會逐一查看 ViewData.Model 屬性代表的每部電影。若您按 F5 鍵執行應用程式，則會看到圖 11 中的網頁。

圖 11：索引檢視 (按一下以檢視完整大小的影像)

建立新的資料庫記錄

在上一節中，我們建立的索引檢視包含建立新資料庫記錄的連結。接著我們繼續實作邏輯，並建立需要的檢視，以用於建立新的電影資料庫記錄。

首頁控制器包含兩個名為 Create() 方法。第一個 Create() 方法沒有參數。 Create() 方法的這個多載用來顯示 HTML 表單，以建立新的電影資料庫記錄。

第二個 Create() 方法具有 FormCollection 參數。用於建立新電影的 HTML 表單張貼到伺服器時，系統會呼叫 Create() 方法的這個多載。請注意，除非執行 HTTP Post 作業，否則第二個 Create() 方法具有 AcceptVerbs 屬性能防止呼叫方法。

在清單 4 內已更新的 HomeController 類別中，第二個 Create() 方法已經過修改。新版本的 Create() 方法可接受 Movie 參數，且包含可將新電影插入電影資料庫資料表的邏輯。

注意

請注意 Bind 屬性。由於我們不想要從 HTML 表單更新電影識別碼屬性，因此必須明確排除這個屬性。

清單 4 – Controllers\HomeController.vb (Create 方法已修改)

Function Create() As ActionResult

            Return View()

        End Function 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Create(<_bind28_exclude3a_3d_22_id22_29_> ByVal movieToCreate As Movie) As ActionResult 

            If Not ModelState.IsValid Then

                Return View()

            End If 

            _db.AddToMovieSet(movieToCreate)

            _db.SaveChanges() 

            Return RedirectToAction("Index")

        End Function 
<!--_bind28_exclude3a_3d_22_id22_29_-->

Visual Studio 可讓您輕鬆建立表單，然後用於建立新的電影資料庫記錄 (請見圖 12)。執行下列步驟:

在程式碼編輯器中，對 Create() 方法按一下滑鼠右鍵，然後選取 [新增檢視] 功能表選項。
確認已勾選標為 [建立強型別檢視] 的核取方塊。
從 [檢視內容] 下拉式清單中，選取 [建立] 值。
從 [檢視資料類別] 下拉式清單，選取 [MovieApp.Movie] 值。。
按一下 [新增] 按鈕以建立新檢視。

圖 12：新增 [建立] 檢視 (按一下以檢視完整大小的影像)

Visual Studio 會在清單 5 中自動產生檢視。此檢視包含 HTML 表單，其中包含對應至 Movie 類別各屬性的欄位。

清單 5 – Views\Home\Create.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MovieApp.Movie)" %> 

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

       Create

    </asp:Content> 

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

        <h2>Create</h2> 

        <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %> 

        <% Using Html.BeginForm()%> 

            <fieldset>

                <legend>Fields</legend>

                <p>

                    <label for="Id">Id:</label>

                    <%= Html.TextBox("Id") %>

                    <%= Html.ValidationMessage("Id", "*") %>

                </p>

                <p>

                    <label for="Title">Title:</label>

                    <%= Html.TextBox("Title") %>

                    <%= Html.ValidationMessage("Title", "*") %>

                </p>

                <p>

                    <label for="Director">Director:</label>

                    <%= Html.TextBox("Director") %>

                    <%= Html.ValidationMessage("Director", "*") %>

                </p>

                <p>

                    <label for="DateReleased">DateReleased:</label>

                    <%= Html.TextBox("DateReleased") %>

                    <%= Html.ValidationMessage("DateReleased", "*") %>

                </p>

                <p>

                    <input type="submit" value="Create" />

                </p>

            </fieldset> 

        <% End Using %> 

        <div>

            <%=Html.ActionLink("Back to List", "Index") %>

        </div> 

    </asp:Content>

注意

由 [新增檢視] 對話方塊產生的 HTML 表單將產生識別碼表單欄位。由於 [識別碼] 資料行即用來識別，所以不需要此表單欄位，請放心移除。

新增 [建立] 檢視之後，您可以將新的電影記錄新增至資料庫。按 F5 鍵執行應用程式，然後按下 [新建] 連結，即可查看圖 13 中的表單。完成並提交表單，新的電影資料庫記錄隨即建立。

請注意，您將自動取得表單驗證。若未輸入電影的發行日期，或輸入無效的發行日期，則表單將會重新顯示並醒目標註日期欄位。

圖 13：建立新的電影資料庫記錄 (按一下以檢視完整大小的影像)

編輯現有的資料庫記錄

在前幾節中，我們討論了如何列出和建立新的資料庫記錄。最後一節我們將討論如何編輯現有的資料庫記錄。

首先，我們需要產生編輯表單。這個步驟很簡單，因為 Visual Studio 可自動產生編輯表單。在 Visual Studio 程式碼編輯器中開啟 HomeController.vb 類別，然後依下列步驟進行：

在程式碼編輯器中，對 Edit() 方法按一下滑鼠右鍵，然後選取 [新增檢視] 功能表選項 (請見圖 14)。
勾選標示為 [建立強型別檢視] 的核取方塊。
從 [檢視內容] 下拉式清單中，選取 [編輯] 值。
從 [檢視資料類別] 下拉式清單，選取 [MovieApp.Movie] 值。。
按一下 [新增] 按鈕以建立新檢視。

完成這些步驟，名為 Edit.aspx 的新檢視隨即新增至 Views\Home 資料夾。此檢視包含用於編輯電影記錄的 HTML 表單。

圖 14：新增 [編輯] 檢視 (按一下以檢視完整大小的影像)

注意

[編輯] 檢視包含對應至電影識別碼屬性的 HTML 表單欄位。由於您不希望其他人編輯識別碼屬性的值，因此應移除此表單欄位。

最後，我們需要修改首頁控制器，使其支援編輯資料庫記錄。清單 6 已包含更新的 HomeController 類別。

清單 6 – Controllers\HomeController.vb (Edit 方法)

Function Edit(ByVal id As Integer) As ActionResult

            Dim movieToEdit = (From m In _db.MovieSet _

                           Where m.Id = id _

                           Select m).First() 

            Return View(movieToEdit)

        End Function 

        <AcceptVerbs(HttpVerbs.Post)> _

        Function Edit(ByVal movieToEdit As Movie) As ActionResult 

            Dim originalMovie = (From m In _db.MovieSet _

                       Where m.Id = movieToEdit.Id _

                       Select m).First() 

            If Not ModelState.IsValid Then

                Return View(originalMovie)

            End If 

            _db.ApplyPropertyChanges(originalMovie.EntityKey.EntitySetName, movieToEdit)

            _db.SaveChanges() 

            Return RedirectToAction("Index")

        End Function

在清單 6 中，我已將額外的邏輯新增至 Edit() 方法的兩個多載。第一個 Edit() 方法會傳回電影資料庫記錄 (對應至傳遞給方法的識別碼參數)。第二個多載會執行資料庫中的電影記錄更新。

請注意，您必須擷取原始電影，然後呼叫 ApplyPropertyChanges()，以更新資料庫中現有的電影。

摘要

本教學課程的目的是讓您概略瞭解如何建置 ASP.NET MVC 應用程式。希望您會覺得建置 ASP.NET MVC Web 應用程式，與建置 Active Server Pages 或 ASP.NET 應用程式很類似。

在本教學課程中，我們只介紹了 ASP.NET MVC 架構中最基本的功能。在未來的教學課程中，我們會深入探討控制器、控制器動作、檢視、檢視資料和 HTML 協助程式等主題。

上一筆

共用方式為