Pfthb

So I want to call the OpenModal() method in the child component (TimeEntryForm). I would think I need to access the instance of TimeEntryForm component, but I don't know how to create a named instance of TimeEntryForm.

Any help would be appreciated.

Parent Component

<button type="button" onclick="@TimeEntryForm.OpenModal()" class="btn btn-info btn-lg">
 <span class="glyphicon glyphicon-plus"></span> Add
</>

<TimeEntryForm></TimeEntryForm>

TimeEntry Child Component

@using Chopper.Shared
@using DatabaseModel.Models
@page "/timeentryform"
@inject HttpClient HTTP
@inherits TimeEntryFormModel

@if (IsOpened)

 <div class="modal" role="dialog" tabindex="-1" style="display: block;">
 <div class="modal-dialog modal-dialog-centered" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">Add a Time Entry</h5>
 </div>
 <div class="modal-body">

 <form>
 <div class="form-group">
 <label for="Job" class="col-form-label">Job:</label>
 <input type="text" class="form-control" />
 </div>
 <div class="form-group">
 <label for="Employee" class="col-form-label">Employee:</label>
 <input class="form-control" type="text" />
 </div>
 <div class="form-group">
 <label for="Hours" class="col-form-label">Hours:</label>
 <input class="form-control" type="text" />
 </div>
 </form>

 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-primary" onclickAsync="@OnAddTimeEntry()">Add Entry</button>
 <button type="button" class="btn btn-primary" onclick="@CloseModal">Close</button>
 </div>
 </div>
 </div>
 </div>
 <div class="modal-backdrop show"></div>

Time Entry Child Component code behind view model

using Chopper.Client.TimeEntries.Services;
using DatabaseModel.Models;
using Microsoft.AspNetCore.Blazor.Components;
using System.Threading.Tasks;

namespace Chopper.Client.TimeEntries

 public class TimeEntryFormModel : BlazorComponent
 
 protected TimeEntry TimeEntry = new TimeEntry();

 [Inject]
 private TimeEntriesServices _client get; set; 

 protected bool IsOpened get; set; 

 public void OpenModal()
 
 IsOpened = true;
 StateHasChanged();
 

 //[Parameter]
 protected void CloseModal()
 
 IsOpened = false;
 StateHasChanged();
 

 protected async Task OnAddTimeEntry()
 

 if (TimeEntry.Job != null && TimeEntry.Category != null && TimeEntry.TimeSpentHours > 0 && TimeEntry.Employee != null)
 
 await _client.CreateTimeEntry(TimeEntry);
 await OnInitAsync();
 StateHasChanged();
 //return true;
 
 //return false;
 

 

So I needed to add a protected member in the parent component model of protected TimeEntryForm timeEntryForm = new TimeEntryForm();

and then do a reference to it in the view as <TimeEntryForm ref="timeEntryForm"></TimeEntryForm>

Parent Component

<button type="button" onclick="@timeEntryForm.OpenModal()" class="btn btn-info btn-lg">
 <span class="glyphicon glyphicon-plus"></span> Add
</>

<TimeEntryForm ref="timeEntryForm"></TimeEntryForm>

Parent Component code behind model/viewmodel

public class TimeEntriesGridModel : BlazorComponent

 [Inject]
 private TimeEntriesServices _client get; set; 

 protected TimeEntryForm timeEntryForm; // = new TimeEntryForm(); //Per Kirk Woll's suggestion

 protected List<TimeEntry> Model get; set; 

 protected override async Task OnInitAsync()
 
 Model = await _client.GetAllTimeEntries();
 

TimeEntry Child Component

@using Chopper.Shared
@using DatabaseModel.Models
@page "/timeentryform"
@inject HttpClient HTTP
@inherits TimeEntryFormModel

@if (IsOpened)

 <div class="modal" role="dialog" tabindex="-1" style="display: block;">
 <div class="modal-dialog modal-dialog-centered" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">Add a Time Entry</h5>
 </div>
 <div class="modal-body">

 <form>
 <div class="form-group">
 <label for="Job" class="col-form-label">Job:</label>
 <input type="text" class="form-control" />
 </div>
 <div class="form-group">
 <label for="Employee" class="col-form-label">Employee:</label>
 <input class="form-control" type="text" />
 </div>
 <div class="form-group">
 <label for="Hours" class="col-form-label">Hours:</label>
 <input class="form-control" type="text" />
 </div>
 </form>

 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-primary" onclickAsync="@OnAddTimeEntry()">Add Entry</button>
 <button type="button" class="btn btn-primary" onclick="@CloseModal">Close</button>
 </div>
 </div>
 </div>
 </div>
 <div class="modal-backdrop show"></div>

Time Entry Child Component code behind view model

using Chopper.Client.TimeEntries.Services;
using DatabaseModel.Models;
using Microsoft.AspNetCore.Blazor.Components;
using System.Threading.Tasks;

namespace Chopper.Client.TimeEntries

 public class TimeEntryFormModel : BlazorComponent
 
 protected TimeEntry TimeEntry = new TimeEntry();

 [Inject]
 private TimeEntriesServices _client get; set; 

 protected bool IsOpened get; set; 

 public void OpenModal()
 
 IsOpened = true;
 StateHasChanged();
 

 //[Parameter]
 protected void CloseModal()
 
 IsOpened = false;
 StateHasChanged();
 

 protected async Task OnAddTimeEntry()
 

 if (TimeEntry.Job != null && TimeEntry.Category != null && TimeEntry.TimeSpentHours > 0 && TimeEntry.Employee != null)
 
 await _client.CreateTimeEntry(TimeEntry);
 await OnInitAsync();
 StateHasChanged();
 //return true;
 
 //return false;
 

 

EIA:

Removed code behind initialization for timeEntryForm per Kirk Woll's suggestion.

Comrade,
Please, follow these steps:
1. Define in the Parent Component an event delegate whose object is to tell the child
component to open the modal window:

public event Action OnOpenModal;

2. Define in the Parent Component a method that invokes the event delegate

private void OpenMe() => OnOpenModal?.Invoke();

3. This method is called when the user click the button defined in the Parent Component:
Note: Do not use parentheses after OpenMe

<button type="button" onclick="@OpenMe" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-plus"></span> Add
</>

4. Add a property MyModal to the Child Component element with the value of the event delegate

<TimeEntryForm MyModal = "@OnOpenModal"></TimeEntryForm>


 Define a property of Action delegate to store the event delegate passed to the Child Component




[Parameter] protected Action MyModal get; set; 


 protected override void OnInit()
 
 // Attach the OpenModal method defined in the Child // Component to the delegate
 MyModal += OpenModal;
 

 Now, whenever the user hit the button the OpenModal is called and the modal window 
 is displayed. 

public void OpenModal()


 
 IsOpened = true;
 StateHasChanged();