无法理解这个blazor函数是如何工作的



所以我是C#的新手,这让我很困惑。我得到了一个.blazor类,其中包含我页面的HTML。它看起来是这样的。

@page "/stations"
<h3>Stations</h3>
<div class="md-form mt-0"><input class="form-control" id="search_bar" placeholder="Search..." @oninput="@SearchProducts"></div>
@*https://learn.microsoft.com/en-us/aspnet/core/blazor/data-binding?view=aspnetcore-3.1*@
@*https://scottsauber.com/2019/03/25/blazor-implementing-client-side-search-as-you-type-using-bind-value-oninput/*@
<i class="fas fa-edit" style="font-size:12px;"></i>
<i class="fa fa-car"></i>
@if (StationsList != null && FilteredStations != null)
{
<table width="100%">
<tr>
<th>ID</th>
<th>Station Name</th>
<th>Service Location Name</th>
</tr>
@foreach (var station in FilteredStations)
{

if (station != null)
{
<tr>
<td>@station.Id</td>
<td>@station.Name</td>
<td>@station.ServiceLocationName</td>
<td class="edit-svg-icon"></td>
<NavLink class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true" id="@station.Id" @onclick="@(async () => await DeleteProduct(station.Id))" style="cursor: pointer"></span> Edit @*FIX ME should link to edit product. Obviously...*@
</NavLink>
<NavLink class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true" id="@station.Id" @onclick="@(async () => await DeleteProduct(station.Id))" style="cursor: pointer"></span> Delete
</NavLink>
</tr>
}
}
</table>
}
else
{
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
}

然后我得到了.blazor.cs类,其中包含我在.blazor文件中使用的c#函数,它看起来是这样的。

namespace Aftermarket.Server.AdministrationService.Client.Pages.ProductsPages
{
public partial class ListStations
{
[Inject]
public IStationService StationService { get; set; }
public static string SearchString { get; set; } = "";
protected static IEnumerable<StationsVM> StationsList { get; set; }
public ElementReference Search_bar { get; set; }
public static List<StationsVM> FilteredStations { get; set; }
protected override async Task OnInitializedAsync()
{
StationsList = (await StationService.GetStations()).ToList();
FilteredStations = new List<StationsVM>(StationsList);
}
//What makes the list go back to normal when a search is done and u delete search word?
static public void SearchProducts(ChangeEventArgs eventArgs)
{
string search = eventArgs.Value.ToString();
Console.WriteLine(search);
if (!string.IsNullOrEmpty(search))
{
Console.WriteLine(search);
FilteredStations.Clear();
try
{
//Console.WriteLine(FilteredProductList + " FilteredProductList is initialized??");
foreach (var item in StationsList)
{
Console.WriteLine(item.ToString());
bool stationFound = false;
if (item.Name != null)
{
if (item.Name.ToLower().Contains(search.ToLower()))
{
stationFound = true;
}
}
if (item.ServiceLocationName != null && stationFound != true)
{
if (item.ServiceLocationName.ToLower().Contains(search.ToLower()))
{
stationFound = true;
}
}
if (stationFound != true && item.Id != null)
{
if (item.Id.ToString().ToLower().Contains(search.ToLower()))
{
stationFound = true;
}
}
if (stationFound)
{
FilteredStations.Add(item);
}
}
}
catch (Exception e)
{
Console.WriteLine(e.InnerException.Message + "   InnerException");
Console.WriteLine(e.ToString() + "    ToString");
Console.WriteLine(e.Message);
Console.WriteLine(e.Source);
throw;
}
}
}
public async Task<EventCallback> DeleteProduct(long id)
{
await StationService.DeleteStation(id.ToString());
StationsList = (await StationService.GetStations()).ToList();
FilteredStations = new List<StationsVM>(StationsList);
return new EventCallback();
}
}
}

当我加载我的页面(.blazor类(时,它会检查FilteredStations,因为它包含我的所有电台,所以它会列出我的所有车站。但是,当我进行搜索时,我们在.blazor.cs类中看到,它所做的第一件事就是清除FilteredStations列表。然后继续添加你搜索的内容。现在所有这些都很好,除非我在搜索后清除搜索栏,它会再次给我一个完整的电台列表。现在我明白了这是应该如何工作的,但如何??如果它在你进行搜索时清除了FilteredStations,并且再也没有重新填充它,那么在我清除搜索栏后,它如何从中读取并再次填充所有电台的页面??

我没有找到明显的原因。也许if子句正在检查一个空字符串,这可以使bool重新运行为true,并且它将被添加到最后的语句中。

我建议你用linq。它将使您的代码更干净,并且使用列表非常强大。

Var-filteredItens=itens.where(it=>it.name.contents(SearchTerm(.toList((;

我在用通用代码,因为我在用手机。

相关内容

  • 没有找到相关文章

最新更新