.NET6 Blazor体验 -＞ 1. 项目结构探索并添加新页面

一.新建一个Blazor WebAssembly项目

 

新建项目如下:

 

二.项目自带文件介绍

1.MS c#程序老规矩，先进Program.cs

a.首先引用类库

b.然后接收参数args，并创建一个builder

c.builder中添加了一个App的控件

d.builder中添加了一个HeadOutlet的控件(MS Core包里面的控件，先不用理会)

c. builder.Services.AddScoped，最后是老朋友依赖注入

d.异步启动程序，到此Program完结

2. App.razor 在Program中引用过,结果如下 

 看名字想是路由 分两部分,Found和NotFound

a.Found中注册了一个的路由,路由指向MainLayout，带了一个参数@routeData

b.NotFound中注册了一个页面，显示Sorry，there‘s nothing at this address

3.MainLayout.razor，在App.razor中按F12发现Shared文件夹中就有MainLayout.razor

 

 

 MainLayout 中两部分，一部分是div，一部分是main

a. div中引用了NavMenu的控件

b.main中写死了一个Link，再组合了一个article，显示@Body的内容

4.NavMenu.razor。再进去看看NavMenu的内容

 

 

 三部分两个div，一个@code

a.第一个div可以明显看出来有我们项目名BlazorApp1，这里应该是网站名称了

b. 第二个div明显看到注册了菜单名和其对应路径

     <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>

c.第三部分@code 写的是C#代码，切换菜单用的 

4.counter.razor 跟随第二个菜单，我们看看counter里面写了什么,此文件在page文件夹

 

a.第一行就注册了一个路径 /counter 这里和之前菜单的href对应上了,看来在菜单栏中配置路径相同就能相应打开页面

b.引入了一个.net core 控件<PageTitle>,从名字看就是title了

c.写了一些HTML代码和一些C#指令(@开头)

c.@Code 里面包含了C#代码，和MVC页面区别类似，只是把JS代码为C#

5.运行一下，成功

 

 6.新建一个页面Test

这里可以将cs，css代码隔离出来，方法是新建一个文件叫XXX.razor.cs/css

 

namespace BlazorApp1.Pages
{

    public partial class Test
    {
        private bool _isShow { get; set; } = false;
        public string BindType { get; set; } = "single";
        private void IsShow()
        {
            
            Console.WriteLine(BindType);
            BindType = BindType == "single"?"cycle": "single";
            listTestEntity.Add(new TestEntity
            {
                id = (int)Math.Round(100.0),
                T1 = "Test"
            });

            _isShow = !_isShow;

        }
        private List<TestEntity> listTestEntity { get; set; } = new List<TestEntity>();

        private class TestEntity
        {


            public int id { get; set; }
            public string? T1 { get; set; }
        }
    }
}

 cs文件中定义了isShow表示table是否显示，一个方法控制table显示，并在listTestENtity中插入数据，一个entity:table内容

@page "/Test"
<PageTitle>Test</PageTitle>


<h3>Test</h3>

<input value="@BindType" @onchange="(e)=>setBindType(e?.Value?.ToString())" />
<input value="@BindType" />
<button class="btn btn-primary" @onclick="IsShow">TestButton</button>

<br />
@if (_isShow)
{
    <table>
        <tr>
            <td>id</td>
            <td>Col1</td>
        </tr>
        @foreach (var item in listTestEntity)
        {
            <tr>
                <td>@item.id.ToString()</td>
                <td>@item.T1?.ToString()</td>
            </tr>
        }
    </table>    
}
else
{
    <span>have no data</span>
}

@code {
    private void setBindType(string? value)
    {
        BindType = value;
    }

}

razor文件中@Page指令表示其路径，创建两个input测试单项绑定还是双向，创建一个button，click方法调用cs中的IsShow来控制table的显示，最后将table显示出来

最后别忘了在NavMenu.razor中注册菜单

运行

点

 

再点

 

成功 

最后验证结论: Blazor中的数据绑定和React类似，单项绑定，如果要从页面改数据，需要用change 等事件