【L?S】ASP.NET Core Blazor 初探【十】

无名

实现删除页面（/student/delete）
删除页面比较简单，使用前面的知识点轻松可以搞定。同样通过Url传递一个Id到删除页面，页面上获取学生数据后进行显示，并且提示用户是否确定删除这个学生信息。如果点击确定就调用删除API进行删除操作，如果点击取消则回退到前一页。为了增加乐趣，这里会增加C#跟JavaScript交互的内容。

@page "/student/delete/{id:int}"

@using BlazorWebAssemblyApp.Model
@using BlazorWebAssemblyApp.Data

@inject HttpClient Http
@inject Store Store
@inject NavigationManager NavManager
@inject IJSRuntime JSRuntime

<h1>Delete</h1>

<h3>
    确定删除（@Student.Id）@Student.Name ？
</h3>

<button class="btn btn-danger" @onclick="OnDeleteAsync">
    删除
</button>

<button class="btn btn-info" @onclick="OnCancel">取消</button>

@code {
    [Parameter]
    public int Id { get; set; }

    private Student Student { get; set; }

    protected override void OnInitialized()
    {
        Student = Store.GetStudentById(Id);
    }

    private async Task OnDeleteAsync()
    {
        var result = await Http.DeleteAsync("/student/" + Id);
        if (result.IsSuccessStatusCode)
        {
            NavManager.NavigateTo("/student/list");
        }
    }

    private void OnCancel()
    {
        JSRuntime.InvokeVoidAsync("history.back");
    }
}
IJSRuntime
当用户点击取消的时候我们需要回退到前一个页面，但是Blazor的NavigationManager并没有提供GoBack这种操作。这个我实在是想不明白，不管是WPF的导航框架、还是VUE的路由服务都有这种机制，以至于我还得通过JavaScript的能力去调用浏览器的原生后退功能来实现。Blazor中想要跟JavaScript交互需要注入JSRuntime对象：

JSRuntime.InvokeVoidAsync("history.back");
我们在取消按钮的事件代码里调用以上代码，这样就能顺利后退了。