2019年12月17日 星期二

在 ASP.NET MVC 專案內使用 Blazor 元件


在 ASP.NET MVC 專案內使用 Blazor 元件

更多關於 Blazor 教學影片,可以參考 Blazor 播放清單 或者 Blazor 快速體驗撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。

在 ASP.NET Core 3.0 開發框架下,是可以讓 MVC 類型的專案,直接使用 Blazor 內的元件 Component。
在這篇文章所提到的專案原始碼,可以從 GitHub 下載

建立一個空白的 ASP.NET Core MVC 專案

想要進行這樣的專案開發練習,可以參考底下的操作步驟
  • 打開 Visual Studio 2019 開發工具
  • 當 [Visual Studio 2019] 對話窗出現之後,點選右下方的 [建立新的專案] 按鈕
  • 在 [建立新專案] 對話窗內,請找出 [ASP.NET Core Web 應用程式] 這個專案開發範本,並且點選這個專案開發範本
  • 請點選右下角 [下一步] 按鈕
  • 出現 [設定新的專案] 對話窗,輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱],完成後,請點選右下角 [建立] 按鈕
    在這個範例程式碼中,將會建立一個 AspNETMVCwithBlazor 專案名稱
  • 此時將會看到 [建立新的 ASP.NET Core Web 應用程式] 對話窗,請在清單中選擇 [Web 應用程式 (模型-檢視-控制器)] 這個專案範本,在此將要建立一個空白的 ASP.NET Core 的專案,若無,請點選右下角的 [建立] 按鈕
  • 此時,這個 ASP.NET Core MVC 專案已經建立完成

修正 Startup.cs

請打開 Startup.cs 這個檔案
public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    // 加入底下這行,宣告要使用 伺服器端的 Blazor 功能
    services.AddServerSideBlazor();
}
找到 ConfigureServics 方法,在 services.AddControllersWithViews(); 敘述之後加入 services.AddServerSideBlazor();
接著找到 Conigure 方法
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        // 加入底下這行,啟用 Blazor 路由
        endpoints.MapBlazorHub();
    });
}
找到 app.UseEndpoints 這個呼叫方法,在 endpoints 委派方法內的最後一行,加入這行敘述 endpoints.MapBlazorHub();

修改 _Layout.cshtml

在 [Views] > [Share] 資料夾下,找到 _Layout.cshtml 檔案
@*這裡將會啟用 Blazor SingleR 所需的 JavaScript*@
<script src="_framework/blazor.server.js"></script>
在該檔案的 </body> 前面,找到 @RenderSection("Scripts", required: false) 敘述,在這行敘述前加入上面的程式碼。
找到 <head> 標籤
@*指定的應用程式基底路徑的 <base> 標記*@
<base href="/">
在 head 標籤內加入上述的 base 宣告

建立 Blazor 專案

  • 滑鼠右擊方案節點,點選 [加入] > [新增專案]
  • 當 [新增專案] 對話窗出現之後,點選右下方的 [建立新的專案] 按鈕
  • 在 [新增專案] 對話窗內,請找出 [Blazor 應用程式] 這個專案開發範本,並且點選這個專案開發範本
  • 請點選右下角 [下一步] 按鈕
  • 出現 [設定新的專案] 對話窗,輸入適當的 [專案名稱] 、 [位置] ,完成後,請點選右下角 [建立] 按鈕
    在這個範例程式碼中,將會建立一個 MyBlazor 專案名稱
  • 此時將會看到 [建立新的 Blazor 應用程式] 對話窗,這裡可以根據當時開發專案的需要,自行決定是否有調整 Blazor 專案的其他特性,若無,請點選右下角的 [建立] 按鈕
  • 此時,這個 Blazor 專案已經建立完成

讓 MVC 專案參考 Blazor 專案

  • 滑鼠右擊 MVC 專案內的 [相依性] 節點,選擇 [加入參考]
  • 在 [參考管理員] 對話窗內,勾選剛剛建立的 Blazor 專案,也就是 [MyBlazor]
  • 點選 [確定] 按鈕

在 MVC View 內,使用 Blazor Component 元件

在 [Views] > [Home] 資料夾內,打開 [Index.cshtml] 檔案
@using MyBlazor.Pages
@using System.Threading.Tasks
@using System.Threading
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <div id="MyComponent">
        <component type="typeof(Counter)" render-mode="ServerPrerendered" />
    </div>
</div>
使用上面的 Razor 頁面標記宣告,替換掉原先的標記宣告

執行 ASP.NET Core MVC 專案

請開始執行 MVC 專案,瀏覽器上就會顯示 Index 這個首頁頁面,如下圖
在網頁的最下方,會看到一個按鈕 [Click me],這個就是 Blazor Component
請點選這個按鈕,就會看到具有互動效果的網頁設計


2019年12月13日 星期五

從空白專案來建立 ASP.NET Core Blazor 應用程式 - 了解 Blazor 運作方式

從空白專案來建立 ASP.NET Core Blazor 應用程式 - 了解 Blazor 運作方式

更多關於 Blazor 教學影片,可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。


想要了解 Blazor 專案是如何運作的,最佳的方式,就是從無到有,做出一個最為精簡的 Blazor 應用程式,在這篇文章中,將會說明如何進行這樣的設計工作,並且在不使用 JavaScript 程式語言的狀況下,便可以僅使用 HTML / C# 來設計出一個具有互動運作的網頁。
在這篇文章所提到的專案原始碼,可以從 GitHub 下載

建立一個空白的 ASP.NET Core 空白專案

