C# .NET Blazor MAUI Xamarin Research

2019年12月17日星期二

在 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 空白專案

想要進行這樣的專案開發練習，可以參考底下的操作步驟

打開 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 應用程式所需要的最簡單的專案內容

訂閱：文章 (Atom)

2019年12月17日 星期二

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

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

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

修正 Startup.cs

修改 _Layout.cshtml

建立 Blazor 專案

讓 MVC 專案參考 Blazor 專案

在 MVC View 內，使用 Blazor Component 元件

執行 ASP.NET Core MVC 專案

2019年12月13日 星期五

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

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

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

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

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

加入 Blazor 會用到的檔案

執行看結果

2019年12月17日星期二

2019年12月13日星期五

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