深入浅出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);
        }
    }

}