2021年4月14日 星期三

使用 Visual Studio 2019 進行遠端 Windows Forms 應用程式除錯

使用 Visual Studio 2019 進行遠端 Windows Forms 應用程式除錯

安裝 Visual Studio 2019 遠端工具

  • 請在遠端電腦上,通常是沒有安裝 Visual Studio 2019 開發工具的電腦

  • 打開網址 https://visualstudio.microsoft.com/zh-hant/downloads/

  • 在下方找到 [Visual Studio 2019 的工具] > [Visual Studio 2019 遠端工具]

    您可利用 Visual Studio 2019 遠端工具,在未安裝 Visual Studio 的電腦上進行應用程式部署、遠端偵錯、遠端測試、效能分析以及單元測試。

  • 下載並且安裝 Visual Studio 2019 遠端工具

  • 當出現 [Visual Studio 2019 遠端工具安裝程式] 視窗

  • 勾選 [我同意授權條款及條件]

  • 點選 [安裝] 按鈕

  • 一旦安裝完成後,點選 [關閉] 按鈕

設定遠端偵錯程式

  • 在遠端電腦上,從 [開始] 找到 [Remote Debugger]

  • 啟動執行這個城市

  • 當 [遠端偵測組態] 是窗出現之後,確認相關設定無誤

  • 點選 [設定遠端偵測] 按鈕

  • 此時將會出現 [Visual Studio 2019 遠端偵測工具視窗]

建立 Windows Forms 專案,並且開始進行遠端偵錯

  • 請在開發者電腦上開啟 Visual Studio 2019

  • 建立一個 Windows Forms 專案

  • 隨意加入一些程式碼,並且在任意程式碼上,加入中斷點

  • 打開該 Windows Forms 的專案屬性視窗 (可以使用滑鼠雙擊 Properties 節點)

  • 切換到 [偵錯] 標籤頁次

  • 找到 [使用遠端電腦] 欄位,輸入剛剛那台遠端電腦的 IP

  • 找到 [驗證模式] 欄位,選擇輸入 [Windows 驗證]

  • 建置這個專案,確定沒有錯誤產生

  • 在遠端電腦上建立資料夾,其路徑與 Visual Studio 電腦上的 Debug 資料夾相同,接著從 Visual Studio 電腦複製您剛才建置的可執行檔到遠端電腦上新建立的資料夾

  • 現在可以開始進行該專案的除錯

  • 此時會出現 [Windows 安全性] 視窗

  • 請在這裡輸入遠端電腦的認證之帳密

  • 現在可以在遠端電腦上看到這個 Windows Forms 程式跑起來了

  • 點選遠端電腦上 [Form1] 視窗內的 [button1] 按鈕

  • 若此時 Visual Studio 停在剛剛設定的中斷點上,那就表示這個遠端專案除錯正確無誤運作中

 










2021年4月12日 星期一

Blazor 專案使用ASP.NET Core 中的選項模式取得巢狀設定宣告內容

Blazor 專案使用ASP.NET Core 中的選項模式取得巢狀設定宣告內容

在前一篇文章 Blazor 專案使用ASP.NET Core 中的選項模式取得設定宣告內容 中,說明如何使用 ASP.NET Core 中的選項模式 來取得定義在 [appsettings.json] 檔案內 (這部分可以參考 ASP.NET Core 的設定 ) 設定內容。

然而,若該 [appsettings.json] 檔案內所宣告的設定內容,具有巢狀的定義結構,這樣要如何能夠取出這些巢狀定義內容值呢?

現在來看看如何做出這樣的範例成程式碼。

這篇文章的原始碼位於 bzOptionsNest

開啟 Blazor Server 應用程式專案 並 進行修正

  • 開啟 bzOptions
  • 請在 [bzOptions] 專案根目錄下找到並且打開 [appsettings.json] 檔案
  • 使用底下的內容替換原先檔案內容
  • 在這裡,將把 [節點中文3] 節點的設定結構,改成具有多層次的樹狀架構
  • 另外,在這裡將會把每個節點的名稱,使用不同的大小寫來定義,等下來確認這樣的定義方式,會不會有任何影響
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "中文選項1": {
    "Child1": "需要使用者輸入",
    "Child2": "需要使用到資料庫",
    "節點中文3": "需要提供 Xamarin.Forms服務",
    "NestNode1": {
      "subNode1": 168,
      "SubNode2": "子節點2",
      "SUBNODE3": "子節點三"
    }
  }
}

