码迷,mamicode.com
首页 > 其他好文 > 详细

Blazor之ABC

时间:2019-11-04 17:16:58      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:tno   initial   自动调用   页面跳转   err   客户端   class   集成   mes   

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

 

  1. 建立项目
    因为基于WebAssemble的客户端Blazor还不是正式版, 为了避免不必要的麻烦,我试用服务端的Blazor。
    试用ctrl+F5运行程序,这样开发时保存后会自动生成项目,页面上会提示reload。
     
  2. 页面跳转
    由于是个小项目,首页的内容留到后面设计。我们先建立个查询页面 (Pages/)Planes/Index.razor。
    原菜单的Home,改为Plane List。(菜单在NavMenu.razor中)
    Home/Index.razor的内容改为:
    1 @page "/"
    2 @inject NavigationManager Nav
    3 
    4 @code {
    5     protected override void OnInitialized()
    6     {
    7         Nav.NavigateTo("planes/index");
    8     } 
    9 }

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

  3. UI层

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

    

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

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

 

  4.  C#代码

 1 @code {
 2         List<PlaneInfo> planes = new List<PlaneInfo>();
 3         string flightNo = "";
 4         string message = "正在加载数据...";
 5 
 6         private void SearchPlanes(MouseEventArgs e=null)
 7         {
 8             message = "";
 9             planes = new List<PlaneInfo> { new PlaneInfo { flightNo="P001"},new PlaneInfo {flightNo="P002" } };
10         }
11 
12     protected override void OnInitialized()
13     {
14         SearchPlanes();
15     }
16 }
OnInitialized会在页面加载时自动调用。 这样一个简单的程序就完成了,可以用Razor语法把planes用表格展示出来。

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

 

Blazor之ABC

标签:tno   initial   自动调用   页面跳转   err   客户端   class   集成   mes   

原文地址:https://www.cnblogs.com/ybst/p/11792830.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!