Blazo WASM -分离成多个组件(MudBlazor)

Question

我有一个编辑表单，里面有多个mudtabpanel。问题是，我有很多属性为这个类，我们已经决定分成多个面板，每个包含一个编辑表单与不同的形式/输入。

格式有点像这样(pseudo-razor-code):

<MudTabs>
<MudTabPanel Text="Section 1">
<EditForm>
<MudItem>
<EditField Property1>
<EditField Property2>
...
<EditField Property 10>
</EditForm>
</MudTabPanel>
<MudTabPanel Text="Section 2">
<EditForm>
<MudItem>
<EditField Propertyn11>
<EditField Propertyn12>
...
<EditField Property 20>
</EditForm>
</MudTabPanel>
..... lots of other panels here
<MudTabPanel Text="Section N">
<EditForm>
<MudItem>
<EditField Property98>
<EditField Property99>
...
<EditField Property100>
</EditForm>
</MudTabPanel>
</MudTabs>

问题是:我有+1000行代码只是在这个剃刀页面!VS 2022预览正在努力给我一个体面的性能(在UI上似乎工作得很好)，但修改只是一个属性是一个痛苦的屁股VS.

我正在考虑将每个Panel移动到一个单独的组件中，并将我的实体作为参数传输。

但:1).现在，因为我将所有这些都使用到一个页面剃刀中，在代码页上，假设我有方法DoSomething()，我可以在每个面板上使用这个方法。我是否需要在每个组件上重复DoSomething()，如果我将它们分开?我能分享一下这个方法吗?你认为这会影响UI的性能吗?有没有更好的方法来做这件事?

LE:更新我的数据绑定示例

背后的代码:

private Article _article;

第一个选项卡中的一些绑定示例:

<MudNumericField T="int?" @bind-value="_article.ArticleID">
<MudSelect @bind-Value="_article.UnitPriceIntervals" OffsetY="true" Label="Unit Price Interval" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true">
@foreach (UnitPriceIntervals? item in (UnitPriceIntervals[])Enum.GetValues(typeof(UnitPriceIntervals)))
{
<MudSelectItem Value="item">@item</MudSelectItem>
}
</MudSelect>

现在，我的文章属性还可以包含对存储在不同SQL表中的其他数据类型的引用，并且可以根据搜索对它们进行更改。例子:

_article.GeneralText1 = 1234

Answer 1

为什么不用

@foreach (FieldAttributes fsa in cAtribs)
{
<MudTabPanel Text=@fsa.key>
<EditForm>
<MudItem>
@for(int i=0;i<fsa.Value.Count();i++)
{
<EditField @fsa.Value.ElementAt(i) />
}
</MudItem>
</EditForm>
</MudTabPanel>
}

循环，其中Dictionary<string, List<string>> cAtribs.

字典的键是"第1节"，…"部分N"集合有每个部分的属性名。

您可以提前构建cAtribs，或者动态构建，甚至使用反射。

Answer 2

这与其说是一个答案，不如说是一个注释，但是没有足够的空格来容纳它。

1. 跟踪你在哪个选项卡，只加载特定选项卡的编辑表单。这将大大减少需要一次渲染的内容。比如:

@if (tabNo = 2) 
{
// Edit Form 2
}

2. 你不显示你的数据绑定，但要确保你使用视图数据服务来保存你的模型数据。

3. 考虑在一个选项卡内为每个编辑表单使用一个组件吗?

多选项卡编辑器/向导有很多复杂的地方。你如何验证，何时验证?您是否后端有一个模型/数据表?

如果你想了解更多细节，请添加注释，我将在今天晚些时候尝试编写一些演示代码。

= = = = =更新首先将数据从编辑组件中取出并放入ViewService中。这是一个电线框架。

using System.Threading.Tasks;
namespace StackOverflow.Answers
{
public class ArticleViewService
{
//set up your data access
// load as Scoped Service - one per user session
public Article Article { get; private set; }
public Task GetArticle()
{
// Your get article code here
return Task.CompletedTask;
}
public Task SaveArticle()
{
// Your save article code here
return Task.CompletedTask;
}
}
}

接下来是区段编辑组件。您的数据来自注入视图服务，并直接更新到相同的服务中。组件之间不传递数据。

<h3>Section1</h3>
<EditForm EditContext="_editContext">
<InputText @bind-Value="ViewService.Article.Name"></InputText>
// or your mud editor components
.....
</EditForm>
@code {
[Inject] private ArticleViewService ViewService { get; set; }
private EditContext _editContext;
protected override Task OnInitializedAsync()
{
_editContext = new EditContext(ViewService.Article);
return base.OnInitializedAsync();
}
}

然后你的文章编辑器，与MudTabs。这将跟踪活动选项卡并只显示正确的部分组件。我还没有测试过这个，但它"应该"work(我不使用MudBlazor，也没有安装)

<MudTabs @bind-ActivePanelIndex="this.panelId">
<MudTabPanel Text="Item One" ID='"pn_one"'>
@if(this.PanelId = 1)
{
\ Section 1 componwnt
}
</MudTabPanel>
<MudTabPanel Text="Item Two" ID='"pn_two"'>
@if (this.PanelId = 2)
{
\ Section 2 componwnt
}
</MudTabPanel>
<MudTabPanel Text="Item Three" ID='"pn_three"'>
@if (this.PanelId = 2)
{
\ Section 3 componwnt
}
</MudTabPanel>
</MudTabs>
@code {
private int PanelId {
get => _panelId;
set => {
if (value != _panelId )
{
_panelId = value;
StateHasChanged();
}
}
}
private int _panelId = 1;
}