C#blazor如何将列表传递给页面 [英] c# blazor how to pass a List to a page

问题描述

第二页接收以下参数:

@page "/newrecord/{Employees}"
@inject HttpClient http

<h1>@Employees.Count</h1>

@code {
    [Parameter]
    public List<Model.Employees> Employees{ get; set; }
}

在我的主页上，我单击这样的按钮时会通过列表:

On my main page Im passing the list when clicking a button like this:

List<Model.Employees> selected { get; set; }

private void OnAddRecord()
    {
        NavigationManager.NavigateTo($"newrecord/{this.selected}");
    }

单击按钮时出现错误，我可以看到URL的格式如下:

When the button is clicked I get an error and I can see the URL is being formed like this:

如何将该对象传递给第二页?我是否必须使用LocalStorage?还是使用其他类型的对象?

How can I pass this object to the second page? Do I have to use maybe LocalStorage? Or use other type of object?

推荐答案

对此问题的可行解决方案是在服务中实现状态模式和通知模式，以保持对象的状态并通知订阅对象更改.因此，您可以创建一个服务，该服务缓存Employees的集合，允许对象(在这种情况下，您的主要组件)将雇员添加到该集合中，并将该事实通知订阅者(newrecord)，以启用对该集合的访问，或者甚至更好以事件args对象的形式将其从服务传递到订阅者对象.这是如何实现状态模式和通知模式的基本示例. (请注意:此示例工作得很好，并且不是为答案而创建的...)

A viable solution to such issue is to implement the state pattern and notification pattern in a service that keep the state of objects and notify subscribing objects of changes. Thus, you can create a service which cache a collection of Employees, allow objects (your main component in this case) to add employees to that collection, and notify subscribers ( newrecord ) of that fact, enabling access to this collection, or still better passing it from the service to the subscriber object in the form of event args object. Here's a basic sample how to implement the state pattern and notification pattern. (note: this sample works perfectly fine, and it was not created for the answer...)

@inject NotifierService Notifier
@implements IDisposable

@inject IState State

<hr />
<input type="checkbox" @bind="State.ShowEasterEggs" />Show Easter Eggs
<hr />

<h1>User puts in something</h1>
<input type="text" @bind="@value" />
<button @onclick="@AddValue">Add value</button>

@foreach (var value in Notifier.ValuesList)
{
   <p>@value</p>
}


@code {
private string value { get; set; }

public void AddValue()
{
    Notifier.AddTolist(value);

}

public async Task OnNotify()
{
    await InvokeAsync(() =>
    {
        StateHasChanged();
    });
}


protected override void OnInitialized()
{
    Notifier.Notify += OnNotify;
}
public void Dispose()
{
    Notifier.Notify -= OnNotify;
}
}

Child2.razor

@inject NotifierService Notifier
@implements IDisposable

@inject IState State

<hr />
@if (State.ShowEasterEggs)
{
  <span>EASTER EGGS SHOWN</span>
}

<hr />

<h1>Displays Value from service and lets user put in new value</h1>

<input type="text" @bind="@value" />

<button @onclick="@AddValue">Set Value</button>

@code {
  private string value { get; set; }


 public void AddValue()
 {
    Notifier.AddTolist(value);

 }

 protected override void OnInitialized()
 {
    State.Notify += OnNotify;

 }

 public void OnNotify()
 {
    InvokeAsync(() =>
    {
        StateHasChanged();
    });
 }


 public void Dispose()
 {
    State.Notify -= OnNotify;
 }

}

NotifierService.cs

 using System;
 using System.Collections.Generic;
 using System.Net.Http;
 using System.Threading.Tasks;
 using ChildComponentsCommunication.Shared;
 using Microsoft.AspNetCore.Components;

 namespace ChildComponentsCommunication
{
    public class NotifierService
    {
        private readonly List<string> values = new List<string>();
        public IReadOnlyList<string> ValuesList => values;

        public NotifierService()
        {

        }

        public async void AddTolist(string value)
        {
            values.Add(value);
            if (Notify != null)
            {
               await Notify?.Invoke();
            }

        }

        public event Func<Task> Notify;
  }
}

IState.cs

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;

 namespace ChildComponentsCommunication
{
  public interface IState
  {
    event Action Notify;
    bool ShowEasterEggs { get; set; }
  }
  public class State : IState
  {
    public event Action Notify;

    bool showEggs = false;
    public bool ShowEasterEggs
    {
        get => showEggs;
        set
        {
            if (showEggs != value)
            {
                showEggs = value;

                if (Notify != null)
                {
                    Notify?.Invoke();
                }
            }
        }
      }

   }
}

Startup.ConfigureServices

 services.AddSingleton<IState, State>();
 services.AddScoped<NotifierService>();

希望这行得通...

这篇关于C#blazor如何将列表传递给页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！