從現有資料庫建立ASP.NET Core MVC應用程式

by vivid 8. 八月 2018 09:47

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號: N180819801
出刊日期: 2018/8/8

在這篇文章中,將要介紹如何利用Visual Studio 2017開發工具,在ASP.NET Core MVC網站中使用模型檢視控制器 (Model – View - Controller,MVC)的設計模式來開發ASP.NET應用程式,並透過Entity Framework Core資料庫優先設計方式來存取SQL Server Express現有的Northwind資料庫。

Northwind資料庫的下載與安裝說明,請參考微軟網站:

https://docs.microsoft.com/zh-tw/dotnet/framework/data/adonet/sql/linq/downloading-sample-databases

 

建立空白專案

讓我們從Visual Studio 2017開發環境中新建一個空白的ASP.NET Core MVCWeb Application網站開始。啟動Visual Studio 2017開發環境。從Visual Studio開發工具「File」-「New」-「Project」項目,在「New Project」對話盒中,選取左方「Installed」清單 -「Visual C#」程式語言,從「.NET Core」分類中,選取「ASP.NET Core Web Application」。請參考下圖所示,設定專案名稱以及專案存放路徑,然後按下「OK」鍵。

clip_image002

圖 1:新建一個空白的「ASP.NET Core Web Application」網站。

在「New ASP.NET Core Web Application」對話盒中,確認左上方的清單選取「.NET Core」,右上方的清單ASP.NET Core版本為「ASP.NET Core 2.1」,選取下方的「Empty」樣版專案,清除勾選下方的「Enable Docker Support」核取方塊,確定右方的「Authentication」項目設定為「No Authentication」,然後按下「OK」按鈕建立專案,請參考下圖所示:

clip_image004

圖 2:選取「Empty」樣版專案。

建立與使用模型(Model)

