I would like to know if we can pass id and class of button as parameters to modal, so that I could display dynamic data in my modal page.
Navbar.razor:
<li><button class ="firstButtonDialog" id="mm" @onclick="() => _modal.Open()">mm</button></li><li><button class ="secondButtonDialog" id="cm" @onclick="() => _modal.Open()">cm</button</li><li><button class ="thirdButtonDialog" id="meter" @onclick="() =>_modal.Open()">meter</button></li>meter</button></li>private Modal _modal { get; set; }public string _min { get; set; }public string _max { get; set; }private void OnModalMin(string min){ _min = min; }private void OnModalMax(string max){ _max = max;}'Title' and 'Measurement' need to be dynamic in modal page. I would like to use passed parameters to display dynamic data here.
Modal.razor:
<h5 class="modal-title">firstButtonDialog</h5> //title need to be dynamic based on button clicked<div class="modal-body"><label for="Min">Enter Min</label><input @bind="min" type="text" id="Min" name="Min">[mm]<br> // [mm] measurement need to be dynamic based on button clicked<label for="Max">Enter Max:</label><input @bind="max" type="text" id="Max" name="Max">[mm]<br></div><div class="modal-footer"><button type="button" class="btn btn-primary" @onclick="() => Done()">Done</button> </div>@code {private string min;private string max;public Guid Guid = Guid.NewGuid();public string ModalDisplay = "none;";public string ModalClass = "";[Parameter] public EventCallback<string> OnDoneCallback1 { get; set; }[Parameter] public EventCallback<string> OnDoneCallback2 { get; set; }public void Open(){ ModalDisplay = "block;"; ModalClass = "Show"; ShowBackdrop = true; StateHasChanged();}public void Close(){ ModalDisplay = "none"; ModalClass = ""; ShowBackdrop = false; StateHasChanged();}public async Task Done(){ await InvokeAsync(() => OnDoneCallback1.InvokeAsync(min)); await InvokeAsync(() => OnDoneCallback2.InvokeAsync(max));}}