Reload parent component after updating child in Blazor

Question

Hi

I've been a developer off and on for years, but am just getting into the world of .net and web apps in Blazor, so I'm starting with a pretty basic proof of concept. I have a page with a child component, and I'm trying to make the parent page redraw itself (without reloading) when the child component is changed. The child component has an input box with some validation logic, and I want to invoke a task on the parent page that will retrieve that value and change how it looks. In my first pass, I'm simply trying to get the value from the child to update a variable on the parent and show that value as text.

I know the code runs because the console output is correct. I've tried a few different ways of triggering the reload, but to no avail.

Here's the code for the child component:

@inherits Incrementing.Pages.First  
  
  
  
  
@inputContent  
  
  
@code {  
    [Parameter]  
    public string? cell{ get; set; }   
     
    [Parameter]  
    public EventCallback OnSquareChange { get; set; }  
  
    string inputContent;  
    string InputContent  
    {  
        get => inputContent;  
        set => inputContent = ProcessSquare(value);  
    }  
  
    string ProcessSquare(string str)  
    {  
  
        if (str.Length == 0) { return ""; }  
        char chBoxTest=char.ToUpper(str[0]);  
        if (!Char.IsLetter(chBoxTest)){ return ""; }  
        string strOutput = chBoxTest.ToString();  
        Square_Change(strOutput, cell);  
        StateHasChanged();  
        return strOutput;  
    }  
 }

And this is what's in the parent page:

@page "/first"  
@inject IJSRuntime JSRuntime  
  
Above  
  

  
  
@code {  
  
    [Parameter]  
    public int stupid{ get; set; }  
  
    public string strtest1 = "";  
    public string strtest2 = "ddd";  
  
    protected async Task Square_Change(string strSquareID, string strLetter)  
    {  
        strtest1 = strSquareID + "---" + strLetter;  
        strtest2 = "ffff";  
        Console.WriteLine(strtest1);  
        StateHasChanged();  
        stupid = 5;  
       return "A";  
    }   
}  
  
@strtest1
@strtest2

I have tried to search, but I'm not the best at searching. I expect this is a pretty simple thing that I just don't know yet.

Thanks in advance for your time!

Accepted Answer

a component can only change its own state. if a child wants to update a parent, the parent passes a delegate to the child that the child calls to update the parents state. you could also inject an apostate container. see this article:

https://chrissainty.com/3-ways-to-communicate-between-components-in-blazor/

Share via

Reload parent component after updating child in Blazor

0 additional answers

Your answer