根據微軟官方文件(https://docs.microsoft.com/en-us/ef/core/get-started/aspnetcore/existing-db)上的步驟,需要在網站專案中手動安裝幾個套件。不過現在只要使用Visual Studio 2017建立的ASP.NET Core 2.1範本專案,都不再需要手動安裝以下套件:

Microsoft.EntityFrameworkCore.SqlServer

Microsoft.EntityFrameworkCore.Tools

甚至在必要時,Visual Studio也會自動幫你安裝一些程式碼產生工具套件:

Microsoft.VisualStudio.Web.CodeGeneration.Design

下一步是建立實體模型。從Visual Studio 2017開發工具「Tools」- 「Nuget Package Manager」-從選單選擇「Package Manager Console」選項,開啟「Package Manager Console」對話盒,直接執行以下指令指定連接字串、資料提供者(Provider)進行反向工程步驟,就可以從現有資料庫來建立模型:

Scaffold-DbContext "Server=.\sqlexpress;Database=Northwind;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

指令後的「-OutputDir」參數用來指定將產生的類別存放的資料夾,以本例來說為「Models」,若資料夾不存在會自動建立。

clip_image006

圖 3:進行反向工程。

若不想要建立所有資料表的模型,我們可以利用「-Tables」參數來設定想使用的資料表。

指令執行完成後,專案中將會產生一個「NorthwindContext.cs」檔案,用來讓Entity Framework Core存取資料庫,資料庫的每一個資料表,會產生一個對應的模型類別,參考下圖為執行結果:

clip_image008

圖 4:工具自動產生模型類別。

預設「NorthwindContext」類別程式碼,自動繼承自「DbContext」類別,並且已產生程式碼使用相依性插入(Depenency Injection)在建構函式中插入服務「DbContextOptions<NorthwindContext>」,參考以下範例程式碼:

namespace EFCDBFirst.Models {
  public partial class NorthwindContext : DbContext {
    public NorthwindContext( ) {
    }

    public NorthwindContext( DbContextOptions<NorthwindContext> options )
        : base( options ) {
    }
//以下略

 

我們需要註解NorthwindContext類別中的OnConfiguring方法,避免將資料庫連接字串等敏感資訊直接寫死在程式中,後續改用組態檔方式統一設定:

    protected override void OnConfiguring( DbContextOptionsBuilder optionsBuilder ) {
//      if ( !optionsBuilder.IsConfigured ) {
//#warning To protect potentially sensitive information in your connection string, you should move it out of source code. See http://go.microsoft.com/fwlink/?LinkId=723263 for guidance on storing connection strings.
//        optionsBuilder.UseSqlServer( "Server=.\\sqlexpress;Database=Northwind;Trusted_Connection=True;" );
//      }
    }

稍後我們將要設計存取「Region」資料表的控制器與檢視,目前工具產生的「Region」類別程式碼如下,包含一個「RegionId」與一個「RegionDescription」屬性,「Territories」導覽屬性用來存取關聯的「Territories」物件:

using System;
using System.Collections.Generic;

namespace EFCDBFirst.Models {
  public partial class Region {
    public Region( ) {
      Territories = new HashSet<Territories>( );
    }

    public int RegionId { get; set; }
    public string RegionDescription { get; set; }

    public ICollection<Territories> Territories { get; set; }
  }
}

 

使用appsettings.json組態

加入「appsettings.json」組態設定。從「Solution Explorer」視窗,專案名稱上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,開啟「Add New Item」對話盒,從右上方文字方塊輸入「config」搜尋,選取「App Settings File」,設定名稱為「appsettings.json」,然後按下「Add」按鈕,建立檔案,請參考下圖所示:

clip_image010

圖 5:建立「appsettings.json」檔案。

修改「appsettings.json」檔案,設定連接字串的資料庫伺服器為「.\\sqlexpress」;資料庫為「Northwind」,並使用Windows驗證連接到資料庫:

{

"ConnectionStrings": {

"DefaultConnection": "Server=.\\sqlexpress;Database=Northwind;Trusted_Connection=True;MultipleActiveResultSets=true"

}

}

在Startup設定與使用服務

修改專案中的「Startup.cs」檔案,在「ConfigureServices」方法加入以下程式,設定資料庫連接字串,將從「appsettings.json」檔案檔案中的「DefaultConnection」而來,並且叫用「IServiceCollection」實體的「AddDbContext」方法,註冊「NorthwindContext」物件。接著在「Configure」方法之中,加入使用靜態檔案、MVC服務的程式碼:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using EFCDBFirst.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace EFCDBFirst {
  public class Startup {
    public IConfiguration Configuration { get; }

    public Startup( IConfiguration configuration ) {
      Configuration = configuration;
    }
    public void ConfigureServices( IServiceCollection services ) {
      services.AddDbContext<NorthwindContext>( options => options.UseSqlServer( Configuration.GetConnectionString( "DefaultConnection" ) ) );

      services.AddMvc( );
    }

    public void Configure( IApplicationBuilder app , IHostingEnvironment env ) {
      if ( env.IsDevelopment( ) ) {
        app.UseDeveloperExceptionPage( );
      }
      app.UseStaticFiles( );
      app.UseMvcWithDefaultRoute( );
    }
  }
}

 

設計控制器

接下來我們將利用Visual Studio 2017工具,快速建立新增、刪除、修改、查詢「Region」資料表資料的程式碼。從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Folder」選項,將新建立的資料夾命名為「Controllers」。從「Controllers」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「Controller」項目,請參考下圖所示:

clip_image012

圖 6:新增控制器。

在「Add Scaffold」對話盒中選取「MVC Controller with views, using Entity Framework」項目,然後按下「Add 」按鈕,請參考下圖所示:

clip_image014

圖 7:選取控制器範本。

在「Add MVC Controller with views, using Entity Framework」對話盒,將「Model class」設定為「Region」類別;「Data context class」為「NorthwindContext」,勾選下方的「Generate views」核取方塊,然後設定控制器名稱(Controller name)為「RegionsController」,接著按下「Add」按鈕,請參考下圖所示:

clip_image016

圖 8:新增「RegionsController」控制器。

Visual Studio 2017便會在「Views\Regions」資料夾下,新增「Index.cshtml」、「Edit.cshtml」、「Details.cshtml」、「Delete.cshtml」、「Create.cshtml」檢視檔案,以及在「Controllers」資料夾下,新增控制器程式碼「RegionsController.cs」。

 

使用標籤協助程式

為了在檢視中使用標籤協助程式(Tag Helper),我們統一在「Views」資料夾加入一個「_ViewImports.cshtml」檔案。從Visual Studio 開發工具「Solution Explorer」視窗 -「Views」資料夾上方按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」選項,從「Add New Item」對話盒中,選取「Web」分類中的「Razor View Imports」,檔案名稱設定為「_ViewImports.cshtml」,然後按下「Add」按鈕,請參考下圖所示:

clip_image018

圖 9:加入「_ViewImports.cshtml」檔案。

測試與執行

選取Visual Studio 開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),然後在瀏覽器輸入以下網址(URL)

https://localhost:44313/Regions

執行結果參考如下:

clip_image020

圖 10:查詢Region資料表資料。

點選畫面中「Create」超連結,便進入新增資料頁面,輸入資料之後,按下「Create」按鈕,資料將新增到資料庫中,並回到清單頁,請參考下圖所示

clip_image022

圖 11:Create檢視執行結果。

在清單頁可以看到新增的資料,點選後方的「Edit」連結,便可進入資料修改畫面,請參考下圖所示:

clip_image024

圖 12:Index檢視執行結果。

修改完成之後,按「Save」超連結,便可自動儲存資料,請參考下圖所示:

clip_image026

圖 13:Edit檢視執行結果。

在清單頁,點選資料後方的「Delete」連結,便可進入資料刪除確認畫面,請參考下圖所示:

clip_image028

圖 14:Delete檢視執行結果。

按下「Delete」按鈕,資料將從資料庫刪除。

Tags:

.NET Core | .NET Magazine國際中文電子雜誌 | ASP.NET Core MVC | C# | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List