Blazor: la página de razor no se actualiza después de que se cambia la propiedad del servicio DI

5
Morten_564834 2019-11-06 09:26.

Uso de dotnet 3.1.100-preview2-014569

Ok, considere el siguiente ejemplo:

Cree un nuevo proyecto Blazor WebAssemply desde la plantilla, luego agregue lo siguiente:

books.razor

@page "/books"
@inject BookService bookService

@if (bookService.isLoaned)
{
    <p><em>Book loaned</em></p>
}
else
{
    <p><em>Book returned</em></p>
}

BookService.cs

public class BookService
    {
        public int BookId { get; set; }

        public string Title { get; set; }

        public bool isLoaned { get; set; }
    }

Startup.cs

public void ConfigureServices(IServiceCollection services)
        {
            services.AddScoped<BookService>();
        }

NavMenu.razor

@inject BookService bookService;
<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorBlank_PV2</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="books" @onclick="LoanBookClicked">
                <span class="oi oi-plus" aria-hidden="true"></span>Loan Book
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="books" @onclick="ReturnBookClicked">
                <span class="oi oi-list-rich" aria-hidden="true"></span>Return Book
            </NavLink>
        </li>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private void LoanBookClicked()
    {
        bookService.isLoaned = true;       
    }
    private void ReturnBookClicked()
    {
        bookService.isLoaned = false;
    }


}

Lo que pasa:

Comportamiento esperado: al hacer clic en el elemento de menú Libro de préstamo, la página debe mostrar Libro prestado o, si hago clic en Devolver libro, debe decir Libro devuelto. Pero esto solo sucede si hago clic en otra página, como Inicio, y luego retrocedo.

¿Cómo puedo obligar a la página a volver a representar / volver a verificar los valores actualizados de BookService incluso cuando ya está en la misma página?

¡Gracias!

2 answers

4
enet 2019-11-06 17:54.

Aquí hay una nueva solución en la que implemento la interfaz INotifyPropertyChanged en la clase BookService. ¿Por qué utilizar esta interfaz?

  • También se puede aplicar a otras propiedades

  • Notificar a los clientes que el valor de una propiedad ha cambiado es parte esencial de un buen servicio, y esto no se limita a llamar a StateHasChanged únicamente para este propósito.

  • Con la interfaz INotifyPropertyChanged implementada, puedo pasar datos de eventos a objetos registrados o suscritos.

Importante: Llamar a un método para actualizar el valor de una propiedad como bookService.SetLoanedState(false)es una mala programación y un diseño anti-patrones. Una propiedad puede tener dos descriptores de acceso, obtener y establecer, y deben usarse para obtener un valor y cambiar un valor. Los métodos tienen diferentes roles ...

BookService.cs


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



