C# What is the simplest method to update a variable on the index page from a component?

[lingo57]

Hi

What is the simplest method to update a variable on the index page from a component in the Blazor server?

For instance, if you have an upload component and want it to change a boolean value on the index page.

Should I use state, props?

regards,

 

[simong1993]

Hi

What is the simplest method to update a variable on the index page from a component in the Blazor server?

For instance, if you have an upload component and want it to change a boolean value on the index page.

Should I use state, props?

regards,

Hey there!

In Blazor Server, the simplest way to update a variable on the index page from a component is to use EventCallback or shared state. Here's how you can approach it:

Using​

1. Define an EventCallback in your upload component.
2. Invoke the callback when you want to update the value.
3. Pass the callback from the index page and handle it there.

Example:

Index.razor

@page "/"
@code {
    private bool isUploaded;

    private void UpdateStatus(bool status)
    {
        isUploaded = status;
    }
}

<UploadComponent OnUploadComplete="UpdateStatus" />

UploadComponent.razor

@code {
    [Parameter]
    public EventCallback<bool> OnUploadComplete { get; set; }

    private async Task TriggerUpload()
    {
        // Do your upload logic here...
        await OnUploadComplete.InvokeAsync(true); // Set true or false based on your logic.
    }
}

Using Shared State​

If you have more complex state sharing needs, consider creating a service to manage shared state between components/pages. This is useful when multiple components need access.

Let me know if you'd like an example for that too! 😊

 

[lingo57]

I added this code to my index page:

[Parameter] public EventCallback<bool> isConverting { get; set; }
private void UpdateParent() { isConverting.InvokeAsync(false); }

The code for the upload page includes:

[Parameter]
public EventCallback<bool> isConverting { get; set; }

But when I want to use "isConverting " I see a red line .

 @if (isConverting )
 {
     <div class="progress mt-3">
         <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
     </div>
 }

I couldn't find a satisfactory answer from AI or other resources to solve the problem.
What is your idea?

regards,