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

桃扇骨 2024-03-16 13:18 43阅读 0赞

#### 八、通过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` 组件，使用鼠标左键双击，在文本编辑器中打开，然后修改代码如下：

![e6dd409c6cb1e131046a4b8197d0438e.gif][]

@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();
        }
    
    }

![5d71c647c7d8dc2398be2cb3f9690b07.gif][]

上面代码中，<a>标签的那一行代码是通过把Id参数放在URL的QueryString中，将图书的ID传递给AddBook页面。

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

![57bef4dde074ac8d431636805186bcca.gif][]

@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 = "图书信息保存失败！";
    
           }
    
        }
     
    }

![0eaa98554f9a622b500979ec3d14c15d.gif][]

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

![a15f4cfc0e0ab164cd2a886216dff1d6.png][]

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

![4df6e5ef0163e2f61695d3a9f239a5b0.png][]

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

![4e1cf8e22c863a14bb07576d45013699.gif][]

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;
                    }
                }
            }
        }

![acebb165852e32686453a432ca6e7f1e.gif][]

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

![cab800e46edcf15c96f0cd0bab923764.png][]

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

![7286e930b50cfffdd6987d30b026d127.png][]

[e6dd409c6cb1e131046a4b8197d0438e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/77310b08be704203b1739801246b0c8c.png
[5d71c647c7d8dc2398be2cb3f9690b07.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/20d5bf4bee1941048b959ea566c00d10.png
[57bef4dde074ac8d431636805186bcca.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/84793bab017343e8820ada9b87a96877.png
[0eaa98554f9a622b500979ec3d14c15d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9982a84f5972464f8004273dd7ff0a74.png
[a15f4cfc0e0ab164cd2a886216dff1d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8f4237c971464e24ba2d8c25cc44c719.png
[4df6e5ef0163e2f61695d3a9f239a5b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a2904f01f5b54c8e8a5867a115a5bdc3.png
[4e1cf8e22c863a14bb07576d45013699.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4f46549c15744786a4d5f818ea8ef857.png
[acebb165852e32686453a432ca6e7f1e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2eeab1c2ab97457d92f472d58c4783e0.png
[cab800e46edcf15c96f0cd0bab923764.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4918d39189834dd3b01ed85ed828081e.png
[7286e930b50cfffdd6987d30b026d127.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/78f2ed7ba7aa4a3d9e4dea7ec86fb320.png