使用RCL類別庫

by vivid 26. 十二月 2018 02:10

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

Razor網頁(Page)、網頁模型(Page Model)、檢視(View)、控制器(Controller)與資料模型(Data Model)這些可能跨專案重複使用的元件,在ASP.NET Core 2.1版之後,可以打包成Razor類別庫(Razor Class Library,簡稱RCL),以便於在ASP.NET Razor Page或ASP.NET Core MVC專案之中重複使用。例如ASP.NET Core 2.1版之後,用於會員帳號管理的ASP.NET Identity套件現在就是以Razor Class Library類別庫方式打包。

如果預設打包在Razor Class Library類別庫中的程式不符網站的使用,我們可以在網站中撰寫程式碼,覆蓋掉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」專案預設檔案結構。

修改「Page1Model」類別程式碼,在類別中宣告一個字串型別的「Greeting」屬性,並在「OnGet」方法中回傳「Hello from RCL PageModel」字串:

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

namespace MyRCLibrary.MyFeature.Pages {
  public class Page1Model : PageModel {
    public string Greeting { get; set; }
    public void OnGet( ) {
      Greeting = $" Hello from RCL PageModel ";
    }
  }
}

 

修改「Page1.cshtml」檔案程式碼,在<body>標籤之中加入以下反白程式碼,以顯示歡迎訊息:

@page
@model MyRCLibrary.MyFeature.Pages.Page1Model
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Page1</title>
</head>
<body>
  <h2> RCL Page1 </h2>
  <div> @Model.Greeting </div>

</body>
</html>

 

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

在Razor Pages專案中使用RCL

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

clip_image008

圖 4:加入Razor Pages 網站專案。

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

clip_image010

圖 5:加入Razor Pages 網站專案。

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

clip_image012

圖 6:設定起始專案。

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

clip_image014

圖 7:設定編譯相依性。

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

clip_image016

圖 8:設定編譯相依性。

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

clip_image018

圖 9:加入專案參考。

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

clip_image020

圖 10:設定參考。

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

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

https://localhost:44395/MyFeature/Page1

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

clip_image022

圖 11:網站程式測試。

覆寫檢視程式碼

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

首先我們先在網站專案中建立和Razor Class Library專案相同的資料夾結構,請參考下圖所示:

clip_image024

圖 12:在網站專案中建立資料夾結構。

在「Pages」資料夾中加入「Page1.cshtml」檔案,從「Solution Explorer」視窗 - Razor網站 - 「Areas」- 「MyFeature」- 「Pages」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Add」- 「New Item」項目,從「Add New Item」對話盒中,選取「ASP.NET Core」分類下的「Razor Page」項目,然後在下方將「Name」設定為「Page1」最後按下「Add」按鈕,請參考下圖所示:

clip_image026

圖 13:加入 Razor Page網頁。

修改「Page1Model」類別程式碼,在類別中宣告一個字串型別的「Greeting」屬性,並在「OnGet」方法中回傳「Hello from RCL PageModel」字串:

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

namespace RazorPageWeb.Areas.MyFeature.Pages {
  public class Page1Model : PageModel {
    public string Greeting { get; set; }
    public void OnGet( ) {
      Greeting = $" Hello from Razor Web Pages PageModel " + DateTime.Now.ToString();
    }
  }
}

 

修改「Page1.cshtml」檔案程式碼,在<body>標籤之中加入以下反白程式碼,以顯示歡迎訊息:

@page
@model RazorPageWeb.Areas.MyFeature.Pages.Page1Model
@{
  Layout = null;
}

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Page1</title>
</head>
<body>
  <h2> Razor Page Web Page1 </h2>
  <div> @Model.Greeting </div>

</body>
</html>

 

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

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

https://localhost:44395/MyFeature/Page1

執行結果參考如下:

clip_image028

圖 14:覆寫測試。

重複使用模型

如若我們只想要覆寫Razor Page UI界面,不想改寫PageModel,而是想重複使用RCL中定義的PageModel,那麼可以在Razor Page直接修改要使用的模型來自於RCL專案:

@page
@*@model RazorPageWeb.Areas.MyFeature.Pages.Page1Model*@
@model MyRCLibrary.MyFeature.Pages.Page1Model
@{
  Layout = null;
}

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Page1</title>
</head>
<body>
  <h2> Razor Page Web Page1 </h2>
  <div> @Model.Greeting </div>

</body>
</html>

 

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

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

https://localhost:44395/MyFeature/Page1

執行結果參考如下:

clip_image030

圖 15:覆寫測試。

使用CLI命令建立專案

若沒有使用Visual Studio 2017 開發工具,而是使用CLI命令來建立專案的話,可能會用到的指令整理如下:

切換到命令提示字元,在專案根目錄,輸入以下指令,建立一個名為「MyRCLibrary」的Razor Class Library類別庫專案:

dotnet new razorclasslib -o MyRCLibrary

這個命令執行結果,請參考下圖所示:clip_image032

圖 16:建立RCL專案。

輸入以下指令,建立名為「RazorPageWeb」的Razor網站應用程式專案:

dotnet new webapp -o RazorPageWeb

輸入以下指令,設定「RazorPageWeb」參考「MyRCLibrary」專案:

dotnet add RazorPageWeb/RazorPageWeb.csproj reference MyRCLibrary/MyRCLibrary.csproj

這個命令執行結果,請參考下圖所示:clip_image034

圖 17:設定專案參考。

完成此動作後,檢視「RazorPageWeb.csproj」檔案,檔案中將會包含「ProjectReference」的設定。

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>

<TargetFramework>netcoreapp2.1</TargetFramework>

</PropertyGroup>

<ItemGroup>

<PackageReference Include="Microsoft.AspNetCore.App" />

</ItemGroup>

<ItemGroup>

<ProjectReference Include="..\MyRCLibrary\MyRCLibrary.csproj" />

</ItemGroup>

</Project>

輸入以下指令,建立一個名為「MyRCLibrary」的方案檔,完成後,將產生一個「MyRCLibrary.sln」檔案:

dotnet new sln -n MyRCLibrary

這個命令執行結果,請參考下圖所示:

clip_image036

圖 18:建立一個方案檔。

輸入以下指令,將「RazorPageWeb.csproj」專案加入「MyRCLibrary.sln」方案之中:

dotnet sln MyRCLibrary.sln add RazorPageWeb/RazorPageWeb.csproj

這個命令執行結果,請參考下圖所示:

clip_image038

圖 19:在方案檔案加入專案檔設定。

輸入以下指令,將「MyRCLibrary.csproj」專案加入「MyRCLibrary.sln」方案之中:

dotnet sln MyRCLibrary.sln add MyRCLibrary/MyRCLibrary.csproj

這個命令執行結果,請參考下圖所示:

clip_image040

圖 20:在方案檔案加入專案檔設定。

輸入以下指令以建置方案:

dotnet build

這個命令執行結果,請參考下圖所示:

clip_image042

圖 21:建置方案。

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List