public class BookService : INotifyPropertyChanged
    {
        private bool isLoaned;
        public event PropertyChangedEventHandler PropertyChanged;

        public int BookId { get; set; }

        public string Title { get; set; }


        public bool IsLoaned
        {
            get
            {
                return this.isLoaned;
            }

            set
            {
                if (value != this.isLoaned)
                {
                    this.isLoaned = value;
                    NotifyPropertyChanged();
                }
            }
        }


        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

Books.razor

@page "/books"
@inject BookService bookService
@using System.ComponentModel


@if (bookService.IsLoaned)
{
    <p><em>Book loaned</em></p>
}
else
{
    <p><em>Book returned</em></p>
}

@code{

    protected override void OnInitialized()
    {
        bookService.PropertyChanged += PropertyHasChanged;
    }
    private void PropertyHasChanged(object sender, PropertyChangedEventArgs args)
    {
         StateHasChanged();
    }
}

NavMenu.razor

@code {

    // Code removed for brevity

    private void LoanBookClicked()
    {
        bookService.IsLoaned = true;      
    }
    private void ReturnBookClicked()
    {
        bookService.IsLoaned = false;      
    }
}

Espero que esto funcione...

4
David Masterson 2019-11-06 17:24.

books.razor (agregue un controlador para el nuevo evento onchange del servicio de libros)

@page "/books"
@inject BookService bookService

@if (bookService.isLoaned)
{
    <p><em>Book loaned</em></p>
}
else
{
    <p><em>Book returned</em></p>
}

@code{
 protected override void OnInitialized()
    {
        bookService.OnChange += StateHasChanged;
    }
}

BookService.cs (agregar una acción de evento, cambiar la propiedad a solo lectura, agregar un establecedor, el evento de activación NotifyStateChanged ()

public class BookService
    {   
        public event Action OnChange;

        public int BookId { get; set; }

        public string Title { get; set; }

        public bool isLoaned { get; }

        public void SetLoanedState(bool State)
        {
           isLoaned  = State;
           NotifyStateChanged();
        }

        private void NotifyStateChanged() => OnChange?.Invoke();

    }

NavMenu.razor (cambiar para usar el servicio SetLoanedState ()

@inject BookService bookService;
<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorBlank_PV2</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="books" @onclick="LoanBookClicked">
                <span class="oi oi-plus" aria-hidden="true"></span>Loan Book
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="books" @onclick="ReturnBookClicked">
                <span class="oi oi-list-rich" aria-hidden="true"></span>Return Book
            </NavLink>
        </li>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    private void LoanBookClicked()
    {
        bookService.SetLoanedState(true);       
    }
    private void ReturnBookClicked()
    {
        bookService.SetLoanedState(false);
    }


}

Para obtener más información, consulte la publicación del blog de Chris Sainty aquí, lo deja muy claro.

Related questions

MORE COOL STUFF

Cate Blanchett se acostó con su esposo después de 3 días juntos y sigue casada con él 25 años después

Cate Blanchett se acostó con su esposo después de 3 días juntos y sigue casada con él 25 años después

Cate Blanchett desafió los consejos típicos sobre citas cuando conoció a su esposo.

Por qué Michael Sheen es un actor sin fines de lucro

Por qué Michael Sheen es un actor sin fines de lucro

Michael Sheen es un actor sin fines de lucro, pero ¿qué significa eso exactamente?

¡La estrella de Hallmark, Colin Egglesfield, habla sobre emocionantes encuentros con fans en RomaDrama Live! [Exclusivo]

¡La estrella de Hallmark, Colin Egglesfield, habla sobre emocionantes encuentros con fans en RomaDrama Live! [Exclusivo]

¡La estrella de Hallmark, Colin Egglesfield, habló sobre los emocionantes encuentros con los fanáticos en RomaDrama Live! además de su programa INSPIRE en la convención.

Por qué no puedes transmitir 'Northern Exposure' en línea

Por qué no puedes transmitir 'Northern Exposure' en línea

Tendrás que desempolvar un reproductor de Blu-ray o DVD para ver por qué Northern Exposure se convirtió en uno de los programas más populares de los 90.

¿Caduca el repelente de insectos?

¿Caduca el repelente de insectos?

¿Sigue siendo efectivo ese lote de repelente de insectos que te quedó del verano pasado? Si es así, ¿por cuánto tiempo?

Dona tu cabello para ayudar a mantener limpia nuestra agua

Dona tu cabello para ayudar a mantener limpia nuestra agua

Los recortes de cabello de los salones y las donaciones personales se pueden reutilizar como tapetes que absorben los derrames de petróleo y ayudan a proteger el medio ambiente.

Una mirada a las bodas más memorables de la Casa Blanca

Una mirada a las bodas más memorables de la Casa Blanca

Solo unas pocas personas se han casado en la Casa Blanca en los últimos más de 200 años. ¿Quiénes eran y qué se requiere para marcar una boda allí?

¿Cuál es la toronja más dulce: blanca, roja o rosada?

¿Cuál es la toronja más dulce: blanca, roja o rosada?

¿Tu boca se emociona al pensar en comer una toronja jugosa? Bueno, frunce el ceño, porque la toronja está repleta de vitaminas y antioxidantes que tu cuerpo necesita.

Cómo acceder a la base de datos de aprendizaje de Lynda de forma gratuita

Cómo acceder a la base de datos de aprendizaje de Lynda de forma gratuita

Crédito de la imagen: Drew Angerer / Getty Si está buscando adelantarse en su resolución de Año Nuevo y finalmente editar esas fotos familiares, aprender un nuevo lenguaje de programación o manejar Microsoft Excel, su biblioteca local está aquí para ayudarlo. Con su tarjeta de la biblioteca, puede acceder a Lynda y su catálogo de videos y recursos educativos, sin necesidad de suscripción.

Qué estás haciendo cuando llamas a mi hermano "retrasado"

Qué estás haciendo cuando llamas a mi hermano "retrasado"

Ilustración de Jim Cooke. Nunca he sido una persona violenta, al menos no instintivamente.

Este video muestra cómo instalar cables Ethernet en el exterior de su casa

Este video muestra cómo instalar cables Ethernet en el exterior de su casa

Nada es tan confiable para el Internet de su hogar como instalar un cable Ethernet entre habitaciones. En algunos casos, puede ser más fácil tender el cable por el exterior que por el interior de la casa.

GM pagará $ 900 millones por ocultar el defecto del interruptor de encendido a los reguladores: informe

GM pagará $ 900 millones por ocultar el defecto del interruptor de encendido a los reguladores: informe

General Motors pagará una multa de 900 millones de dólares y será acusada penalmente por ocultar un defecto a los reguladores con el fin de poner fin a una investigación federal, según fuentes que hablaron con Reuters. Eso es menos de $ 1.

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

Emma Stone pone a la venta su casa en la playa de Cliffside Malibu por $ 4.2 millones: ¡vea el interior!

Emma Stone pone a la venta su casa en la playa de Cliffside Malibu por $ 4.2 millones: ¡vea el interior!

La casa de mediados de siglo del ganador del Oscar cuenta con tres dormitorios, dos baños y vistas al mar

Jeannie Mai Jenkins dice que "se deprimió mucho, mucho" durante su experiencia de amamantar

Jeannie Mai Jenkins dice que "se deprimió mucho, mucho" durante su experiencia de amamantar

"Te sientes tan derrotada cuando tu bebé tiene hambre que no estás produciendo lo suficiente para el bebé", dijo Jeannie Mai Jenkins sobre amamantar a su hija de 4 meses, Monaco.

La esposa de Bobby Brown, Alicia, no se enfoca en su pasado: "Bobby y Whitney fueron su momento, soy el Yin de su Yang"

La esposa de Bobby Brown, Alicia, no se enfoca en su pasado: "Bobby y Whitney fueron su momento, soy el Yin de su Yang"

La pareja de casi 10 años comparte su historia de amor antes de la nueva serie de realidad de A&E Bobby Brown: Every Little Step, que se estrenará el 31 de mayo.

¿Qué función de borde?

¿Qué función de borde?

Edge Functions... suena sexy, tu abuela no sabrá lo que es, y probablemente tú tampoco, todavía. Está bien, estoy aquí para ayudarlo en su viaje para comprender Edge de una manera más simple, con suerte.

¿También está “tratando” de centrarse más en el cliente?

¿También está “tratando” de centrarse más en el cliente?

¿Ha experimentado alguna vez que el enfoque de las discusiones sobre características de productos cambia de lo que le gusta al cliente a lo que dice el instinto de su parte interesada sobre lo que les puede gustar/disgustar a los clientes? ¿Ha experimentado un momento en que todos en su equipo se preguntan qué hacer y nadie parece estar interesado en el producto? El circuito de retroalimentación Retroalimentación: tiene una connotación negativa, ¿verdad? En realidad, la retroalimentación es una reacción del entorno a nuestras acciones, y necesitamos analizar esta reacción para usarla en nuestro beneficio. Por lo general, esto no se sigue.

Si tienes miedo de Estados Unidos, todavía no estás lo suficientemente asustado

Si tienes miedo de Estados Unidos, todavía no estás lo suficientemente asustado

Los teócratas y los fascistas quieren una sociedad totalitaria, y están a punto de tener una Las ondas de choque reverberaron en todo el mundo. En mi pequeño café en una vieja ciudad europea, lleno de amigos, gente: "¿Realmente lo hicieron?" "¿Están locos?" "¿Qué va a pasar ahora?" "¡Dios mío!" En el parque, a la vuelta de la esquina, donde los perros dan vueltas en felices círculos de verano: “¡No puedo creerlo!” “¿Hay algo que los estadounidenses puedan hacer?” "¿Que pasa ahora?" ¿Que pasa ahora? Esa es la pregunta en la mente de todos.

Language