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

時間 2019-11-07

標籤學習 asp.net asp core razor 編程系列添加字段欄目 ASP 简体版

原文原文鏈接

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

學習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 編程系列七——修改列表頁面post

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

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

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

1、添加出版社字段到實體類

咱們首先在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)，或是菜單中選擇生成-->生成解決方案

2、給列表頁面添加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字段。

3、有幾種方法能夠解決這個錯誤

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

二、經過SQL Server Management Studio顯式修改現有數據庫中的表，使之與實體類相匹配。這種方法的優勢是能夠保存數據。您能夠手動或經過建立數據庫更改腳原本進行更改。

三、使用 Code First 遷移功能來更新數據庫。咱們將在下一篇文章中進行學習。