修改 中文選項1 強型別類別

  • 請在 [bzOptions] 專案根目錄下找到並且打開 [中文選項1.cs] 檔案

  • 將該類別設計為底下內容

  • 在這裡可以看到,這裡在 [中文選項1] 類別內,建立一個屬性,其型別為 [Nestnode1]

  • 而這個 [Nestnode1] 類別內的屬性名稱,將會使用微軟建議的屬性名稱命名慣例 大小寫慣例 ,也就是 PascalCasing

    PascalCasing 慣例(用於參數名稱以外的所有識別碼)會將每個字組的第一個字元設為大寫 (包括長度超過兩個字母的縮寫)

public class 中文選項1
{
    public string Child1 { get; set; }
    public string Child2 { get; set; }
    public string 節點中文3 { get; set; }
    public Nestnode1 NestNode1 { get; set; }
}
 
public class Nestnode1
{
    public int SubNode1 { get; set; }
    public string SubNode2 { get; set; }
    public string SubNode3 { get; set; }
}

修正 Blazor 頁面元件中使用 選項模式

  • 請在 [bzOptions] 專案找到 [Pages] 資料夾
  • 在該資料夾內找到並且打開 [Index.razor] 檔案
  • 使用底下宣告標記與程式碼,替換該檔案原先內容
@page "/"
@using Microsoft.Extensions.Options
@inject IOptions<中文選項1> option1

<h1>Hello, ASP.NET Core 中的選項模式!</h1>

<div>
    <div>@option1.Value.Child1</div>
    <div>@option1.Value.Child2</div>
    <div>@option1.Value.節點中文3</div>
    <div>@option1.Value.NestNode1.SubNode1</div>
    <div>@option1.Value.NestNode1.SubNode2</div>
    <div>@option1.Value.NestNode1.SubNode3</div>
</div>
Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@code{
    中文選項1 我的客製化選項;
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender == true)
        {
            我的客製化選項 = option1.Value;
        }
    }
}

執行並且測試

按下 F5 開始執行這個專案

現在將會看到底下的畫面

 





2021年4月10日 星期六

Blazor 專案使用ASP.NET Core 中的選項模式取得設定宣告內容

Blazor 專案使用ASP.NET Core 中的選項模式取得設定宣告內容

當在進行 Blazor 專案程式設計的時候,可以將許多的設定參數,使用 ASP.NET Core 中的選項模式 來進行定義,也就是定義在 [appsettings.json] 檔案內 (這部分可以參考 ASP.NET Core 的設定 ) ,而在專案執行過程中,可以使用強型別的方式取出這些設定參數,而且,最重要的是可以根據不同執行階段環境,讀取到當時執行階段的設定參數。

現在來看看如何做出這樣的範例成程式碼。

這篇文章的原始碼位於 bzOptions

建立Blazor Server 應用程式專案

  • 開啟 Visual Studio 2019
  • 選擇右下方的 [建立新的專案] 按鈕
  • 在 [建立新專案] 對話窗中
  • 從右上方的專案類型下拉按鈕中,找到並選擇 [Web]
  • 從可用專案範本清單內,找到並選擇 [Blazor Server 應用程式]
  • 點選左下方 [下一步] 按鈕
  • 在 [設定新的專案] 對話窗中
  • 在 [專案名稱] 欄位中輸入 bzOptions
  • 點選左下方 [下一步] 按鈕
  • 在 [其他資訊] 對話窗中
  • 在 [目標 Framework] 下拉選單中,選擇 [.NET 5.0 (目前)]
  • 點選左下方 [建立] 按鈕

修正 appsettings.json 檔案

  • 請在 [bzOptions] 專案根目錄下找到並且打開 [appsettings.json] 檔案
  • 使用底下的內容替換原先檔案內容
  • 在這裡新增加了一個 [中文選項1] 設定項目,而該設定項目內有3個子節點,分別為 [Child1] 、 [Child2] 、 [節點中文3]

    這裡刻意的使用中文字型,而不是僅使用英文字型,因此,要來體驗看看,當在 [appsettings.json] 檔案有中文字的時候,是否會有問題產生。

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "中文選項1": {
    "Child1": "需要使用者輸入",
    "Child2": "需要使用到資料庫",
    "節點中文3": "需要提供 Xamarin.Forms服務"
  }
}

