学习ASP.NET Core Blazor编程系列十二——路由（下）

最新推荐文章于 2023-08-01 08:02:32 发布

野生的狒狒

最新推荐文章于 2023-08-01 08:02:32 发布

阅读量160

点赞数

文章标签： microsoft

本文链接：https://blog.csdn.net/Gefangenes/article/details/131040473

版权

八、通过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这样的地址。如下图。

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

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，我们取到了我们想到的参数值。如下图。