CODEWITHSUNDEEP
c#blazorparameter-passingblazor-component
ExecChef
ExecChef

Reputation: 449

Simple Parameter Passing in Blazor (Previously TempData)

I am very new to Blazor (coming from a medium level of asp.net experience).

Previously, I used ViewBag & TempData to pass variables from one component to another, quite effectively and easily. This is not available in Blazor and I am struggling to understand how to pass a variable to another component. I have, indeed, read many posts and online resources, but they don't seem to make sense to me, for what I am trying to do.

I tried to make a very simple example of what I am trying to accomplish:

When the NewEntry.razor page loads, I need to create a new GUID for the new record entry that stuff will create (newID).

[Parameter]
public Guid NewRecord {get; set;} = Guid.NewGuid();
private Guid newID = Guid.Empty;
AddCarDialog addCarDialog; 


protected override OnInitialized()
{
newID = NewRecord;
base.OnInitialized();
}

Now, when I place '@newID' anywhere on the NewEntry.razor page, it shows the new GUID correctly.

I need to pass @newID to the AddCarDialog page in the shared folder. After spending more than a day on this, I am asking for help.

This is where I am at in my Showpopup code on the NewEntry.razor.cs page, that opens AddCarDialog.

protected void Showpopup()
{
addCarDialog.carPK = newID;
addCarDialog.ShowDialog = true;
}

Code for AddCarDialog.razor.cs

[Parameter]
public Guid carPk {get; set} = new

Code to display on AddCarDialog.razor

@carPk

EDIT/Update:

I am now using Dimitri's example, below and not receiving any errors. However, I've noticed another issue.

When NewEntry.razor loads, AddCarDialog.razor loads twice! I set a break point in OnInitialized, to see what is happening. Here is what I know:

NewEntry.razor loads. Before fully loading, AddCarDialog loads once, and carPK is correct. Then, for some odd reason, AddCarDialog loads a second time and carPK is empty.

I need to figure out why it's loading twice here and how to stop it.

Upvotes: 0

Views: 1656

Answers (1)

Dimitris Maragkos
Dimitris Maragkos

Reputation: 11392

You should not instantiate Blazor components manually and pass parameters to them from code. The following is wrong:

AddCarDialog addCarDialog = new();
addCarDialog.CarPk = newID;

instead you should use the component like this:

NewEntry.razor:

...

<AddCarDialog CarPk="@newID" @bind-Visible="isDialogVisible" />

@code {
    [Parameter]
    public Guid NewRecord { get; set; } = Guid.NewGuid();

    private Guid newID = Guid.Empty;

    private bool isDialogVisible = false;

    protected override void OnInitialized()
    {
        newID = NewRecord;
        base.OnInitialized();
    }

    private void ShowDialog()
    {
        isDialogVisible = true;
    }
}

And AddCarDialog.razor:

@if (Visible)
{
    @*dialog implementation*@
    <button @onclick="Close">Close dialog</button>
}

@code {
    [Parameter]
    public Guid CarPk { get; set; }

    [Parameter]
    public bool Visible { get; set; }

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

    private async Task Close()
    {
        await VisibleChanged.InvokeAsync(false);
    }
}

Upvotes: 1

Related Questions