建立 中文選項1 強型別類別

  • 滑鼠右擊 [bzOptions] 專案節點
  • 點選 [加入] > [類別]
  • 當出現對話出 [新增項目 - bzOptions]
  • 在下方 [名稱] 欄位輸入 中文選項1
  • 點選 [新增] 按鈕
  • 將該類別設計為底下內容
  • 這裡的設計重點,就是各個屬性名稱,都會與設定檔案 ([appsettings.json]) 內的設定節點名稱相同
public class 中文選項1
{
    public string Child1 { get; set; }
    public string Child2 { get; set; }
    public string 節點中文3 { get; set; }
}

進行該選項對應的服務宣告

  • 請在 [bzOptions] 專案根目錄下找到並且打開 [Startup.cs] 檔案
  • 找到 services.AddSingleton<WeatherForecastService>(); 這行敘述
  • 在這行敘述的下方,加入底下程式碼
services.Configure<中文選項1>(Configuration.GetSection("中文選項1"));

在 Blazor 頁面元件中使用 選項模式

  • 請在 [bzOptions] 專案找到 [Pages] 資料夾
  • 在該資料夾內找到並且打開 [Index.razor] 檔案
  • 使用底下宣告標記與程式碼,替換該檔案原先內容
@page "/"
@using Microsoft.Extensions.Options
@inject IOptions<中文選項1> option1

<h1>Hello, ASP.NET Core 中的選項模式!</h1>

<div>
    <div>@option1.Value.Child1</div>
    <div>@option1.Value.Child2</div>
    <div>@option1.Value.節點中文3</div>
</div>
Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@code{
    中文選項1 我的客製化選項;
    protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender == true)
        {
            我的客製化選項 = option1.Value;
        }
    }
}

執行並且測試

按下 F5 開始執行這個專案

現在將會看到底下的畫面

不過,你很快地發現到問題,這裡似乎沒有看到任何在 [appsettings.json] 所宣告的設定內容。

找出無法透過 ASP.NET Core 中的選項模式取出設定值的真正原因

  • 請先在 [bzOptions] 專案根目錄下找到並且打開 [appsettings.json] 檔案
  • 在該檔案中找到 [中文選項1] 這個鍵值
  • 請修正 [中文選項1] 成為 [YourOption1]
  • 底下是修改後的內容
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "YourOption1": {
    "Child1": "需要使用者輸入",
    "Child2": "需要使用到資料庫",
    "節點中文3": "需要提供 Xamarin.Forms服務"
  }
}
  • 請在 [bzOptions] 專案根目錄下找到並且打開 [Startup.cs] 檔案
  • 找到 services.Configure<中文選項1>(Configuration.GetSection("中文選項1")); 這行敘述
  • 修改為 services.Configure<中文選項1>(Configuration.GetSection("YourOption1"));

再度進行執行專案

按下 F5 開始執行這個專案

現在將會看到底下的畫面

從上面執行結果的螢幕截圖,可以看到 @inject IOptions<中文選項1> option1 敘述所注入 [IOptions<中文選項1>] 物件,是可以成功取得 [appsettings.json] 檔案內的設定內容。

不過,似乎看到的內容都是亂碼,而且對於第三個設定內容 ["節點中文3": "需要提供 Xamarin.Forms服務"],也是看不到內容

都是檔案編碼格式不正確,修正使用 UTF-8 編碼

  • 請還原剛剛的 [appsettings.json] 與 [Startup.cs] 檔案修正

  • 請打開 [appsettings.json] 檔案

  • 點選 Visual Studio 2019 功能表的 [檔案] > [另存 appsettings.json 為] 選項

  • 在 [另存新檔] 對話中,點選右下方 [存檔] 按鈕右方的 三角形

  • 再彈出子視窗中,選擇 [以編碼方式儲存]

    使用不同編碼格式來儲存檔案內容

  • 出現 [確認另存新檔] 對話窗出現後,點選 [是] 按鈕

  • 底下的 [進階儲存選項] 對話窗中,顯示了這個檔案現在使用了 [繁體中文 (Big5) - 字碼頁 950] 編碼方式儲存相關文字內容

    繁體中文 (Big5) - 字碼頁 950

  • 請點選 [編碼方式] 下拉選單,切換為 [Unicode (UTF-8 有簽章) - 字碼頁 65001] 這種編碼格式

    Unicode (UTF-8 有簽章) - 字碼頁 65001

重新執行,並且確認是否可以正常運作

按下 F5 開始執行這個專案

現在將會看到底下的畫面

現在可以正常運作,也就是可以透過 ASP.NET Core 中的選項模式 取得 ASP.NET Core 的設定 宣告內容。