How can I use the same data from my list inside my function?

Question

<TelerikListView Data=@ListViewData2
                 Pageable="true"
                 PageSize="5">
    <HeaderTemplate>
         Current Scheduled Deliveries (@DateTime.Now.ToString("M/d/yyyy"))
    </HeaderTemplate>
    <Template>
        <div class="k-card k-card-horizontal">
            <div class="k-vbox k-flex-grow">
                <div class="k-card-body">
                    <h4 class="k-card-title">@context.Title</h4>
                    <h5 class="k-card-subtitle">@context.Description</h5>
                    @*<div class="card-date">@context.Date.ToString("MMM dd yyyy")</div>*@
                </div>
                <br />
         
                <div class="k-card-actions k-card-actions-horizontal k-card-actions-start">
                    <ListViewCommandButton OnClick="@StartDelivery()">Start Delivery</ListViewCommandButton>
                  
                    
                </div>
       
            </div>
            @*<img class="k-card-image" src="images/articles/@context.ImageUrl" alt="@context.Subtitle" @*/>*@
        </div> 
    </Template>
</TelerikListView>

@code {
public static DateTime Now { get; }

    List<ListData> ListViewData2 = new List<ListData>()
    {

        new ListData
        {
            Title = "Delivery: Alpha High School",
            Description =  "3097 Sandy Ct, Atlanta, GA",
        },

         new ListData
        {
            Title = "Delivery: Roosevelt Elementary School",
            Description = "555 Teddy St, Conyers, GA",
        },

        new ListData
        {
            Title = "Delivery: St John Middle School",
            Description = "203 Holy Dr, Morrow, GA",
        }
    };


    async Task StartDelivery()
    {

        var addy = new ListData();

        addy.Description = "3097 Sandy Ct, Atlanta, GA";
        var current = "Current Location";
       
        var url = string.Format("http://maps.google.com/maps?f=d&source=s_d&saddr={0}&daddr={1}", current, addy.Description);
        //NavManager.NavigateTo(url);

        await JSRuntime.InvokeAsync<object>("open", url, "_blank");
        //return addy;

    }


    public class ListData
    {
        public string Title { get; set; } = null!;
        public string Description { get; set; } = null!;

    }
}

On the the browser, the list ListViewData2 displays as a row of three different titles with three different descriptions (addresses), and three different buttons to start directions in google maps.

Pic of browser list (with the first item excluded since I used a real address there and didn't want to change it in my code)

In the StartDelivery() function, I had to manually assign an address from the list to addy.Description for my google maps url, but is there a way to like reference Description so that it automatically knows the right address for each of the three in the list? For example, if I don't hard code in the address, addy.Description remains blank and doesn't read the address for each school from the list. If I do, all start delivery buttons will link to that same address. :(

I probably worded it terribly, but this question seems like it has a very simple answer, and I can't seem to figure it out. Also I'm relatively new to C# and blazor and coding outside of school in general.

Answer 1

Like @keithwill-the-upvoter said, you can pass a ListData parameter to the StartDelivery method.

async Task StartDelivery(ListData addy)
{
    var current = "Current Location";
   
    var url = string.Format("http://maps.google.com/maps?f=d&source=s_d&saddr={0}&daddr={1}", current, addy.Description);
    //NavManager.NavigateTo(url);

    await JSRuntime.InvokeAsync<object>("open", url, "_blank");
    //return addy;

}

Then bind the button click event like this:

@foreach (var data in ListViewData2)
{
    @* omitted code *@

    <button @onclick="() => StartDelivery(data)">Start Delivery</button>

    @* omitted code *@
}