学习ASP.NET Core Blazor编程系列十——路由(下)

  • 学习ASP.NET Core Blazor编程系列十——路由(下)已关闭评论
  • 7 次浏览
  • A+
所属分类:.NET技术
摘要

学习ASP.NET Core Blazor编程系列一——综述        除了把参数直接拼接在URL路径(path)里,另一种常用的传递参数的方法是,将参数做为QueryString传递给跳转页面,比如“/BookIndex?Id=3”。可从 NavigationManager.Uri 属性中获取请求的查询字符串,在跳转页面中注入,具体代码如下。

学习ASP.NET Core Blazor编程系列一——综述

八、通过QueryString传参

       除了把参数直接拼接在URL路径(path)里,另一种常用的传递参数的方法是,将参数做为QueryString传递给跳转页面,比如“/BookIndex?Id=3”。可从 NavigationManager.Uri 属性中获取请求的查询字符串,在跳转页面中注入,具体代码如下。

@inject NavigationManager NavigationManager   ...   var query = new Uri(NavigationManager.Uri).Query;

         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="/AddBook?Id=@item.ID">编辑</a></td>     </tr>       } </table>     @code {     private   static 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的QueryString中,将图书的ID传递给AddBook页面。

      2. 在Visual Studio 2022的解决方案资源管理器中,找到 AddBook.razor 组件,使用鼠标左键双击,在文本编辑器中打开,AddBook.razor组件注入NavigationManager从 NavigationManager.Uri 属性中获取请求的查询字符串。修改代码如下:

@page "/AddBook" @using BlazorAppDemo.Models @using Microsoft.EntityFrameworkCore @inject IDbContextFactory<BookContext> dbFactory @inject NavigationManager NavigationManager    <h3>AddBook</h3>  <EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfo  OnInvalidSubmit=@InvalidSubmitInfo>      <DataAnnotationsValidator />     <ValidationSummary />       <div>@Message</div>     <p> 图书名称:     <InputText @bind-Value=addBook.Name></InputText>         <ValidationMessage For="@(() => addBook.Name)" />     </p>     <p>作者:     <InputText @bind-Value=addBook.Author></InputText>         <ValidationMessage For="@(() => addBook.Author)" />     </p>          <p>出版日期:     <InputDate @bind-Value=addBook.ReleaseDate></InputDate>      </p>     <p>价格:     <InputNumber @bind-Value=addBook.Price></InputNumber>      </p>     <p>类型:      <InputText @bind-Value=addBook.Type></InputText>         <ValidationMessage For="@(() => addBook.Type)" />       </p>     <p>总页数:     <InputNumber @bind-Value=addBook.TotalPages></InputNumber>      </p>     <p>库存数量:     <InputNumber @bind-Value=addBook.StockQty></InputNumber>         <ValidationMessage For="@(() => addBook.StockQty)" />      </p>     <p>已租数量:     <InputNumber @bind-Value=addBook.Qty></InputNumber>      </p>      <input type="submit" class="btn btn-primary" value="Save" />     </EditForm>  @code {      private string Message = string.Empty;      private static BookContext _context;      private Models.Book addBook = new Book();      protected override Task OnInitializedAsync()     {         _context = dbFactory.CreateDbContext();         return base.OnInitializedAsync();     }       public string Id { get; set; }       protected override void OnParametersSet()     {          var query = new Uri(NavigationManager.Uri).Query;

        var str = query;

     }         private void ValidSubmitInfo(EditContext editContext)     {           if (editContext.Model is  Book addBook)         {             Message = "你编辑的不是图书信息,校验通过。正在保存。";                     }     }     private void InvalidSubmitInfo(EditContext editContext)     {         if (editContext.Model is  Book addBook)                 {             Message = "你编辑的图书信息校验不通过,请修改。";         }       }       private void Save(EditContext editContext)     {         bool dataIsValid = editContext.Validate();         if (!dataIsValid)         {             Message = "你编辑的图书信息校验不通过,请修改。";             return;         }             if (editContext.Model is not Book addBook)         {             Message = "你编辑的不是图书信息。";             return;         }    if (string.IsNullOrEmpty(Id) || Id == "0" )         {             _context.Add(editContext.Model);         }               int cnt=  _context.SaveChanges();          if (cnt>0)         {         Message = "图书信息保存成功!";           } else        {             Message = "图书信息保存失败!";         }      }   }

      3.在Visual Studio 2022的菜单栏上,找到“调试--》开始调试”或是按F5键,Visual Studio 2022会生成BlazorAppDemo应用程序,并在浏览器中打开Home页面,我们我们使用鼠标左键点击左边菜单上的“图书列表”菜单项,浏览器会显示我们修改过的图书列表页面,将鼠标指针悬停在“编辑”链接上可以查看,链接背后的URL值,我们会在浏览器的左下角看到https://localhost:7110/AddBook?Id=3这样的地址。如下图。

学习ASP.NET Core Blazor编程系列十——路由(下)

      4.在浏览器中,使用鼠标左键点击我们要修改的图书信息的“编辑”按钮,浏览器会自动跳转到AddBook页面。我们在AddBook的OnParametersSet方法 中设置断点,我们看到QueryString是取到了,但是不是我们想到的那种形式,如下图红框。

学习ASP.NET Core Blazor编程系列十——路由(下)

        5.我们希望是获取的参数是一个字典集合,能通过键值,直接获取参数值,而不是上图中的这种字符串形式。Blazor看来没有对QueryString进行封装。所以我们需要通过QueryHelpers.ParseQuery方法将QueryString格式化成字典形式,然后通过输入KEY值获取对应的参数值。QueryHelpers类存Microsoft.AspNetCore.WebUtilities这个库里。我们修改OnParametersSet方法中的代码,具体代码如下所示:

protected override void OnParametersSet()      {          var query = new Uri(NavigationManager.Uri).Query;         var queryDic = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(query);          Id = queryDic["Id"].ToString() ?? "0";          if (!string.IsNullOrEmpty(Id))         {             if (Id!="0")             {                 int iId = int.Parse(Id);                 var book = _context.Book.Find(iId);                 if (book!=null)                 {                     addBook = book;                 }             }         }     }

      6.在浏览器中,使用鼠标左键点击我们要修改的图书信息的“编辑”按钮,浏览器会自动跳转到AddBook页面。我们在Visual Studio 2022的文本编辑器中的AddBook.razor文件的OnParametersSet方法 中设置断点,我们看到QueryString是取到了,我们看通过QueryHelpers.ParseQuery方法将QueryString格式化成字典形式,通过键值ID,我们取到了我们想到的参数值。如下图。
学习ASP.NET Core Blazor编程系列十——路由(下)

 

7.在Visual Studio 2022中按F5,让代码继续执行。回到浏览器中,页面已经自动跳转到AddBook页面,并将我们需要修改的图书信息显示出来。如下图。

学习ASP.NET Core Blazor编程系列十——路由(下)