经验总结

  1. 首页 > 生活 > >

中 学习ASP.NET Core Blazor编程系列十——路由

生活百科

学习ASP.NET Core Blazor编程系列一——综述
学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（完）学习ASP.NET Core Blazor编程系列三——实体学习ASP.NET Core Blazor编程系列四——迁移学习ASP.NET Core Blazor编程系列五——列表页面学习ASP.NET Core Blazor编程系列七——新增图书学习ASP.NET Core Blazor编程系列八——数据校验学习ASP.NET Core Blazor编程系列九——服务器端校验学习ASP.NET Core Blazor编程系列十——路由（上） 五、通过路由传参通过上面的示例 ， 我们使用<a>标签实现了页面之间的跳转 ， 但是通常我们开发的Web应用程序 ， 通过http的url进行页面跳转时 ， 会进行参数传递 ， 以方便我们跳转到的新页面进行一些前置操作 。下面我们示例来学习如何从“图书列表”页面 ， 使用鼠标点击“编辑“按钮进行跳转时 ， 传递一个参数（例如图书ID）给新的页面“AddBook” 。我们在“图书列表”页面中的将图书ID这个参数 ， 在进行页面跳转时同步传递给“AddBook”页面 ， 并且通过这个ID ， 查询到相应的图书信息 ， 显示在AddBook页面上 。
六、 通过path传参通过url传参一般有两种方式 ， 一种是直接把参数组合在URL的路径（path）里 。路由器使用路由参数以相同的名称填充相应的组件参数 。路由参数名不区分大小写 。在下面的示例中 ， 对 /AddBook/3发出请求 ， 参数Id将URL路径中的参数值赋给AddBook组件的 Id属性 。
1. 在Visual Studio 2022的解决方案资源管理器中 ， 找到 BookIndex.razor 组件 ， 使用鼠标左键双击 ， 在文本编辑器中打开 ， 然后修改代码如下：
@page "/BookIndex"@using BlazorAppDemo.Models@using Microsoft.EntityFrameworkCore@inject IDbContextFactory<BookContext> dbFactory<PageTitle>图书列表</PageTitle><h3>图书列表</h3><table class="table-responsive" width="90%"><tr><td>Name</td><td>Author</td><td>Price</td><td>ReleaseDate</td><td>StockQty</td><td>Qty</td><td>操作</td></tr>@foreach (var item in books){<tr><td>@item.Name</td><td>@item.Author</td><td>@item.Price</td><td>@item.ReleaseDate</td><td>@item.StockQty</td><td>@item.Qty</td><td><a href="https://www.huyubaike.com/AddBook/@item.ID">编辑</a></td></tr>}</table>@code {privatestatic BookContext _context;private List<Book> books = new List<Book>();protected override async Task OnInitializedAsync(){_context = dbFactory.CreateDbContext();books=_context.Book.ToList();await base.OnInitializedAsync();}}      上面代码中 ， <a>标签的代码是通过把Id组合到URL的路径（path）上 ， 将图书的ID传递给AddBook页面 。
2. 在Visual Studio 2022的解决方案资源管理器中 ， 找到 AddBook.razor 组件 ， 使用鼠标左键双击 ， 在文本编辑器中打开 ， AddBook.razor组件中添加一行@page开头的路由模板 。本示例中使用一个“/AddBook/{Id}” 路由模板来匹配Id,并且在代码中声明一个Id属性 ， 并添加特性[Parameter] 。修改代码如下：
@page "/AddBook"@page "/AddBook/{Id}"@using BlazorAppDemo.Models@using Microsoft.EntityFrameworkCore@inject IDbContextFactory<BookContext> dbFactory<h3>AddBook</h3><EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfoOnInvalidSubmit=@InvalidSubmitInfo><DataAnnotationsValidator /><ValidationSummary /><div>@Message</div><p> 图书名称：<InputText @bind-Value=https://www.huyubaike.com/biancheng/addBook.Name>

经验总结扩展阅读


上一篇：2023年6月有几天是装修开工吉日

下一篇：路灯象征着什么品质,代表什么人