【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");
让我们运行一下看看吧：