Reputation: 11
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
Reputation: 30450
See these two StackOverflow Questions and my answers:
Blazor Child Component Rendering and Parameter Changes
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