如何在 Blazor 中的页面之间传递对象

Question

我有我的主页，在此页面中我有一个包含对象的列表。通过 foreach 我得到了它的项目，如果您单击按钮，我想将项目传递到另一个页面。我怎样才能通过呢？

Answer 1

如果它是一个简单的值（int, string），那么您可以将此值作为路径或查询参数传递到其他页面：

来自页面：

<ul>
  <li><a href="/page/a">A</a></li>
  <li><a href="/page/b">B</a></li>
  <li><a href="/page/c">C</a></li>
</ul>

到页面：

@page "/page/{PathParam}"

<h1>Page @this.PathParam</h1>

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

但是，如果数据更复杂，请尝试使用此处描述的选项之一：https://learn.microsoft.com/en-us/aspnet/core/blazor/state-management ?view=aspnetcore-5.0&pivots= webAssembly（服务器端存储、浏览器存储或内存状态容器服务）

Answer 2

对于更复杂的对象，最好使用StateContainer（在内存解决方案中）。

注册您的StateContainer姓名MauiProgram.cs：

builder.Services.AddScoped<StateContainer>();

其中StateContainer.cs包含：

public readonly Dictionary<int, object> ObjectTunnel = new();

然后作为一个例子我将ComplexObject.cs在哪里创建

public class ComplexObject
{
    public int Count = 0;
    public string Color = string.Empty;
}

然后当您有页面例如Index.razor并且Counter.razor您想ComplexObject从一个页面发送到另一个页面时，然后Index.razor注入StateContainer

并调用类似的内容：

public void OpenCounterWithData()
{
    var data = new ComplexObject{Count = 3, Color="red"}
    _stateContainer.ObjectTunnel.Add(data.GetHashCode(), data)

    _navigationManager.Navigate($"counter/{data.GetHashCode()}")
}

并在Counter.razor您指定页面中，例如：

@page "/counter/{SetHashCode:int}"

和输入参数：

[Parameter] public int SetHashCode { get; set; }

例如，OnInitialized您可以从中提取值StateContainer：

protected override void OnInitialized()
{
    var data = (ComplexObject) _stateContainer.ObjectTunnel[SetHashCode];
}

之后您还应该从ObjectTunnel. 这基本上就是整个流程。

优化：

• 我创建了一些扩展方法来优化流程

StateContainerExtensions.cs

public static class StateContainerExtensions
{
    public static int AddRoutingObjectParameter(this StateContainer stateContainer, object value)
    {
        stateContainer.ObjectTunnel[value.GetHashCode()] = value;
        return value.GetHashCode();
    }

    public static T GetRoutingObjectParameter<T>(this StateContainer stateContainer, int hashCode)
    {
        return (T) stateContainer.ObjectTunnel.PopValue(hashCode);
    }
}

和DictionaryExtensions.cs

public static class DictionaryExtensions
{
    public static TValue PopValue<TKey, TValue>(this Dictionary<TKey, TValue> dictionary, TKey keyName) where TKey : notnull
    {
        var value = dictionary[keyName];
        dictionary.Remove(keyName);
        return value;
    }
}

使用这些扩展方法，您可以

_stateContainer.ObjectTunnel.Add(data.GetHashCode(), data)

仅使用：

_stateContainer.AddRoutingObjectParameter(_trainingSet);

而是：

var data = (ComplexObject) _stateContainer.ObjectTunnel[SetHashCode];
_stateContainer.ObjectTunnel.Remove(SetHashCode);

使用：

var data = _stateContainer.GetRoutingObjectParameter<ComplexObject>(SetHashCode);