CODEWITHSUNDEEP
c#blazorasp.net-core-3.1blazor-webassembly
meszyyy
meszyyy

Reputation: 17

How to use "context" in Blazor WASM component call

I'm trying to call a Blazor component in a Child page and use the "context" keyword as a parameter of an 'OnClick' method, directly in the call. The method should get the item details, if I click on a whole table row. The function works perfectly if I'm adding an extra button to call the method, but I would be more than happy if it would work with click on the whole row. Component should be stay reusable in other Child pages. Is there any chance to use context there, or have anybody some other ideas? I'm open for any new inputs ;)

Component:

@typeparam TItem

<div class="table-responsive-xs">
<table class="table expandtable stickyHeader">
    <thead>
        @Header
    </thead>
    <tbody>
        @{
            int index = 0;
        }
        @foreach (var item in Items ?? new List<TItem>())
        {
            
            <tr class="expandhead" data-toggle="collapse" data-target="#@index" @onclick="()=>select(item)">
                 @Body(item)
            </tr>
            <tr class="collapse" id="@index">
                 <td colspan="6">@Details(item)</td>
            </tr>
            index++;
        }
    </tbody>
</table>
</div>

@code {
    [Parameter]
    public IList<TItem> Items { get; set; }
    [Parameter]
    public RenderFragment Header { get; set; }
    [Parameter]
    public RenderFragment<TItem> Body { get; set; }
    [Parameter]
    public RenderFragment<TItem> Details { get; set; }
    [Parameter]
    public EventCallback<TItem> OnClick { get; set; }


    private async void select(TItem item)
    {
        await OnClick.InvokeAsync(item);
    }
}

Child:

<Component TItem=@(KeyValuePair<DistributionShipment, int>) Items="distributionShipmentsItemCount.ToList()" OnClick="()=>getShipment(context)"> //context not exists yet
        <Header>
        <tr>
            <th>Shipment-ID</th>
            <th style="color:gold;">DestinationBranch</th>
            <th style="color:dodgerblue;">ItemCount</th>
            <th style="color:forestgreen;">Status</th>
            <th></th>
        </tr>
        </Header>
        <Body >
        <td>
                @context.Key.ID.Convert("distributionShipment")
        </td>
        <td>
                @context.Key.DestinationBranch
        </td>
        <td>
                @context.Value
        </td>
        <td>
                @context.Key.State
        </td>
        <td>
            <button type="button" class="btn btn-info" @onclick="()=>getShipment(context.Key)">Details</button> //This way works fine
        </td>
        </Body>
        <Details>
            @if (detailShipment != null)
            {
                @if (context.Key.ID == detailShipment.ID)
                {
                    <DetailShipmentInfo shipment="@detailShipment"></DetailShipmentInfo>
                }
            }
        </Details>
    </Component>

@code{
    private DistributionShipment detailShipment = new DistributionShipment();
    
    private Dictionary<DistributionShipment, int> distributionShipmentsItemCount = new Dictionary<DistributionShipment, int>();

    private void getShipment(DistributionShipment distributionShipment)
    {
        detailShipment = distributionShipment;
        StateHasChanged();
    }
}

Upvotes: 0

Views: 1209

Answers (1)

Neil W
Neil W

Reputation: 9112

The OnClick event from your Component passes the Item as a parameter. You can use that instead of context.

<Component TItem=@(KeyValuePair<DistributionShipment, int>) 
           Items="distributionShipmentsItemCount.ToList()" 
           OnClick="(item) => getShipment(item)">

Upvotes: 1

Related Questions