想要進行這樣的專案開發練習,可以參考底下的操作步驟
  • 打開 Visual Studio 2019 開發工具
  • 當 [Visual Studio 2019] 對話窗出現之後,點選右下方的 [建立新的專案] 按鈕
  • 在 [建立新專案] 對話窗內,請找出 [ASP.NET Core Web 應用程式] 這個專案開發範本,並且點選這個專案開發範本
  • 請點選右下角 [下一步] 按鈕
  • 出現 [設定新的專案] 對話窗,輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱],完成後,請點選右下角 [建立] 按鈕
    在這個範例程式碼中,將會建立一個 BlazorFromeEmpty 專案名稱
  • 此時將會看到 [建立新的 ASP.NET Core Web 應用程式] 對話窗,請在清單中選擇 [空白] 這個專案範本,在此將要建立一個空白的 ASP.NET Core 的專案,若無,請點選右下角的 [建立] 按鈕
  • 此時,這個 空白 ASP.NET Core 專案已經建立完成
此時,這個專案的結構如下圖所示
這個專案內很簡單的僅有 Program.cs 與 Startup.cs 這兩個檔案
Programs.cs 的檔案內容如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;

namespace BlazorFromeEmpty
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}
對於 Program 這個類別,將會與所有其他 ASP.NET Core 專案相同,例如:MVC, Web API, Razor Page
Startup.cs 的檔案內容如下
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.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace BlazorFromeEmpty
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello World!");
                });
            });
        }
    }
}
在這個 Startup 類別內,可以看到在 ConfigureServices 方法內,沒有設計任何程式碼
現在,可以執行這個專案,看看會出現甚麼內容?
如同在 Configure 方法內的 app.UseEndpoints 敘述所定義的,這裡網站專案,僅能夠顯示 Hello World! 這樣的文字在瀏覽器上。

開始重構,變成一個 Blazor 專案

對於 Program.cs 這個檔案,並不需要做任何的修正,而對於 Startup.cs 這個檔案,則需要加入一些程式碼
public void ConfigureServices(IServiceCollection services)
{
    #region 在這裡要宣告所要使用的服務
    services.AddRazorPages();
    services.AddServerSideBlazor();
    // 設著將這行註解起來,並且執行,看看會發生甚麼問題?
    services.Configure<RazorPagesOptions>(options => options.RootDirectory = "/");
    #endregion
}
在 ConfigureServices 方法內,將會在這個 ASP.NET Core 專案內啟用 Blazor 會使用到的服務
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    #region 請加入這兩行敘述
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    #endregion

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        #region 將原先空白專案中的敘述,註解起來
        //endpoints.MapGet("/", async context =>
        //{
        //    await context.Response.WriteAsync("Hello World!");
        //});
        #endregion

        #region 請在這裡加入 Blazor 會用到的路由設定功能
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
        #endregion
    });
}
在這裡要修改、調整、新增的程式碼,都特別有使用 #region ... #endregion 標示出來

加入 Blazor 會用到的檔案

現在要開始建立 Blazor 會用到的最少檔案,這裡僅需要三個檔案,就可以建立一個使用 HTML / C# 且具有互動效果的網頁,更美妙的是,整個過程,完全不需要呼叫呼叫 JavaScript。
首先,要建立兩個 Blazor 必備用到的檔案 _Host.cshtml App.razor
請先建立 _Host.cshtml
  • 滑鼠右擊 專案 節點,選擇 [加入] > [新增項目] 功能項目
  • 當 [新增項目] 對話窗顯示之後,請找到並且選擇 [Razor 頁面] 這個項目名稱
  • 在左下方的名稱欄位中,輸入該 Razor 頁面 的名稱 : _Host.cshtml
  • 最後,點選右下角的 [新增] 按鈕
請使用底下的 Razor 頁面的標記與程式碼寫入到這個檔案內
@page "/"
@namespace BlazorFromeEmpty
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor 從無到有</title>
    <base href="~/" />
</head>
<body>

    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>
接著要建立 App.razor
  • 滑鼠右擊 專案 節點,選擇 [加入] > [新增項目] 功能項目
  • 當 [新增項目] 對話窗顯示之後,請找到並且選擇 [Razor 元件] 這個項目名稱
  • 在左下方的名稱欄位中,輸入該 Razor 元件 的名稱 : App.razor
  • 最後,點選右下角的 [新增] 按鈕
請使用底下的 Razor 元件的標記與程式碼寫入到這個檔案內
@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>
最後要來建立第一個 Blazor 元件,也就是首頁頁面 Index.razor
  • 滑鼠右擊 專案 節點,選擇 [加入] > [新增項目] 功能項目
  • 當 [新增項目] 對話窗顯示之後,請找到並且選擇 [Razor 元件] 這個項目名稱
  • 在左下方的名稱欄位中,輸入該 Razor 元件 的名稱 : Index.razor
  • 最後,點選右下角的 [新增] 按鈕
請使用底下的 Razor 元件的標記與程式碼寫入到這個檔案內
@page "/"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web

<h1>從空白 ASP.NET Core 來建立 Blazor 應用程式</h1>

<input @bind-value="Message" @bind-value:event="oninput" />
<p>@Message</p>
<button @onclick="clicked">OK</button>

@code{
    string Message { get; set; } = "Hi 你好";
    void clicked()
    {
        Message = "Click Button";
    }
}

執行看結果

請執行這個專案
這裡將會看到如上圖的畫面,其中該網頁上會有一個文字輸入盒、一個標籤文字、一個按鈕
現在,請在文字輸入盒輸入任何文字,此時,將會看到底下的標籤文字將會出現剛剛顯示的文字內容,這就是使用到 Blazor 內的絕佳特色功能,雙向資料綁定
最後,請按下按鈕,此時,將會觸發該按鈕所綁定的 C# 委派事件方法,並且會重新設定文字輸入盒與標籤文字內容,如上圖所示。
好了,這裡就是 Blazor 應用程式所需要的最簡單的專案內容