zoukankan      html  css  js  c++  java
  • 深入浅出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);
            }
        }
    
    }
  • 相关阅读:
    并发与并行
    连接221.5.250.163的16000端口问题(转载)
    删除瑞星 江民 卡巴 360文件夹下的MFC42.DLL
    pif文件
    超级浓缩diy.asp上传小马
    删除瑞星 江民 卡巴 360文件夹下的MFC42.DLL
    超级浓缩diy.asp上传小马
    一个怪异的病毒Backdoor.RWX.2005.hy(转载)
    一个怪异的病毒Backdoor.RWX.2005.hy(转载)
    修改加速软件之本地分流(突破电信上网限制)
  • 原文地址:https://www.cnblogs.com/harrychinese/p/blazaor_CSharp_code.html
Copyright © 2011-2022 走看看