Tom Brady
Tom Brady

Reputation: 11

Passing Objects between different Razor Pages in Blazor

I'm new to blazor and working on an adress Manager. Here I have a .razor page, where the user can create a new contact.

Now, to add the contact to the list of contacts (in my MainLayout.razor file), I eather need to pass the new contact to the MainLayout.razor file, or the list of contacts to my other .razor page. Any Ideas or suggestions on how i can pass objects between .razor pages?

Here is my code:

My MainLayout, which has the Manager Controller Object, which has the contact list i need to acces.

@inherits LayoutComponentBase
@inject NavigationManager NavigationManager
@using BlazorAdressManager.Shared.Controller
@using BlazorAdressManager.Shared.Model

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>


<MudLayout>
    <MudMainContent>

        <div class="master-view-container column">
            <IgbNavbar class="navbar" master-view-scope></IgbNavbar>
            <div class="contact-pane row">
                <div class="list-pane column">
                    <p class="typography__body-1 contact-number-label">9 Kontakte</p>
                    <IgbList class="contact-list" master-view-scope>

                        @foreach (var contact in contactList){
                            <IgbListItem @onclick="@(e => Navigate("/detail-view"))" class="list-item" master-view-scope>
                                <div slot="start">
                                    <IgbAvatar Initials="LS" Shape="AvatarShape.Circle" class="avatar" master-view-scope></IgbAvatar>
                                </div>
                                <div slot="title">@contact.getName()</div>
                                <div slot="subtitle">@contact.getMail()</div>
                                <div slot="end">
                                    <span class="material-icons icon">delete</span>
                                </div>
                            </IgbListItem>
                        }
                    </IgbList>
                </div>
                <div class="view-container">
                    @Body
                </div>
            </div>
        </div>

        </MudMainContent>
</MudLayout>

@code {
    private ManagerController mc;
    private Manager manager;
    private ContactController cc;
    private List<Contact> contactList;

    private void Navigate(string path)
    {
        NavigationManager.NavigateTo(path);  
    }   

    protected override void OnInitialized()
    {
        mc = new ManagerController();
        manager = mc.getManager();
        cc = mc.getContactController();
        contactList = manager.getContactList();

        Contact dummy = new Contact();
        dummy.setName("dummy");
        dummy.setMail("[email protected]");
        cc.addContact(dummy);
    }
}

And here is my AddView.Razor file: Here, i create a new contact. So I eather need this specific contact object in my MainLayout.razor file, or the Specific ManagerController object in my AddView.razor file.

@page "/add-view"
@inject NavigationManager NavigationManager
@using BlazorAdressManager.Shared.Controller
@using BlazorAdressManager.Shared.Model

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<div class="add-view-container row">
    <div class="edit-contact-pain column">
        <h5 class="element">Kontakt bearbeiten</h5>
        <div class="group_3 row">
            <p class="typography__body-1 text_1">Name:</p>
                <MudTextField @bind-Value="nameValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
            <p class="typography__body-1 element">*</p>
        </div>
        <div>
            Hello my name is @nameValue
        </div>
        <div class="gender-pain row">
            <p class="typography__body-1 gender-text">Geschlecht:</p>
            <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal" class="gender-radio-buttons" add-view-scope>
                <IgbRadio LabelPosition="RadioLabelPosition.Before" class="radio" add-view-scope>Männlich</IgbRadio>
                <IgbRadio LabelPosition="RadioLabelPosition.Before" class="radio" add-view-scope>Weiblich</IgbRadio>
                <IgbRadio LabelPosition="RadioLabelPosition.Before" class="radio" add-view-scope>Divers</IgbRadio>
            </IgbRadioGroup>
        </div>
        <div class="group_3 row">
            <p class="typography__body-1 text_1">Adresse:</p>
            <MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
        </div>
        <div class="email-pane row">
            <p class="typography__body-1 text_1">E-Mail:</p>
            <MudTextField @bind-Value="mailValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
            <p class="typography__body-1 element">*</p>
            <p class="typography__body-1 error-text">Diese E-Mail ist bereits vergeben, bitte wählen Sie eine andere E-Mail Adresse</p>
        </div>
        <div class="group_3 row">
            <p class="typography__body-1 text_1">Telefonnummer:</p>
            <MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
        </div>
        <div class="group_3 row">
            <p class="typography__body-1 birthday-text">Geburtsdatum:</p>
            <IgbDatePicker class="birthday-picker" add-view-scope></IgbDatePicker>
        </div>
        <div class="group row">
            <p class="typography__body-1 text">*Pflichfelder</p>
        </div>
        <div class="group_3 row">
            <IgbButton Variant="ButtonVariant.Outlined" class="button" @onclick="@createContact" add-view-scope>
                Kontakt hinzufügen
                <IgbRipple></IgbRipple>
            </IgbButton>
            <div class="group_2 row"></div>
            <IgbButton Variant="ButtonVariant.Outlined" @onclick="@(e => Navigate("/"))" class="button" add-view-scope>
                Zurück
                <IgbRipple></IgbRipple>
            </IgbButton>
        </div>
        <div class="group_1 row"></div>
        <div class="group_3 row">
            <p class="typography__body-1 confirm-text">Ein Kontakt mit diesem Namen existiert bereits. Sind Sie sich sicher das Sie diesen Kontakt hinzufügen möchten?</p>
            <IgbButton Variant="ButtonVariant.Outlined" @onclick="@(e => Navigate("/"))" class="button" add-view-scope>
                Bestätigen
                <IgbRipple></IgbRipple>
            </IgbButton>
        </div>
    </div>
</div>

@code {
    private string nameValue = string.Empty;
    private string mailValue = string.Empty;
    private string TextValue = string.Empty;

    [Parameter] public EventCallback<Contact> DeliverContact { get; set; }

    private List<Contact> contactList;
    
    private void Navigate(string path)
    {
        NavigationManager.NavigateTo(path);
    }

    protected override void OnInitialized()
    {
        
    }

    private void createContact(){
        Contact newContact = new Contact();
        newContact.setName(nameValue);
        newContact.setMail(mailValue);
    } 
    
}

Thanks a lot <3

Leon

Upvotes: 1

Views: 1243

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30450

See these two StackOverflow Questions and my answers:

How can I trigger/refresh my main .RAZOR page from all of its sub-components within that main .RAZOR page when an API call is complete?

Blazor Child Component Rendering and Parameter Changes

Update based on new information in the question

Almost everything in the Blazor UI is a component. In your case AddView is a sub-component of MainLayout.

You need a Service that manages and holds the contacts. AddView adds contacts through the service. MainLayout registers an handler with the Service Change event. When a new contact is added the Change event is fired in the Service. The MainLayout event handler gets called which triggers an update in MainLayout to update the contact display.

The two answers referred to above show you how to build the Service infrastructure.

Upvotes: 2

Related Questions