【L?S】ASP.NET Core Blazor 初探【八】
使用Edit组件Edit组件封装完成了，让我们开始使用它。新建一个Add.razor文件，并且在这里使用Edit组件。组件的使用跟VUE等一样，使用一个自定义的Tag插入到html的里。
@page "/student/add"
@using BlazorWebAssemblyApp.Model
@inject HttpClient Http
@inject NavigationManager NavManager
Add
@_errmsg
@code {
private Student Student { get; set; }
private string _errmsg;
protected override Task OnInitializedAsync()
{
return base.OnInitializedAsync();
}
private async Task OnSaveAsync(Student student)
{
Student = student;
var result = await Http.PostAsJsonAsync("/student", Student);
if (result.IsSuccessStatusCode)
{
NavManager.NavigateTo("/student/list");
}
else
{
_errmsg = "保存失败";
}
}
}
Add.razor的逻辑很简单，接受Edit组件的保存事件，然后把Student通过Http提交到后台。
通过OnSaveCallback="OnSaveAsync"设置Edit组件的OnSaveCallback事件回调为OnSaveAsync方法。
当我们保存功能的时候，需要跳转到列表页面。Blazor提供了一个简单的导航框架：NavigationManager。NavigationManager是默认注册到IoC容器的，所以可以直接使用@inject注入到需要的地方：
@inject NavigationManager NavManager
调用NavigateTo方法进行页面跳转。
NavManager.NavigateTo("/student/list");
让我们运行一下看看吧：
http://cdn.u1.huluxia.com/g4/M02/93/5A/rBAAdl78DKuANt7BAABMKuzWGJI156.jpghttp://cdn.u1.huluxia.com/g4/M02/93/5A/rBAAdl78DKyAYgVQAAKqv8KiwVM989.jpg
页:
[1]