學習ASP.NET Core Razor 編程系列十——添加新欄位

學習ASP.NET Core Razor 編程系列目錄

學習ASP.NET Core Razor 編程系列一

學習ASP.NET Core Razor 編程系列二——添加一個實體

 學習ASP.NET Core Razor 編程系列三——創建數據表及創建項目基本頁面

學習ASP.NET Core Razor 編程系列四——Asp.Net Core Razor列表模板頁面

學習ASP.NET Core Razor 編程系列五——Asp.Net Core Razor新建模板頁面

學習ASP.NET Core Razor 編程系列六——資料庫初始化

學習ASP.NET Core Razor 編程系列七——修改列表頁面

學習ASP.NET Core Razor 編程系列八——併發處理

學習ASP.NET Core Razor 編程系列九——增加查詢功能

       在經過了上面幾篇文章的學習這賓，本篇文章我們來學習如何在已經的功能中添加新欄位。

一、添加出版社欄位到實體類

          我們首先在Visual Studio 2017的解決方案資源管理器中打開 Models/Books.cs 文件，並添加一個Publishing欄位，代碼如下：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
 

namespace RazorMvcBooks.Models
{
    public class Book
    {  

        public int ID { get; set; }
        public string Name { get; set; }

        [Display(Name = "出版日期")]
        [DataType(DataType.Date)] 

        public DateTime ReleaseDate { get; set; }

        public string Author { get; set; }
        public decimal Price { get; set; }
        public string Publishing { get; set; }

    }

}

          在Visual Studio 2017中按下(Ctrl+Shift+B)，或是菜單中選擇生成-->生成解決方案

二、給列表頁面添加Publishing欄位

             在Visual Studio 2017的解決方案資源管理器中找到 Pages/Books/Index.cshtml文件，然後使用滑鼠雙擊打開，併在文件中添加Publishing欄位，代碼如下:

@page 
@model RazorMvcBooks.Pages.Books.IndexModel 

@{
    ViewData["Title"] = "Index";
} 

<h2>Index</h2>

<p>
    <a asp-page="Create">Create New</a>
</p>
<form>
    <p>
        <select asp-for="Author" asp-items="Model.Authors">
            <option value="">All</option>
        </select>
書籍名稱
         <input type="text" name="SearchString">
        <input type="submit" value="查詢" />
    </p>
</form>
 
<table class="table">
    <thead>
        <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Name)

                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].ReleaseDate)

                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Author)

                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Book[0].Price)

                </th>
            <th>
                @Html.DisplayNameFor(model => model.Book[0].Publishing)

            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Book) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Publishing)

            </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>

      按照上面的方式，把Publishing欄位添加到“Delete.cshtml”與“Details.cshtml”頁面中。

       接下來我們在Visual Studio 2017的解決方案資源管理器中打開Create.cshtml，然後選擇一個現成<div>元素（例如包含Name欄位的div元素），複製，粘貼到如下圖的位置，最後把Name修改為Publishing欄位。如下圖。

添加了Publishing欄位之後 Create.cshtml  代碼如下:

@page
@model RazorMvcBooks.Pages.Books.CreateModel
@{

    ViewData["Title"] = "Create";
} 

<h2>Create</h2> 

<h4>Book</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">
                <label asp-for="Book.Name" class="control-label"></label>

                <input asp-for="Book.Name" class="form-control" />
                <span asp-validation-for="Book.Name" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Book.ReleaseDate" class="control-label"></label>
                <input asp-for="Book.ReleaseDate" class="form-control" />
                <span asp-validation-for="Book.ReleaseDate" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Book.Author" class="control-label"></label>

                <input asp-for="Book.Author" class="form-control" />
                <span asp-validation-for="Book.Author" class="text-danger"></span>
            </div> 

            <div class="form-group">
                <label asp-for="Book.Price" class="control-label"></label>
                <input asp-for="Book.Price" class="form-control" />
                <span asp-validation-for="Book.Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Book.Publishing" class="control-label"></label>
                <input asp-for="Book.Publishing" class="form-control" />

                <span asp-validation-for="Book.Publishing" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />

            </div>
        </form>
    </div>
</div> 

<div>
    <a asp-page="Index">Back to List</a>
</div> 

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

      參照上面的方式給編輯頁面添加Publishing欄位。

      在經過上面的修改之後，但是由於我們還沒有進行資料庫更新，所以此時運行書籍管理信息系統是會報錯的。

     此時如果我們在Visual Studio 2017中按下F5，在瀏覽器中我們會得到如下圖的錯誤信息。

         這個錯誤信息表明我們的實體類與資料庫中的表結構不一致。資料庫中Book表沒有Publishing欄位。

三、有幾種方法可以解決這個錯誤

1、讓實體框架自動刪除並使用新的實體類重新創建資料庫。這種方法適合在開發周期的早期使用；它允許您快速地將實體類和資料庫表一起快速改進。缺點是丟失資料庫中的現有數據。請不要在生產資料庫上使用這種方法！在架構更改時刪除資料庫並使用初始化類自動地用測試數據生成資料庫中的數據，這通常是開發應用程式的一種有效方式。

2、通過SQL Server Management Studio顯式修改現有資料庫中的表，使之與實體類相匹配。這種方法的優點是可以保存數據。您可以手動或通過創建資料庫更改腳本來進行更改。

3、使用 Code First 遷移功能來更新資料庫。我們將在下一篇文章中進行學習。