I'm encountering an issue while attempting to utilize a reusable input component for creating a new user profile. When I try to create a new user, all the data entered into the reusable component appears empty. I suspect this is due to a problem with passing data from the child component to the parent. Interestingly, when I use the standard tag, everything works fine. Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thanks in advance!Main pageAddProfile.razor
<form> <div class="col-md-6"><Label LabelClass="small mb-1" LabelText="@Loc[nameof(ResourcesEnum.GeneralFirstName)]"/><Input InputPlaceholder="@Loc[nameof(ResourcesEnum.GeneralEnterFirstName)]" BindValue="@_contact.FirstName" InputClass="form-control" /></div> ...<div class="btn-wrapper"><Button BtnClass="btn btn-primary" IconClass="bi bi-plus-lg" OnClick="Submit" /><Button BtnClass="btn btn-danger" IconClass="bi bi-x-circle" OnClick="() => CancelModalWindow()" DataToggle="modal" DataTarget="#exampleModal"/></div></form>@code { private ContactDTO _contact = new ContactDTO(); private List<PartnerDTO>? _partners = new List<PartnerDTO>(); private bool _switchAddPartner = false; private ModalBootstrap? _modalComponent; private string? _returnUrl; private string _submitText = "Save contact"; private string _exam; protected override async Task OnInitializedAsync() { _partners = (await PartnerService.GetAllPartners())?.ToList(); var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri); if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("returnUrl", out var url)) { _returnUrl = url!; _submitText = "Save and return"; } } void HandleInputValueChanged(string value) { // Update the input value in the parent component _contact.FirstName = value; } private void HandleInputData(string inputValue) { _contact.FirstName = inputValue; Console.WriteLine($"it is value input: {_contact.FirstName}!!!!!"); } private void NavigateUrlContactsPage() { NavigationManager.NavigateTo("/contacts"); } private void Cancel() { if (!string.IsNullOrEmpty(_returnUrl)) { NavigationManager.NavigateTo(_returnUrl); } else { NavigateUrlContactsPage(); } } private async Task Submit() { Console.WriteLine($"Before Submit: {_contact.FirstName}"); try { var createdContact = await ContactService.CreateContactAsync(_contact); if (!string.IsNullOrEmpty(_returnUrl)) { Console.WriteLine(createdContact.FirstName); var returnUrlWithNewContact = $"{_returnUrl}?newContactId={createdContact.Id}"; NavigationManager.NavigateTo(returnUrlWithNewContact); } else { Console.WriteLine($"Error{_contact.FirstName}"); NavigateUrlContactsPage(); } Snackbar.Add($"\u2795 {_contact.FullName}", Severity.Success); } catch (Exception ex) { Snackbar.Add($"{@Loc[nameof(ResourcesEnum.GeneralError)]}: {ex.Message}", Severity.Error); } } private void CancelModalWindow() { _modalComponent.ShowModal($"{@Loc[nameof(ResourcesEnum.GeneralConfirmExit)]}", $"{@Loc[nameof(ResourcesEnum.GeneralConfirmExitQuestion)]}",()=>Cancel() ); }}
Input.razor (reusable component)
<input class="@InputClass" type="@InputType" placeholder="@InputPlaceholder" @bind="@BindValue"/>@code { [Parameter] public string InputType { get; set; } [Parameter] public string InputClass { get; set; } [Parameter] public string InputPlaceholder { get; set; } [Parameter] public string BindValue { get; set; }}