Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Why can I access the form input values in my parent component?

$
0
0

basically I have 2 blazor components , the child (NewChecklist.razor) is a form that takes input values as parameters that are passed in its parent component (ChecklistManagement.razor). I realized the values werent being recognized in the parent component because when I would try to submit a new Checklist , it was basically an empty list where all the values were missing. At this point I am simply trying to log the value of the first input to the console, and even that I am struggling with

Child Component (NewChecklist.razor) :

@using SFSCheckList.Data.Repos<h3>NewChecklist</h3><p>kahdjakhflkajfke</p><form @onsubmit="AddCheckList"><div><input @bind-value="Name" label="Title"  Style="width: 25rem"></input></div><div><FluentTextField @bind-Value="Description" label="Description"  Style="width: 25rem"></FluentTextField></div><p></p><div style="display: flex"><div style="display: flex; flex-direction: column;"><label>Start Date</label><FluentDatePicker Value="@(StartDate)" ValueChanged="@(e => StartDate = e.Value)"  /></div><div style="display: flex; flex-direction: column;"><label>End Date</label><FluentDatePicker Value="@EndDate" ValueChanged="@(e => EndDate = e.Value)"  Style="margin-left: 5px;" /></div></div><button>Submit</button></form>@code {    [Inject]    protected ChecklistRepo? checklistRepo { get; set; }    [Parameter]    public string Name { get; set; } = string.Empty;    [Parameter]    public string Description { get; set; } = string.Empty;    [Parameter]    public DateTime StartDate { get; set; } = DateTime.Now;    [Parameter]    public DateTime EndDate { get; set; } = DateTime.Now;    [Parameter]    public EventCallback AddCheckList { get; set; }    // private async Task SubmitChecklist()    // {    //     Console.WriteLine(Name);    //     Console.WriteLine(Description);    //     // You can perform further operations like adding the checklist to the database here    //     await AddCheckList.InvokeAsync();    // }}

Parent Component (ChecklistManagement.razor) :

@page "/ManageChecklists"@using SFSCheckList.Data.Repos@using SFSCheckList.Components.Checklists<h3>Checklist Management</h3><div style="display: flex;"><div style="border: 1px solid black; border-radius: 5px; padding: 1rem; background: #F1F3F9; min-height: 30rem; min-width: 25rem;"><CheckListList Checklists="@Checklists" OnChecklistSelected="HandleChecklistSelected" isAddingEnabled="isAddingEnabled" EnableAddChecklist="EnableAddChecklist"/></div><div style="margin-left: 3rem;border: 1px solid black; border-radius: 5px; padding: 1rem; background: #F1F3F9; min-height: 30rem; min-width: 25rem;">        @if (isAddingEnabled)        {<NewChecklist Name="@ChecklistName" Description="@ChecklistDescription" StartDate="@AvailableStartDate" EndDate="@AvailableEndDate" AddCheckList="SubmitChecklist"/>        }        else        {<ChecklistDetails Checklist="SelectedChecklist" EnableEditChecklist="EnableEditChecklist" isEditingEnabled="isEditingEnabled" />        }</div></div>@code {    [Inject]    protected ChecklistRepo? checklistRepo { get; set; }    public bool isAddingEnabled { get; set; } = false;    public bool isEditingEnabled { get; set; } = false;    public string ChecklistName { get; set; } = string.Empty;    public string ChecklistDescription { get; set; } = string.Empty;    public DateTime AvailableStartDate { get; set; } = DateTime.Now;    public DateTime AvailableEndDate { get; set; } = DateTime.Now;    public SFSCheckList.Data.Models.Checklist? SelectedChecklist { get; set; }    List<SFSCheckList.Data.Models.Checklist> Checklists = new List<SFSCheckList.Data.Models.Checklist>();    //enable edit functionality    public void EnableEditChecklist()    {        Console.WriteLine("Edit Checklist");        isEditingEnabled = !isEditingEnabled;    }    public void EnableAddChecklist()    {        Console.WriteLine("Adding Checklist");        isAddingEnabled = !isAddingEnabled;    }    // method to submit checklist    async Task SubmitChecklist()    {        // var newChecklist = new SFSCheckList.Data.Models.Checklist()        //     {        //         ChecklistName = ChecklistName,        //         ChecklistDescription = ChecklistDescription,        //         AvailableStartDate = AvailableStartDate,        //         AvailableEndDate = AvailableEndDate,        //         FY = "2024",        //         LCTS = DateTime.Now        //     };        // await checklistRepo.UpsertChecklist(newChecklist);        // Checklists.Add(newChecklist);        // StateHasChanged();        Console.WriteLine("the Checklist name is " + ChecklistName);    }    // method to get checklists    async Task GetChecklists()    {        Checklists = await checklistRepo.GetChecklists();        var checklists = await checklistRepo.GetChecklists();        foreach (var checklist in checklists)        {            Console.WriteLine(checklist.ChecklistName);        }    }    protected override async Task OnInitializedAsync()    {             await base.OnInitializedAsync();       await GetChecklists();    }    // method to handle checklist selected    private void HandleChecklistSelected(SFSCheckList.Data.Models.Checklist checklist)    {        SelectedChecklist = checklist;        Console.WriteLine($"Checklist Selected:");        Console.WriteLine($"Name: {checklist.ChecklistName}");        StateHasChanged();    }}

i have tried to access those values in many failed attempts , the ultimate goal is to be able to get all the values from the form (ChecklistName, ChecklistDescription etc) and successfully create a new checklist, as of right now though , im just trying to access the values in a console.writeline statement to make sure its working


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>