Saltar al contenido

Componente Blazor: actualice el elemento principal cuando el modelo se actualice desde el componente secundario

La guía o código que hallarás en este artículo es la resolución más eficiente y válida que hallamos a tus dudas o dilema.

Crear un servicio compartido. Suscríbase al evento “RefreshRequested” del servicio en el elemento principal e Invoke() en el elemento secundario. En el método principal, llame a StateHasChanged();

public interface IMyService

 event Action RefreshRequested;
 void CallRequestRefresh;
 

public class MyService: IMyService

    public event Action RefreshRequested;
    public void CallRequestRefresh()
    
         RefreshRequested?.Invoke();
    



//child component
MyService.CallRequestRefresh();


//parent component
MyService.RefreshRequested += RefreshMe;

private void RefreshMe()

    StateHasChanged();

El flujo de parámetros en cascada es hacia abajo. Para que su padre se actualice, desea proporcionar una devolución de llamada que el componente secundario pueda llamar, pasándole algún valor. Ya mostré en la sección Blazor aquí cómo crear una devolución de llamada en el componente principal y cómo desencadenar la devolución de llamada, pasándole un valor.

El siguiente fragmento de código es el método más apropiado para actualizar un componente principal cuando un modelo se actualiza desde su componente secundario. Pero agrega más a las ofertas: no hay dependencia entre padres e hijos. No se crea específicamente para notificar un cambio de estado. Notifica cuando una propiedad, cualquier propiedad ha cambiado, y puede proporcionar a los suscriptores el nombre de la propiedad cuyo valor ha cambiado, el nuevo valor, etc.

 using System.ComponentModel;
 using System.Runtime.CompilerServices;
 using System.ComponentModel.DataAnnotations;

El punto principal a tener en cuenta aquí es que nuestra clase modelo implementa la interfaz INotifyPropertyChanged…

CountModel.cs

public class CountModel : INotifyPropertyChanged

    private int count;
    public int Count
    
        get => count;
        set => SetProperty(ref count, value);
    

    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged([CallerMemberName] string propertyName = null)
    
        PropertyChanged?.Invoke(this, new 
                                   PropertyChangedEventArgs(propertyName));
    

    bool SetProperty(ref T storage, T value, [CallerMemberName] string 
                                                     propertyName = null)
    
        if (Equals(storage, value))
        
            return false;
        

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    

    public void Increment()
    
        Count++;
    

conde.razor

@page "/count"
@implements IDisposable


    

Count parent

Current count is : @currentCount.Count

@code private CountModel currentCount = new CountModel(); protected override void OnInitialized() currentCount.PropertyChanged += (sender, args) => StateHasChanged(); public void Dispose() currentCount.PropertyChanged -= (sender, args) => StateHasChanged();

CountChild.razor

Count child

Current count is : @currentCount.Count

@code [CascadingParameter] private CountModel currentCount get; set;

Espero que esto ayude…

Te mostramos reseñas y calificaciones

Nos puedes patrocinar nuestra faena exponiendo un comentario y dejando una puntuación te damos las gracias.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *