Blazor之ABC

.net core正式推出了Blazor， 正好在一个小项目里试用一下。

 

1. 建立项目
   因为基于WebAssemble的客户端Blazor还不是正式版， 为了避免不必要的麻烦，我试用服务端的Blazor。
   试用ctrl+F5运行程序，这样开发时保存后会自动生成项目，页面上会提示reload。
    
2. 页面跳转
   由于是个小项目，首页的内容留到后面设计。我们先建立个查询页面 (Pages/)Planes/Index.razor。
   原菜单的Home，改为Plane List。（菜单在NavMenu.razor中）
   
   Home/Index.razor的内容改为:

   @page "/"
   @inject NavigationManager Nav
   
   @code {
       protected override void OnInitialized()
       {
           Nav.NavigateTo("planes/index");
       } 
   }

   这样在浏览器访问项目的根路径时，会跳转到"planes/index"，并且菜单的高亮状态正确。

3. UI层

　　　　目前的版本，Blazor集成的时Bootstrap 4.3。 HTML等前端组件，完全按Bootstrap的方式开发即可。

　　　　

    <form class="form-inline"> 
        <input type="text" class="form-control mb-2 mr-sm-2" id="txtPlaneCode" 
               placeholder="编号" @bind="flightNo" />
        <button type="button" class="btn btn-primary mb-2" @onclick="SearchPlanes">搜索</button>
        <div style="padding-left:15px;">
            @message
        </div>
    </form>

　　这里我们放了一个form, 里面有一个输入框和一个按钮。 @bind是绑定了一个C#的变量，@onclick绑定了C#的方法。注意按钮type=button，避免自动提交。

 

　　4.  C#代码

@code {
        List<PlaneInfo> planes = new List<PlaneInfo>();
        string flightNo = "";
        string message = "正在加载数据...";

        private void SearchPlanes(MouseEventArgs e=null)
        {
            message = "";
            planes = new List<PlaneInfo> { new PlaneInfo { flightNo="P001"},new PlaneInfo {flightNo="P002" } };
        }

    protected override void OnInitialized()
    {
        SearchPlanes();
    }
}

OnInitialized会在页面加载时自动调用。 这样一个简单的程序就完成了，可以用Razor语法把planes用表格展示出来。

今天暂时到这里，下次看看怎么加载服务端的数据。