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

问题描述

所以我是 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://docs.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 并且不再重新填充它，那么它如何从它读取并在我清除搜索栏后再次使用所有站填充页面？

标签： c#blazor

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

问题描述

解决方案

推荐阅读