将 blazor 参数传递给另一个页面

Question

我一直在尝试通过另一个页面传递参数并且这有效，但是我没有得到我想要的，这可能与我传递的内容有关。

我传递的第一件事是名称，但包括空格和特殊字符，我传递的第二件事是网络 link

如何发送：

<div class="col-sm-4">
            <h3>Programming</h3>
            @if (programming == null)
            {
                <p><em>Loading...</em></p>
            }
            else
            {
                foreach (var program in programming)
                {
                    <a href="/CourseDetails/?name=@program.Name">@program.Name</a>
                    <br />
                }
            }
        </div>

去向

@page "/CourseDetails"

@using Portfolio.Models;
@using Portfolio_Frontend.Data;
@using Microsoft.AspNetCore.WebUtilities

@inject NavigationManager NavigationHelper

<h3>CourseDetails</h3>


@if (Name == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <p>@Name</p>
}




@code {

    
    public string Name { get; set; }

    protected override void OnInitialized()
    {
        var uri = NavigationHelper.ToAbsoluteUri
    (NavigationHelper.Uri);

        if (QueryHelpers.ParseQuery(uri.Query).
    TryGetValue("name", out var name))
        {
            Name = name.First();
        }
    }

}

我也尝试了参数，现在尝试的查询字符串给出了相同的结果。在这种特殊情况下它应该传递的名称是：C# Intermediate: 类, Interfaces and OOP 我得到的只是 'C' 我认为是因为它无法翻译 #.

有没有办法传递文字字符串？

去向：https://localhost:5105/CourseDetails/?name=C#%20Intermediate:%20类,%20Interfaces%20and%20OOP

这对我来说似乎是对的。

Answer 1

URL 语法方法的细微修正

你有：

<a href="/CourseDetails/?name=@program.Name">@program.Name</a>

其中 URL 为 /CourseDetails/?name=C#

通常情况下，您会选择其中之一

/CourseDetails/C#
/CourseDetails?name=C#

除此之外，Blazor 未明确支持可选路由参数 (/CourseDetails?name=C#)

REF: https://blazor-university.com/routing/optional-route-parameters/#:~:text=Optional%20route%20parameters%20aren%E2%80%99t%20supported%20explicitly%20by%20Blazor,,then%20replace%20all%20references%20to%20currentCount%20with%20CurrentCount.

看起来你可以保留可选的查询参数和 fiddle 以及 QueryHelpers.ParseQuery() 我不太相信，但如果你想继续走这条路，请查看这个 post @chris sainty

Link: https://chrissainty.com/working-with-query-strings-in-blazor/

我更愿意创建一个新模型 (DTO)，它确切地知道如何以 URL 编码方式为 link 显示 CourseDetails 名称，以及为用户显示名称。

    public class ProgramModel
    {
        private readonly string name;

        public ProgramModel(string name)
        {
            this.name = name;
        }

        public string DisplayName => name;
        public string RelativeUrl => HttpUtility.UrlEncode(name);
    }

当我们需要在 'Courses' 页面上呈现 link 时，它看起来像这样：

@page "/courses"
@using BlazorApp1.Data

<div class="col-sm-4">
    <h3>Programming</h3>
    @foreach (var program in programming)
    {
        <a href="/CourseDetails/@program.RelativeUrl">@program.DisplayName</a>
        <br />
    }
</div>

@code {

    public IEnumerable<ProgramModel> programming { get; set; }

    protected override void OnInitialized()
    {
        programming = new List<ProgramModel>()
    {
            new ProgramModel("Rust Things"),
            new ProgramModel("JavaScript Things"),
            new ProgramModel("C# Things")
        };
    }
}

最后，当显示 CourseDetails 页面时，我们可以使用最初对字符串进行编码的相同实用程序简单地解码 URL 中的名称，而不是猜测它是否是应用程序的错误，或者浏览器错误“#”没有正确编码为“%23”

@page "/CourseDetails/{Name}"
@inject NavigationManager NavigationHelper
@using System.Web
<h3>CourseDetails</h3>
<p>@HttpUtility.UrlDecode(Name)</p>


@code {
    [Parameter]
    public string Name { get; set; }
}

Answer 2

我建议放弃在页面之间导航并使用组件的想法：

<div>
     @if (SelectedItem is not null)
          {
                <MyResultsPage SelectedProgramClass=@SelectedItem />
          }
</div>

@code 
{
     ProgramClass SelectedItem {get; set;}
    
     void SomeWayToSelectMyItem(ProgramClass newSelection){
          SelectedItem = newSelection;
          StateHasChanged();
     }
}

然后在你的显示页面中，MyResultsPage.blazor

<div>
     <div>@SelectedProgramClass.name</div>
. . . 
</div>
@code {
     [Parameter]
     ProgramClass SelectedProgramClass{get; set;}
}

<MyResultsPage> 在您为 SelectedProgramClass.

赋值之前，不会以任何方式出现在客户端上，甚至不会被初始化

将 blazor 参数传递给另一个页面

passing blazor parameters to another page

blazor-server-side

.net-5