使用RCL類別庫 - MVC

by vivid 9. 一月 2019 03:57

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

在《使用RCL類別庫》這篇文章中探討了如何在ASP.NET Razor Pages網站中使用Razor Class Library類別庫專案。你可以將Razor網頁(Page)、網頁模型(Page Model)、檢視(View)、控制器(Controller)與資料模型(Data Model)這些可能跨專案重複使用的元件,打包成Razor類別庫(Razor Class Library,簡稱RCL),以便於在ASP.NET Razor Page或ASP.NET Core MVC專案之中重複使用。

本文將介紹如何在ASP.NET Core MVC專案中使用Razor Class Library類別庫的設計步驟。

 

設計Razor Class Library類別庫

我們先來建立Razor Class Library類別庫專案。從Visual Studio開發工具「File」-「New」-「Project」項目,在「New Project」對話盒中,選取左方「Installed」清單-「Visual C#」程式語言,從「.NET Core」分類中,選取「ASP.NET Core Web Application 」。請參考下圖所示,適當設定專案名稱,以及設定專案存放路徑,按下「OK」鍵,請參考下圖所示:

clip_image002

圖 1:建立Razor Class Library類別庫專案。

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

clip_image004

圖 2:「Razor Class Library」樣版專案。

預設專案檔案結構如下圖所示,在「Pages」資料夾下包含一個Page1.cshtml檔案,以及對應的Page1Model類別檔案:

clip_image006

圖 3:「Razor Class Library」專案預設檔案結構。

刪除「Pages」資料夾以及其下的「Page1.cshtml」檔案,在MVC網站專案中使用不到。接著在「MyFeature」資料夾下建立以下的檔案結構。本文的範例只會使用到「Controllers」與「Views\Home」資料夾,不會使用到「Models」資料夾,「Models」資料夾留供未來使用,請參考下圖所示:

clip_image008

圖 4:建立檔案結構。

從「Solution Explorer」視窗 - RCL專案-「Areas\MyFeature/Controllers」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,請參考下圖所示:

clip_image010

圖 5:加入新項目。

在「Add New Item」對話盒,選取「Visual C# Items」-「ASP.NET Core」分類下的「Controller Class」項目,然後在下方將「Name:」設定為「HomeController」,最後按下「Add」按鈕,請參考下圖所示:

clip_image012

圖 6:加入控制器。

修改「HomeController」類別程式碼,在類別定義的上方,套用「Area」Attribute:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace MyRCLibrary.Areas.MyFeature.Controllers {
  [Area( "MyFeature" )]
  public class HomeController : Controller {
    // GET: /<controller>/
    public IActionResult Index( ) {
      return View( );
    }
  }
}

 

加入「Index」檢視。從「Solution Explorer」視窗 - RCL專案 -「Home」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,請參考下圖所示:

clip_image014

圖 7:加入新項目。

在「Add New Item」對話盒,選取「Visual C# Items」-「ASP.NET Core」分類下的「Razor View」項目,然後在下方將「Name:」設定為「Index.cshml」最後按下「Add」按鈕,請參考下圖所示:

clip_image016

圖 8:加入「Index」檢視。

修改「Index.cshtml」檔案程式碼,加入以下程式碼,以顯示歡迎訊息:

