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
