标签:tno initial 自动调用 页面跳转 err 客户端 class 集成 mes
.net core正式推出了Blazor, 正好在一个小项目里试用一下。
1 @page "/" 2 @inject NavigationManager Nav 3 4 @code { 5 protected override void OnInitialized() 6 { 7 Nav.NavigateTo("planes/index"); 8 } 9 }
这样在浏览器访问项目的根路径时,会跳转到"planes/index",并且菜单的高亮状态正确。
目前的版本,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用表格展示出来。
今天暂时到这里,下次看看怎么加载服务端的数据。
标签:tno initial 自动调用 页面跳转 err 客户端 class 集成 mes
原文地址:https://www.cnblogs.com/ybst/p/11792830.html