设为首页
收藏本站
切换到宽版
登录
立即注册
找回密码
搜索
搜索
本版
帖子
用户
快捷导航
论坛
BBS
VIP用户组
官网群
无名商城论坛
»
论坛
›
资源分享区
›
学习资源专区
›
【L?S】ASP.NET Core Blazor 初探【十】
返回列表
发帖
查看:
220
|
回复:
0
[其他技术]
【L?S】ASP.NET Core Blazor 初探【十】
[复制链接]
无名
无名
当前离线
积分
32464
1万
主题
1万
帖子
3万
积分
管理员
积分
32464
发消息
发表于 2022-5-8 17:34:05
|
显示全部楼层
|
阅读模式
实现删除页面(/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");
我们在取消按钮的事件代码里调用以上代码,这样就能顺利后退了。
student
,
删除
,
JSRuntime
,
取消
,
页面
相关帖子
•
【SYA】5.9代刷破解版源码
•
全网首发彩虹代刷5.9免授权源码
•
【教程】auto.js天猫自动领取猫币
•
【FUT】手机如何用termux安装sqlmap
•
【Max】团队 教大家给自己的源码添加一个分享页面
•
【FUT】VPS服务器自建SpeedTest客户端网络测速页面
回复
使用道具
举报
返回列表
发帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表