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("ichbbineindummy@geil.org");
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
