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 文件内容:
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 { 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: C#以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); } } }