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

Question

我想访问项。下面@code { }中的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

您似乎正在使用Input HTML元素，该元素默认为文本类型，并具有自动完成列表。最好使用SelectHTML元素。通过这种方式，您可以隐藏ID列并显示文本字段。示例选择：

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

这就是我最终使用的。

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

Answer 3

你做不到，看看这个答案https://stackoverflow.com/a/39338752/184405

例如，另一种选择是使用开源组件库MatBlazorhttps://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;
}