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

Pass parameters to modal popup

$
0
0

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));}}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



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