Blazor: how to hide object property from user but access it in code?

Question

I want to access item.Id in @code { } below (while keeping it hidden from view). I don't understand how. Please send help!

I want to avoid using JS as much as possible that is why I am using Blazor in the first place.

I am not great at HTML so maybe there is a better way then using datalist?

Thank you!

{
    <input list="listings" id="listing" name="listing" autocomplete="on" placeholder="Search address..." @oninput="HandleInput" @onchange="HandleDatalistOnChange" />
    <datalist id="listings">
        @foreach (var item in listings)
        {
            <option id="@item.Id" value="@item.StreetAddress">@item.Municipality, @item.County</option>
        }
    </datalist>
    <button @onclick="GetProperty">Get</button>
}

@code {
    private ViewData[] listings;
    private string selectedViewData;

    protected override async Task OnInitializedAsync()
    {
        listings = await Http.GetFromJsonAsync<ViewData[]>("https://localhost:44315/api/listings");
    }

    private void GetProperty()
    {
        //@TODO get property from db using id
        Console.WriteLine(selectedViewData);
    }

    private async void HandleInput(ChangeEventArgs e)
    {
        var input = e.Value.ToString();
        if (input.Length > 0)
        {
            listings = await Http.GetFromJsonAsync<ViewData[]>("https://localhost:44315/api/listings/" + input);
            StateHasChanged();
            await Task.Delay(1);
        }
    }

    private void HandleDatalistOnChange(ChangeEventArgs e)
    {
        selectedViewData = e.Value.ToString();
        Console.WriteLine(selectedViewData);
    }

    public class ViewData
    {
        public int Id { get; set; }
        public string StreetAddress { get; set; }
        public string Municipality { get; set; }
        public string County { get; set; }
    }
}

Answer 1

This is what I ended up using.

@page "/"

@inject HttpClient Http

<h1>Properties for sale</h1>

@if (listings == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <input list="listings" id="listing" name="listing" placeholder="Search address..." @oninput="HandleInput" @bind="selectedViewData" />
    <datalist id="listings">
        @foreach (var item in listings)
        {
            <option value="@item.location.address.streetAddress, @item.location.region.municipalityName, @item.location.region.countyName"/>
        }
    </datalist>
    <button @onclick="GetProperty">Get</button>
}

@code {
    [Parameter]
    public List<Listing> listings { get; set; }
    private string selectedViewData;

    protected override async Task OnInitializedAsync()
    {
        listings = await Http.GetFromJsonAsync<List<Listing>>("https://localhost:44315/api/listings");
    }

    private void GetProperty()
    {
        var listing = listings.Where(l => new String($"{l.location.address.streetAddress}, {l.location.region.municipalityName}, {l.location.region.countyName}").Equals(selectedViewData)).FirstOrDefault();
        Console.WriteLine(listing?.Id);
    }

    private async void HandleInput(ChangeEventArgs e)
    {
        var input = e.Value.ToString();
        if (listings.Any(l => new String($"{l.location.address.streetAddress}, {l.location.region.municipalityName}, {l.location.region.countyName}").Equals(input)))
        {
            return;
        }

        if (input.Length > 0)
        {
            listings = await Http.GetFromJsonAsync<List<Listing>>("https://localhost:44315/api/listings/" + input);
            StateHasChanged();
            await Task.Delay(1);
        }
    }
}