深入淺出Blazor webassembly之razor組件的C#代碼組織形式

blazor webassembly之razor組件會被編譯成同名的C#類, 官方模版生成的razor文件, C#和Html混寫一起. 其實blazor 組件C#代碼還有其他組織形式.
我們自己的C#代碼該寫到哪個文件中.

===================================
形式1: C#和Html混寫在 razor 文件中
===================================
官方模版生成的razor文件就是這個寫法, 看頁面和后臺數據關系, 非常簡單方便.

FetchData.razor 文件內容:

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;


    protected override async Task OnInitializedAsync()
    {
        Console.WriteLine("hello world");
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");

    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

===================================
形式2: C#以paritial 類的形式寫到單獨的文件中
===================================
這個寫法也很簡單, 建立一個同名的 razor.cs 文件, 將我們自己的C#代碼放到這個文件中.

FetchData2.razor 文件內容:

@page "/fetchdata2"
@* razor 模版部分和 fetchdata page 一樣 *@
@inject HttpClient Http

<h1>Weather forecast2 </h1>

<p>This component demonstrates fetching data from the server.</p>
  

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else {
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

FetchData2.razor.cs 文件內容:

最好將子類名 ComponentBase 加上, 這樣代碼智能提示的效果會更好一些.

using System.Net.Http;
using System.Net.Http.Json;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.AspNetCore.Components.WebAssembly.Http;
using Microsoft.JSInterop;
using System.Threading.Tasks;
using System.Linq;
using System.Collections;
using System;
namespace blazorDemo1.Pages
{

    public partial class FetchData2:ComponentBase 
    {
        private WeatherForecast[] forecasts;

        protected override async Task OnInitializedAsync()
        {
            Console.WriteLine("hello world");
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json"); 
        }

        public class WeatherForecast
        {
            public DateTime Date { get; set; }

            public int TemperatureC { get; set; }

            public string Summary { get; set; }

            public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        }
    }

}

===================================
形式3: razor 繼承自一個自定義的C# 類
===================================

razor 繼承一個自定義的 FetchData3Base 類, 而 FetchData3Base 又繼承自 ComponentBase 類.

FetchData3.razor 文件內容:

@page "/fetchdata3"

@* 繼承自 FetchData3Base 類 *@
@inherits FetchData3Base

@* Http 已經在 FetchData3Base C#代碼中做了注入, 這里需要刪除注入
 @inject HttpClient Http 
 *@


<h1>Weather forecast3</h1>

<p>This component demonstrates fetching data from the server.</p>
 

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else {
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

FetchData3.razor.cs 文件內容:

using System.Net.Http;
using System.Net.Http.Json;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.AspNetCore.Components.WebAssembly.Http;
using Microsoft.JSInterop;
using System.Threading.Tasks;
using System.Linq;
using System.Collections;
using System;
using Microsoft.AspNetCore.Components;

namespace blazorDemo1.Pages
{

    /// <summary>
    /// 新建 FetchData3Base 基類,  FetchData3 razor自動生成類將繼承自這個類
    /// FetchData3Base 類需要繼承自 ComponentBase
    /// FetchData3Base 類注入 HttpClient 后, 就可以在 OnInitializedAsync() 獲取json data
    /// </summary>
    public class FetchData3Base :   ComponentBase 
    {
        [Inject] protected HttpClient Http { get; set; }
        protected WeatherForecast[] forecasts;
        protected override async Task OnInitializedAsync()
        {
            Console.WriteLine("hello world");
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json"); 

      
        }

       

      
        public class WeatherForecast
        {
            public DateTime Date { get; set; }

            public int TemperatureC { get; set; }

            public string Summary { get; set; }

            public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        }
    }

}

posted @ 2021-08-07 22:52 harrychinese 閱讀(550) 評論(0) 收藏舉報

刷新頁面返回頂部

harrychinese

深入淺出Blazor webassembly之razor組件的C#代碼組織形式

公告