第7部分: Razor 在頁面中新增欄位,ASP.NET Core

作者:Rick Anderson

檢視或下載範例程式碼 (如何下載)。

在本節中,您會使用 Entity Framework Code First 移轉:

  • 在模型中新增一個欄位。
  • 將新的欄位結構描述變更移轉至資料庫。

使用 EF Code First 自動建立資料庫時,Code First 會:

  • __EFMigrationsHistory 資料表加入至資料庫,以追蹤資料庫的架構是否與其產生的模型類別同步。
  • 如果模型類別未與資料庫同步,EF 會擲回例外狀況。

架構和模型同步的自動驗證,可讓您更輕鬆地找到不一致的資料庫程式碼問題。

將 Rating 屬性新增至電影模型

  1. 開啟 Models/Movie.cs 檔案,然後新增 Rating 屬性:

    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
    
        [Display(Name = "Release Date")]
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
    
        [Column(TypeName = "decimal(18, 2)")]
        public decimal Price { get; set; }
        public string Rating { get; set; }
    }
    
  2. 建置應用程式。

  3. 編輯 Pages/電影/ Index cshtml,然後新增 Rating 欄位:

    @page
    @model RazorPagesMovie.Pages.Movies.IndexModel
    
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <p>
        <a asp-page="Create">Create New</a>
    </p>
    
    <form>
        <p>
            <select asp-for="MovieGenre" asp-items="Model.Genres">
                <option value="">All</option>
            </select>
            Title: <input type="text" asp-for="SearchString" />
            <input type="submit" value="Filter" />
        </p>
    </form>
    
    <table class="table">
    
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Title)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Genre)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Price)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Rating)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Movie)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Title)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ReleaseDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Genre)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Rating)
                    </td>
                    <td>
                        <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                        <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                        <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    
  4. 更新下列頁面:

    1. Rating 欄位新增至 Delete 和 Details 頁面。
    2. 使用 Rating 欄位更新 Create.cshtml
    3. Rating 欄位新增至 Edit 頁面。

在資料庫更新為包含新欄位之前,應用程式將無法運作。 在沒有資料庫更新的情況下執行應用程式,會擲回 SqlException

SqlException: Invalid column name 'Rating'.

SqlException例外狀況是因為更新的電影模型類別與資料庫之電影資料表的架構不同而造成。 Rating資料庫資料表中沒有資料行。

有幾個方法可以解決這個錯誤:

  1. 讓 Entity Framework 自動卸除資料庫,並使用新的模型類別結構描述來重新建立資料庫。 這種方法在開發週期初期很方便,可讓您快速地將模型和資料庫架構一起演進。 缺點是會遺失在資料庫中的現有資料。 請勿在生產環境資料庫上使用此方法! 在架構變更上卸載資料庫,並使用初始化運算式以使用測試資料自動植入資料庫,通常是開發應用程式的有效方式。

  2. 您可明確修改現有資料庫的結構描述,使其符合模型類別。 這種方法的優點是保留資料。 請手動或藉由建立資料庫變更腳本來進行這項變更。

  3. 使用 Code First 移轉來更新資料庫結構描述。

在本教學課程中,請使用 Code First 移轉。

更新 SeedData 類別,使其提供新資料行的值。 範例變更如下所示,但對每個區塊進行這項變更 new Movie

