CODEWITHSUNDEEP
c#blazor-server-side
Sebastian
Sebastian

Reputation: 4811

Blazor Server side shared component is not showing updated data without page reload

I am making a blazor server side project and contains a shared layout across all the pages of the project which consist of a Top Search Textbox inside a component like below

Shared Layout

<div>
  <TopSearchInput></TopSearchInput> // This component will appear on the header across all the pages
</div>
<div>
  @Body //Different pages will render here...
</div>

Application startup is like below

services.AddTransient<IContactService, ContactService>();

There is a page called Contact Details and design of the page is like

ContactDetailsPage Component ----]--

@inject IContactService  ContactService 
<div >@ContactMaster.Status</div>
<button click="updateStatus()" />
@code 
{
    [Parameter]
    public ContactViewModel ContactMaster { get; set; } 
    async void updateStatus()
    {
        bool updated = await ContactService.IgnoreContact(ContactMaster.Id);
        if (updated)
        {
            ContactMaster.Status = "Ignored";
        }
    }
}

This page is for loading the contact informations and inside this page, i am performing an updation of Status and model is getting modified and page is refreshing with modified status without reloading the page

My Top search box is performing a search and showing the search results and the component is like below

TopSearchInput Component ----]----]

@inject IContactService  ContactService 

<input  Class="pa-2 ma-0 globalsearchbox" disabled="@IsOpen"  @bind-value="SearchText" 
        @bind-value:event="oninput" @onkeyup="OnInputKeyDown" /> 
  <div>Search results will come here as list of contact.name contact.status .....from 
  resultmodel returned by the service</div>

@code 
{
      public string SearchText { get; set; } = string.Empty; 

      private async Task OnInputKeyDown(KeyboardEventArgs e)
      {
        if (e.Code == "Enter" || e.Code == "NumpadEnter")
        {
            if (string.IsNullOrWhiteSpace(SearchText) || SearchText.Length < 3)
            {
                SearchText = "";
                return;
            }
            else
            {                       
                resultModel = await ContactService.GetGlobalSearchResults(SearchText);   
            }
        }
     } 
}

The Status is not modified until i am reloading the page For example : If i perform a search 'Adam' , the results will show as

Adam1 Active

Adam2 Active

Adam3 Active

When i clicked on Adam1 , it loads the ContactDetailsPage of Adam1 and inside the page i update the status of Adam1 as Ignored . The service updates the records in database and i am getting ok response back from the service and the component is re-rendering with modified status correctly. I am not performing any page reload till the time

On top Search box , if i perform a search one more time for keyword , i am getting same set of results

Adam1 Active [ Which is wrong the correct status is Ignored ]

Adam2 Active

Adam3 Active

But if i reload page and do a search then the correct status is coming for search results

Is there any way to ensure that ContactService.GetGlobalSearchResults is return results with latest record status values back ? Is it because of the way i register service at startup? Or some other reasons?

Upvotes: 0

Views: 392

Answers (1)

quain
quain

Reputation: 984

Well, since you registered ContactService as transient, then every component in theory will get a separate copy of said service. Later on the life cycle of those components they will receive the same copy of the service on re-render - funny stuff when it comes to Blazor server-side and scopes.

So I would say to try and make this service a scoped service and see what this will get you - mind that scoped will act similarly to singleton per user in Blazor server - you need to dive into some posts about it, it's quite broad topic.

This scope change should give you the shared data inside the service. Other thing would be to inform the search component about that it needs to re-render - be it by parameter or event of some sorts from the service.

Upvotes: 1

Related Questions