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

我想访问下面@code{}中的item.Id，同时将其隐藏在视图中。我不明白怎么做。请派人来帮忙

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

我不擅长HTML，所以也许有比使用datalist更好的方法

谢谢大家!

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

---

你做不到，看到这个答案了吗

另一种方法是使用开源组件库MatBlazor

---

您似乎正在使用输入HTML元素，该元素默认为键入文本，并带有自动完成列表。最好改用selecthtml元素。这样可以隐藏ID列并显示文本字段。示例选择：

- @如果是列表！=无效的 { @清单中的foreach var项 { @如果listings.Id==item.Id { @item.AddressName } 其他的 { @item.AddressName } } }

---

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

这就是我最终使用的

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

---

您的意思是没有在Html中显示id=@item.id吗？不要用它。您仍然可以在代码中使用ViewData.Id。我的意思是，我不希望该Id显示在选项中，以便用户看到它。他们不需要它。但我需要获取所选选项：s item.Id才能从数据库中获取整个对象。除非在浏览器中使用开发人员工具，否则用户不会看到Id属性。这就是您所关心的吗？我理解如何将item.id id获取到@code{}的唯一方法是将其显示在value中，并使用onchange从option元素获取value属性（如果有意义的话）。但是我不想把它放在value属性中，因为它会显示给用户，用户不需要知道数据库id来选择属性。但是您有value=@item.StreetAddress，而没有value=@item.id，那么如何访问item.id呢

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