context.Movie.AddRange(
    new Movie
    {
        Title = "When Harry Met Sally",
        ReleaseDate = DateTime.Parse("1989-2-12"),
        Genre = "Romantic Comedy",
        Price = 7.99M,
        Rating = "R"
    },

請參閱完整的 SeedData.cs 檔案 (英文)。

建置方案。

新增評等欄位的移轉

  1. 從 [工具] 功能表中,選取 [NuGet 套件管理員] > [套件管理員主控台]。

  2. 在 PMC 中,輸入下列命令:

    Add-Migration Rating
    Update-Database
    

Add-Migration 命令會告知架構,以便:

  • 比較 Movie 模型與 Movie 資料庫架構。
  • 建立程式碼,將資料庫架構遷移至新的模型。

"Rating" 是用來命名移轉檔案的任意名稱。 建議您針對移轉檔案使用有意義的名稱,這更加實用。

Update-Database 命令會指示架構將架構變更套用至資料庫,並保留現有的資料。

刪除資料庫中的所有記錄,初始化運算式會植入資料庫,並包含 Rating 欄位。 您可以使用瀏覽器中的刪除連結或從 Sql Server 物件總管 (SSOX) 來刪除。

另一個選擇是刪除資料庫並使用移轉重新建立資料庫。 若要在 SSOX 中刪除資料庫:

  1. 在 SSOX 中選取資料庫。

  2. 以滑鼠右鍵按一下資料庫,然後選取 [ 刪除]。

  3. 勾選 [ 關閉現有的連接]。

  4. 選取 [確定]。

  5. PMC中,更新資料庫:

    Update-Database
    

執行應用程式,並確認您可以使用 Rating 欄位建立/編輯/顯示電影。 若未植入資料庫,請在 SeedData.Initialize 方法中設定中斷點。

其他資源

檢視或下載範例程式碼 (如何下載)。

在本節中,您會使用 Entity Framework Code First 移轉:

  • 在模型中新增一個欄位。
  • 將新的欄位結構描述變更移轉至資料庫。

使用 EF Code First 自動建立資料庫時,Code First 會:

  • __EFMigrationsHistory 資料表加入至資料庫,以追蹤資料庫的架構是否與其產生的模型類別同步。
  • 如果模型類別未與資料庫同步,EF 會擲回例外狀況。

架構和模型同步的自動驗證,可讓您更輕鬆地找到不一致的資料庫程式碼問題。

將 Rating 屬性新增至電影模型

  1. 開啟 Models/Movie.cs 檔案,然後新增 Rating 屬性:

    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
    
        [Display(Name = "Release Date")]
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
    
        [Column(TypeName = "decimal(18, 2)")]
        public decimal Price { get; set; }
        public string Rating { get; set; }
    }
    
  2. 建置應用程式。

  3. 編輯 Pages/電影/ Index cshtml,然後新增 Rating 欄位:

    @page
    @model RazorPagesMovie.Pages.Movies.IndexModel
    
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <p>
        <a asp-page="Create">Create New</a>
    </p>
    
    <form>
        <p>
            <select asp-for="MovieGenre" asp-items="Model.Genres">
                <option value="">All</option>
            </select>
            Title: <input type="text" asp-for="SearchString" />
            <input type="submit" value="Filter" />
        </p>
    </form>
    
    <table class="table">
    
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Title)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Genre)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Price)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Rating)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Movie)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Title)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ReleaseDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Genre)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Rating)
                    </td>
                    <td>
                        <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                        <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                        <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    
  4. 更新下列頁面:

    1. Rating 欄位新增至 Delete 和 Details 頁面。
    2. 使用 Rating 欄位更新 Create.cshtml
    3. Rating 欄位新增至 Edit 頁面。

在資料庫更新為包含新欄位之前,應用程式將無法運作。 在沒有資料庫更新的情況下執行應用程式,會擲回 SqlException

SqlException: Invalid column name 'Rating'.

SqlException例外狀況是因為更新的電影模型類別與資料庫之電影資料表的架構不同而造成。 Rating資料庫資料表中沒有資料行。

有幾個方法可以解決這個錯誤:

  1. 讓 Entity Framework 自動卸除資料庫,並使用新的模型類別結構描述來重新建立資料庫。 這種方法在開發週期初期很方便,可讓您快速地將模型和資料庫架構一起演進。 缺點是會遺失在資料庫中的現有資料。 請勿在生產環境資料庫上使用此方法! 在架構變更上卸載資料庫,並使用初始化運算式以使用測試資料自動植入資料庫,通常是開發應用程式的有效方式。

  2. 您可明確修改現有資料庫的結構描述,使其符合模型類別。 這種方法的優點是保留資料。 請手動或藉由建立資料庫變更腳本來進行這項變更。

  3. 使用 Code First 移轉來更新資料庫結構描述。

在本教學課程中,請使用 Code First 移轉。

更新 SeedData 類別,使其提供新資料行的值。 範例變更如下所示,但對每個區塊進行這項變更 new Movie

