Blazor组件动态:静态列表(组件为项)

作者:

Taurius Litvinavicius
更新日期:

2022年7月22日

看看在Blazor中创建一款战舰游戏需要多少代码。

组件

Blazor中的组件很棒，但重要的是要了解在何处和何时使用它们，这样您就不会使用它们过度使用他们。在本例中，您将看到如何将它们用作列表项，并且我们将此用例与前一篇文章中的用例进行比较。

示例非常简单，在本例中，我们有Blazor托管项目，我们为用户显示银行详细信息。

公共类TestModel｛公共intid {得到；集；｝公共字符串fullname {得到；集；｝公共int年龄{得到；集；｝｝

公共类SecondTestModel｛公共字符串bankaccountid {得到；集；｝公共字符串bankname {得到；集；｝公共字符串电子邮件{得到；集；｝公共intuserid {得到；集；｝｝

首先，我们有一些共享模型——一个用于用户详细信息，一个用于银行详细信息。

公共静态列表<共享。SecondTestModel> bankdetails＝新列表< Shared.SecondTestModel > ()｛新Shared.SecondTestModel ()｛用户id =1，bankaccountid =“xx1111”，bankname =“测试银行”，电子邮件=“ee@m.l”}，新Shared.SecondTestModel ()｛用户id =2，bankaccountid =“bb7777”，bankname =“测试银行”，电子邮件=“ll@m.l”}，新Shared.SecondTestModel ()｛用户id =3.，bankaccountid =“xx3333”，bankname =“测试银行”，电子邮件=“rr@m.l”}，新Shared.SecondTestModel ()｛用户id =4，bankaccountid =“xx2222”，bankname =“测试银行”，电子邮件=“uu@m.l”}，新Shared.SecondTestModel ()｛用户id =5，bankaccountid =“aa1111”，bankname =“测试银行”，电子邮件=“vv@m.l”}，}；公共静态列表<共享。TestModel>用户＝新列表< Shared.TestModel > ()｛新Shared.TestModel ()｛id =1，年龄=25，fullname =“测试试验机”}，新Shared.TestModel ()｛id =2，年龄=36，fullname =“测试仪先生”}，新Shared.TestModel ()｛id =3.，年龄=45，fullname =“夫人测试仪”}，新Shared.TestModel ()｛id =4，年龄=89，fullname =“先生测试”}，新Shared.TestModel ()｛id =5，年龄=72，fullname =“先生测试”}，}；

在API项目中，我们有一个名为FakeDatabase的类，它包含两个模型列表。这将是检索和显示的数据。

［路线(“/ getuser”）］公共<共享列表。TestModel>GetUsers()｛返回FakeDatabase.users;｝［路线(“/ getbankdetailsforusers”）］公共共享。SecondTestModelGetBankDetailsForUser（intid）｛返回FakeDatabase.bankdetails。Find(x => x.userid == id);｝

在控制器中，我们有两个路由——一个用于检索用户数据，另一个用于检索银行数据。通常，当您检索单独的数据块时，您希望为它们使用单独的路由、操作和过程。

客户端

客户端部分基本上包含了所有默认的东西，除了新的UserComponent。剃须刀文件。

@code {［参数］公共BlazorApp1.Shared。TestModel用户{得到；集；｝BlazorApp1.Shared。SecondTestModelbankdetails;受保护的覆盖异步任务OnParametersSetAsync（）｛bankdetails =等待http。GetJsonAsync< BlazorApp1.Shared.SecondTestModel > (“/ getbankdetailsforusers吗?id = "+ user.id);｝｝

模型的代码部分包含一个用于用户的参数，然后包含一个用于显示银行详细信息的变量。在生成列表时，用户详细说明了对组件的传递，稍后我们将对此进行讨论。但是，在组件中，我们检索银行详细信息。这种异步过程允许您在加载其他部分之前显示一些数据，如果加载时间较慢，甚至可以防止一些挫折。

@inject HttpClient<tr>@if (user != null)｛<道明>@user.id道明><道明>@user.age道明><道明>@user.fullname道明>｝@if(银行信息!= null)｛<道明>@bankdetails.bankaccountid道明><道明>@bankdetails.bankname道明><道明>@bankdetails.email道明>｝tr>

html是表的一部分，换句话说——组件是表的一行。

@code {< BlazorApp1.Shared列表。TestModel >用户;受保护的覆盖异步任务OnInitializedAsync（）｛用户=等待http。GetJsonAsync<列表< BlazorApp1.Shared.TestModel > > (“/ getuser”）;｝｝

对于主页面，我们只是有一个用户列表，然后在初始化时，我们只是检索数据并将其分配给该列表。

@page“/”@inject HttpClient<表风格=“text-align:中心;”>< thead >< < tr > < th >用户id / th > < th >年龄< / th > < th >全名< / th >银行账户< th > < / th > < th >银行名称< / th > < th >邮件< / th > < / tr >< / thead >tbody > <@if (users !=零）｛@foreach (var项在用户)｛< UserComponent用户=“@item”> < / UserComponent >｝｝tbody > < /表> < /

主页还包含表，其中有作为组件生成的行。

正如您所看到的，在这两个文件中有相当多的代码，如果它在一个文件中-将很难找到您需要的东西。此外，我们不能忘记这只是一个示例，现实世界的项目很可能包含比这多得多的代码。说了这么多，这个示例与您在前一篇文章中看到的示例之间的最大区别在于，我们在这里检索了两个数据，而在前一篇文章中，只有一个数据。这产生了巨大的差异，没有组件实现当然没有什么错。但是当你有选择二的时候，你应该抓住这个机会。另一个原因，如前所述，是加载时间。如果一个部分的检索时间比另一个要长，那么为用户提供一些提示总是更好的——这是第一个或多个数据。