• 深入浅出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: 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);
            }
        }
    
    }
  • 相关阅读:
    比特币全节点(bitcoind) eth 全节点
    Knowledge Tracing -- 基于贝叶斯的学生知识点追踪(BKT)
    trate
    spark
    linux 切换c++版本
    查找两个数组的相同字符(两个超大文件的相同字符)
    作业调度框架FluentScheduler
    .net与js数据交换中文乱码问题解决
    数据库死锁问题
    Service Fabric service 根据环境变量读取配置文件
  • 原文地址:https://www.cnblogs.com/harrychinese/p/blazaor_CSharp_code.html
走看看 - 开发者的网上家园