Blazor：如何向用户隐藏对象属性但在代码中访问它？

Question

我想访问下面 @code { } 中的 item.Id（同时将其隐藏起来）。我不明白怎么办。请发送帮助！

我想尽可能避免使用 JS，这就是我首先使用 Blazor 的原因。

我不擅长 HTML 所以也许有比使用数据列表更好的方法？

谢谢！

{
    <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

你做不到，看这个答案

另一种方法是使用开源组件库 MatBlazor https://www.matblazor.com/Select

<MatSelect Label="Pick a Food Group" @bind-Value="value1">
        <MatOptionString ></MatOptionString>
        <MatOptionString Value="grains">Bread, Cereal, Rice, and Pasta</MatOptionString>
        <MatOptionString Value="vegetables">Vegetables</MatOptionString>
        <MatOptionString Value="fruit">Fruit</MatOptionString>
    </MatSelect>

    <span>@value1</span>

    @code
    {
        string value1;
    }

Answer 2

您似乎在使用 Input HTML 元素，该元素默认键入文本，并带有自动完成列表。最好改用 Select HTML 元素。这样您就可以隐藏 ID 列并显示文本字段。例子 Select:

    <select @bind="@listings.Id">
        <option value="">-</option>
        @if (listings != null)
        {
            @foreach (var item in listings)
            {
                @if (listings.Id == item.Id)
                {
                    <option selected value="@item.Id.ToString()">@item.AddressName</option>
                }
                else
                {
                    <option value="@item.Id.ToString()">@item.AddressName</option>
                }
            }
        }
    </select>

使用文本输入的问题是用户可以输入任何内容，它不一定存在于数据库中。因此无法获得ID。

Answer 3

这就是我最终使用的。

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

Blazor：如何向用户隐藏对象属性但在代码中访问它？

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

blazor

blazor-webassembly

Blazor：如何向用户隐藏对象 属性 但在代码中访问它？

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

blazor

blazor-webassembly

Blazor：如何向用户隐藏对象属性但在代码中访问它？