Blazo WASM - Separate into multiple components (MudBlazor)-CodePudding

Hello, I have an edit form, with multiple MudTabPanels inside. Problem is, I have LOTS of properties for this class, and we've decided to split into multiple panels, that each contain an edit form with different forms/inputs.

Format is somewhat like this (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>

Problem is : I have 1000 lines of code just in this razor page! VS 2022 Preview is struggling to give me a decent performance (on the UI seems to be working fine)but modifying just a property is a pain in the ass in VS.

I was thinking about moving each Panel into a separate component , and transmitting my entity as a Parameter.

But: 1).Right now, because I use all these into a single page razor, on the code page, let's say I have the method DoSomething(), I can use this method on each panel. Will I need to repeat the DoSomething() on each component, if i'll split them ? Is there a way I can share that method? 2).Do you think this will impact the performance on the UI? 3).Is there any better way of doing this ?

CodePudding user response：

Why not use a

@foreach (FieldAttributes fsa in cAtribs)
    {
    <MudTabPanel [email protected]>
        <EditForm>
                <MudItem>
                     @for(int i=0;i<fsa.Value.Count();i  )
                         {
                         <EditField @fsa.Value.ElementAt(i) />
                          }
                </MudItem>
      </EditForm>
   </MudTabPanel>
    }

loop, where Dictionary<string, List<string>> cAtribs.

The key of the dictionary is "Section 1", ... "Section N" and the collection has the property names for each section.

you can build cAtribs ahead of time, or dynamically, or even using reflection.

CodePudding user response：

This is more a comment than an answer, but there's not enough spacing to fit it into a comment.

Track which Tab you're in and only load the edit form for the specific tab. That will significantly reduce what needs to be rendered at one time. Something like:

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

You don't show your data binding, but make sure you use a view data service to hold your model data.
Consider using a component for each edit form within a Tab?

There are many complications with multi-tab editors/wizards. How are you validating and when? Is you backend one model/data table?

If you want more detail, add a comment and I'll try and put together some demo code later today.