Passing data to a modal in Blazor - html

Question

Is there some way to transfer multiple data from one page to a modal using Razor syntax? Example I have a table with several columns and rows. In one of the columns there is a button that you can use to edit the data. I want the data from this line to be transfered over into the modal so that I can edit it.

Answer 1

One possibility is to do everything in a single page: the grid and the dialog. (This dialog is certainly a div).
#page "/{Langue}/OrderList"
<div class="content">
<div class="container">
<Components.Grid
Id="grid-order-list"
ListViewRecords = "new List<int> { 20, 50, 100 }"/>
</div>
</div>
#if (LineDetails != null)
{
<!-- Modal Large -->
<div class="modal fade" id="large-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h6 class="modal-title">#ModalTitle</h6>
</div>
<div class="modal-body text-center">
<div class="modal-body-inside" style="height: 85vh; overflow-y: auto; padding: 60px 50px 70px;">
<UserControls.LineDetail Source="LineDetails " />
</div>
</div>
</div>
</div>
</div>
<!-- /.modal -->
}
#code {
private MyNameSpace.LineDetailsClass LineDetails;
}
As you can see, as long as LineDetails is null, the user see only the table. When clicking on the details button, you have to populate LineDetails. So the modal will be shown. LineDetails should be binded to somme textboxes, ... When the user clicks on a button in the modal, you get the needed info in LineDetails and you reset it to null.

Answer 2

Suppose that your class name is Person, It is your Button code :
foreach(var item in Items)
{
...
<td><button type="button" #onclick="#Update(item)">Edit</button></td>
...
}
Now we have a model for the Selected Item like this :
#code{
Person SelectedItem {get;set;}
void Update(Person selectedItem)
{
SelectedItem = selectedItem;
}
Now you can access you SelectedItem everywhere include modals.

Answer 3

Guy, Henk and Ali all have the right idea. I'd like to add, though, that you can add #onclick to almost ANYTHING-- a div, a table row, etc.
The general pattern is to have a List<SomeClass> AllItems, then a single SomeClass SelectedItem, then a null check.
YourModalControl.razor
<div>Show something from SelectedItem: #SelectedItem.DisplayString</div>
<button #onclick="CloseMe">Close</button>
#code{
[Parameter]
public SomeClass SelectedItem {get; set;}
[Parameter]
public EventCallback<SomeClass> SelectedItemChanged{get; set;}
async Task CloseMe(){
SelectedItem = null;
SelectedItemChanged.InvokeAsync(SelectedItem);
}
}
ConsumingPage.razor
#if (SelectedItem is not null){
<YourModalDisplayControl #bind-SelectedItem="SelectedItem" />
}
#else foreach (var item in AllItems){
<div #onclick="()=> SelectedItem = item">#item.DisplayString</div>
}
#code {
List <SomeClass> AllItems {get; set;}
SomeClass SelectedItem {get; set;}
}