@{
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
</head>
<body>
  <h1> Home Index </h1>
  <p> Hello from RCL </p>
</body>
</html>

 

選取Visual Studio開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。

在MVC專案中使用RCL

下一個步驟是建立ASP.NET Core MVC網站應用程式,並在網站中使用Razor Class Library。從Visual Studio開發工具「Server Explorer」視窗,選取「Solution ...」項目,按滑鼠右鍵,從快捷選單選擇「Add」-「New「Project」項目,在「New Project」對話盒中,選取左方「Installed」清單 -「Visual C#」程式語言,從「.NET Core」分類中,選取「ASP.NET Core Web Application」。請參考下圖所示,適當設定專案名稱,與專案存放路徑,然後按下「OK」鍵。

clip_image018

圖 9:加入MVC網站專案。

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

clip_image020

圖 10:加入MVC網站專案。

設定起始專案。從Visual Studio開發工具「Server Explorer」視窗,選取MVC網站專案,按滑鼠右鍵,從快捷選單選擇「Set as StartUp Project」項目,請參考下圖所示:

clip_image022

圖 11:設定起始專案。

設定編譯相依性。從Visual Studio開發工具「Server Explorer」視窗,選取MVC網站專案,按滑鼠右鍵,從快捷選單選擇「Build Dependencies」-「Project Dependencies」項目,請參考下圖所示:

clip_image024

圖 12:設定編譯相依性。

在「Project Dependencies」對話盒,勾選Razor Class Library類別庫專案,請參考下圖所示:

clip_image026

圖 13:設定編譯相依性。

加入專案參考。從Visual Studio開發工具「Server Explorer」視窗,選取MVC網站專案,按滑鼠右鍵,從快捷選單選擇「Add」-「Reference」項目,請參考下圖所示:

clip_image028

圖 14:加入專案參考。

在「Reference Manager」對話盒,勾選Razor Class Library類別庫專案,請參考下圖所示:

clip_image030

圖 15:設定參考。

修改「Startup」類別程式碼,叫用「MapRoute」方法設定Area路由:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace MVCWebApp {
  public class Startup {
    public Startup( IConfiguration configuration ) {
      Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices( IServiceCollection services ) {
      services.Configure<CookiePolicyOptions>( options => {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.None;
      } );


      services.AddMvc( ).SetCompatibilityVersion( CompatibilityVersion.Version_2_1 );
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure( IApplicationBuilder app , IHostingEnvironment env ) {
      if ( env.IsDevelopment( ) ) {
        app.UseDeveloperExceptionPage( );
      } else {
        app.UseExceptionHandler( "/Home/Error" );
        app.UseHsts( );
      }

      app.UseHttpsRedirection( );
      app.UseStaticFiles( );
      app.UseCookiePolicy( );

      app.UseMvc( routes => {
        routes.MapRoute(
          name: "areas" ,
          template: "{area:exists}/{controller=Home}/{action=Index}/{id?}"
        );
        routes.MapRoute(
            name: "default" ,
            template: "{controller=Home}/{action=Index}/{id?}" );
      } );
    }
  }
}

 

選取Visual Studio開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。

在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),然後在瀏覽器輸入以下網址(URL):

https://localhost:44324/MyFeature/Home

執行結果參考如下,網站程式執行時,會叫用Razor Class Library類別庫中的程式碼:

clip_image032

圖 16:網站程式測試。

覆寫檢視程式碼

若MVC網站中的檢視(View)、控制器(Controller)和Razor Class Library類別庫專案中的名稱一致,則網站中的程式之優先權會高於Razor Class Library類別庫專案,因此我們可以利用此特性在網站中進行客製化,改寫Razor Class Library類別庫的功能。

首先我們先在網站專案根目錄建立「MyFeature」區域(Area)。從「Solution Explorer」視窗- 專案名稱上方按滑鼠右鍵,從快捷選單選擇「Add」- 「Area」選項,請參考下圖所示:

clip_image034

圖 17:建立「MyFeature」區域(Area)。

在「Add MVC Area」對話盒,將「Area name」命名為「MyFeature」,然後按下「Add」按鈕,請參考下圖所示:

clip_image036

圖 18:加入「MyFeature」區域。

專案之中將自動建立一個「Areas」資料夾,其下包含一個「MyFeature」子資料夾;而「MyFeature」子資料夾之中預設將包含「Controllers」、「Data」、「Models」與「Views」資料夾。讓我們在「\Areas\MyFeature\Controllers\」資料夾中加入控制器,從「Solution Explorer」視窗 「Areas\ MyFeature \Controllers」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「Controller」項目,開啟「Add Scaffold」對話盒,請參考下圖所示:

clip_image038

圖 19:在網站專案中建立控制器。

選取「Add Scaffold」對話盒中「MVC Controller - Empty」項目,然後按下「Add」按鈕,請參考下圖所示:

clip_image040

圖 20:加入 MVC Controller。

在「Add Empty MVC Controller」對話盒中,將控制器名稱命名為「HomeController」,然後按下「Add」按鈕,請參考下圖所示:

clip_image042

圖 21:加入 MVC Controller。

建立「Index」檢視。將游標停留在「\Areas\MyFeature\Controllers\HomeController.cs」控制器程式設計畫面「Index」方法之中,按滑鼠右鍵,從快捷選單選取「Add View」,請參考下圖所示。(若沒有看見「Add View」選單,請將程式設計畫面關閉再重開,或關閉Visual Studio開發工具之後,再重新開啟):

clip_image044

圖 22:加入檢視。

在「Add MVC View」對話盒中,設定:

o View name:「Index」。

o Template:「Empty (without model)」。

o Model class:不設定。

o 清除勾選所有核取方塊。

然後按下「Add」按鈕。Visual Studio 2017便會在「Areas\MyFeature\Views\Home」資料夾下,新增一個「Index.cshtml」檔案,請參考下圖所示:

clip_image046

圖 23:加入「Index」檢視。

修改「Index」檢視的內容。從「Solution Explorer」視窗專案名稱下,雙擊「Areas\MyFeature\Views\Home\Index.cshtml」檔案,開啟設計畫面,在<body>標籤中,新增一個<h2>標籤,顯示「MVC Web Page1」字串,以及一個歡迎訊息:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
  <h2> MVC Web Page1 </h2>
  <p> Hello from MVC Web App </p>
</body>
</html>


 

選取Visual Studio開發工具「Build」-「Build Solution」項目編譯目前的專案,確認程式碼能正確編譯。

在Visual Studio開發工具,按CTRL+F5執行網站首頁(請注意:埠號可能會依據實際上的操作而有所不同,請修改為實際的埠號),然後在瀏覽器輸入以下網址(URL):

https://localhost:44324/MyFeature/Home

執行結果參考如下:

clip_image048

圖 24:覆寫測試。

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List