context.Movie.AddRange(
    new Movie
    {
        Title = "When Harry Met Sally",
        ReleaseDate = DateTime.Parse("1989-2-12"),
        Genre = "Romantic Comedy",
        Price = 7.99M,
        Rating = "R"
    },

請參閱完整的 SeedData.cs 檔案 (英文)。

建置方案。

新增評等欄位的移轉

  1. 從 [工具] 功能表中,選取 [NuGet 套件管理員] > [套件管理員主控台]。

  2. 在 PMC 中,輸入下列命令:

    Add-Migration Rating
    Update-Database
    

Add-Migration 命令會告知架構,以便:

  • 比較 Movie 模型與 Movie 資料庫架構。
  • 建立程式碼,將資料庫架構遷移至新的模型。

"Rating" 是用來命名移轉檔案的任意名稱。 建議您針對移轉檔案使用有意義的名稱,這更加實用。

Update-Database 命令會指示架構將架構變更套用至資料庫,並保留現有的資料。

如果您刪除資料庫中的所有記錄,初始化運算式將會植入資料庫,並包含 Rating 欄位。 您可以使用瀏覽器或 Sql Server 物件總管 (SSOX) 的刪除連結來執行這項操作。

另一個選擇是刪除資料庫並使用移轉重新建立資料庫。 若要在 SSOX 中刪除資料庫:

  • 在 SSOX 中選取資料庫。

  • 以滑鼠右鍵按一下資料庫,然後選取 [ 刪除]。

  • 勾選 [ 關閉現有的連接]。

  • 選取 [確定]。

  • PMC中,更新資料庫:

    Update-Database
    

執行應用程式,並確認您可以使用 Rating 欄位建立/編輯/顯示電影。 若未植入資料庫,請在 SeedData.Initialize 方法中設定中斷點。

其他資源

在本節中,您會使用 Entity Framework Code First 移轉:

  • 在模型中新增一個欄位。
  • 將新的欄位結構描述變更移轉至資料庫。

使用 EF Code First 自動建立和追蹤資料庫時,Code First:

  • __EFMigrationsHistory 資料表加入至資料庫,以追蹤資料庫的架構是否與其產生的模型類別同步。
  • 如果模型類別未與資料庫同步,則會擲回例外狀況。

架構和模型同步的自動驗證,可讓您更輕鬆地找到不一致的資料庫程式碼問題。

將 Rating 屬性新增至電影模型

  1. 開啟 模型/Movie .cs 檔案,然後新增 Rating 屬性: [!code-csharp]

  2. 編輯 Pages/電影/ Index cshtml,然後新增 Rating 欄位:

    @page
    @model RazorPagesMovie.Pages.Movies.IndexModel
    
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <p>
        <a asp-page="Create">Create New</a>
    </p>
    
    <form>
        <p>
            <select asp-for="MovieGenre" asp-items="Model.Genres">
                <option value="">All</option>
            </select>
            Title: <input type="text" asp-for="SearchString" />
            <input type="submit" value="Filter" />
        </p>
    </form>
    
    <table class="table">
    
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Title)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Genre)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Price)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Movie[0].Rating)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Movie)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Title)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ReleaseDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Genre)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Rating)
                    </td>
                    <td>
                        <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |
                        <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |
                        <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    
  3. 以欄位更新 [刪除]、[詳細資料]、[建立] 和 [編輯] 頁面 Rating

在資料庫更新為包含新欄位之前,應用程式將無法運作。 在沒有資料庫更新的情況下執行應用程式,會擲回 SqlException

SqlException: Invalid column name 'Rating'.

SqlException例外狀況是因為更新的電影模型類別與資料庫之電影資料表的架構不同而造成。 Rating資料庫資料表中沒有資料行。

有幾個方法可以解決這個錯誤:

  1. 讓 Entity Framework 自動卸除資料庫,並使用新的模型類別結構描述來重新建立資料庫。 這種方法在開發週期初期很方便,讓開發人員能夠快速地將模型和資料庫架構一起演進。 缺點是資料庫中現有的資料會遺失。 請勿在生產環境資料庫上使用此方法! 在架構變更上卸載資料庫,並使用初始化運算式以使用測試資料自動植入資料庫,通常是開發應用程式的有效方式。
  2. 您可明確修改現有資料庫的結構描述,使其符合模型類別。 這種方法的優點是保留資料。 請手動或藉由建立資料庫變更腳本來進行這項變更。
  3. 使用 Code First 移轉來更新資料庫結構描述。

在本教學課程中,請使用 Code First 移轉。

更新 SeedData 類別,使其提供新資料行的值。 範例變更如下所示,但對每個區塊進行這項變更 new Movie

context.Movie.AddRange(
    new Movie
    {
        Title = "When Harry Met Sally",
        ReleaseDate = DateTime.Parse("1989-2-12"),
        Genre = "Romantic Comedy",
        Price = 7.99M,
        Rating = "R"
    },

請參閱完整的 SeedData.cs 檔案 (英文)。

建置方案。

新增評等欄位的移轉

  1. 從 [工具] 功能表中,選取 [NuGet 套件管理員] > [套件管理員主控台]。

  2. 在 PMC 中,輸入下列命令:

    Add-Migration Rating
    Update-Database
    

Add-Migration 命令會告知架構,以便:

  • 比較 Movie 模型與 Movie 資料庫架構。
  • 建立程式碼,將資料庫架構遷移至新的模型。

"Rating" 是用來命名移轉檔案的任意名稱。 建議您針對移轉檔案使用有意義的名稱,這更加實用。

Update-Database 命令會指示架構將架構變更套用至資料庫,並保留現有的資料。

刪除資料庫中的所有記錄,初始化運算式會植入資料庫,並包含 Rating 欄位。 您可以使用瀏覽器中的刪除連結或從 Sql Server 物件總管 (SSOX) 來刪除。

另一個選擇是刪除資料庫並使用移轉重新建立資料庫。 若要在 SSOX 中刪除資料庫:

  1. 在 SSOX 中選取資料庫。

  2. 以滑鼠右鍵按一下資料庫,然後選取 [ 刪除]。

  3. 勾選 [ 關閉現有的連接]。

  4. 選取 [確定]。

  5. PMC中,更新資料庫:

    Update-Database
    

執行應用程式,並確認您可以使用欄位建立、編輯及顯示電影 Rating 。 若未植入資料庫,請在 SeedData.Initialize 方法中設定中斷點。

其他資源