Blazor SPA del lado del servidor: Estado del componente después de volver a cargar el componente

Answer

1. 

   davy.ai

   July 26, 2023 at 3:56 am

   Solución para mantener los valores del componente en Blazor

   Si desea mantener los valores del componente después de navegar fuera de la página y volver de nuevo, puede utilizar uno de los siguientes métodos:

   • Almacene los valores en una tienda de administración de estado persistente como Blazor-State.
   • Almacene los valores en el almacenamiento local o en el almacenamiento de sesión.
   • Pase los valores entre los componentes utilizando propiedades o eventos.

   Puede elegir el método que se adapte a la arquitectura y requisitos de su aplicación.

   Almacene los valores en Blazor-State:

   Blazor-State es una biblioteca simple de administración de estado diseñada específicamente para Blazor. Puede utilizarla para guardar y recuperar los valores del componente en una tienda de estado persistente.

   Así es como funciona:

   1. Instale el paquete NuGet Blazor-State.

   PM> Install-Package Blazor-State
   

   1. Cree una clase de estado que contenga los valores del componente. Por ejemplo, puede crear una clase TableState que contenga los campos de búsqueda y los datos de la tabla.

   public class TableState
   {
       public string SearchText { get; set; }
       public List<tablerow> TableData { get; set; }
   }
   

   1. En el componente que contiene la tabla y los campos de búsqueda, agregue una referencia a la tienda de estado e inicialice el estado.

   @inject IStore<tablestate> Store
   
   @code {
       private TableState state;
   
       protected override void OnInitialized()
       {
           state = Store.GetState();
       }
   }
   

   1. Enlace las propiedades del componente a los valores del estado.

   <input type="text" @bind="@state.SearchText">
   
   @foreach (var row in state.TableData) {
       ...
   }
   

   1. Cada vez que se actualicen los valores del componente, actualice los valores del estado.

   state.SearchText = "nuevo texto";
   state.TableData = new List<tablerow>();
   Store.Update(state);
   

   Ahora, cuando navegue fuera de la página y vuelva de nuevo, la tienda de estado restaurará automáticamente los valores del componente.

   Almacene los valores en el almacenamiento local o en el almacenamiento de sesión:

   También puede utilizar el almacenamiento local o el almacenamiento de sesión de HTML5 para almacenar los valores del componente. Así es como funciona:

   1. En el componente, inicialice los valores desde el almacenamiento y guarde los valores en el almacenamiento cada vez que se actualicen los valores del componente.

   @code {
       private string searchText;
       private List<tablerow> tableData;
   
       protected override void OnInitialized()
       {
           searchText = localStorage.getItem("searchText") ?? "";
           tableData = JsonConvert.DeserializeObject<><tablerow>>(localStorage.getItem("tableData")) ?? new List<tablerow>();
       }
   
       private void OnSearchTextChanged(string newValue)
       {
           searchText = newValue;
           localStorage.setItem("searchText", searchText);
       }
   
       private void OnTableDataChanged(List<tablerow> newValues)
       {
           tableData = newValues;
           localStorage.setItem("tableData", JsonConvert.SerializeObject(tableData));
       }
   }
   

   1. Cada vez que se renderee el componente, enlace las propiedades del componente a las variables locales.

   <input type="text" @bind="@searchText" @oninput="@(() => OnSearchTextChanged(searchText))">
   
   @foreach (var row in tableData) {
       ...
   }
   

   Ahora, cuando navegue fuera de la página y vuelva de nuevo, el almacenamiento restaurará automáticamente los valores del componente.

   Pase los valores entre los componentes:

   También puede pasar los valores del componente entre los componentes utilizando propiedades o eventos. Por ejemplo, puede crear un componente TableData que contenga los datos de la tabla y pasar los valores a este componente utilizando propiedades.

   <tabledata @bind-rows="@tableData"></tabledata>
   
   @code {
       private List<tablerow> tableData;
   }
   

   public class TableData : ComponentBase
   {
       [Parameter]
       public List<tablerow> Rows { get; set; }
   }
   

   Ahora, cuando navegue fuera de la página y vuelva de nuevo, el componente TableData mantendrá los valores ya que es un componente separado.

Comments are closed.