ASP.NET Core Blazor: 层叠参数

huangapple
go评论103阅读模式
英文:

ASP.NET Core Blazor: Cascading Parameters

问题

  1.     [CascadingParameter]
  2.     public DataGridComponent<TItem>? ContainerDataGridComponent { get; set; }
英文:

Here is the scenario I want to retrieve the child component parameters for the use of the parrant component.
Code for parent component:

  1.     [Parameter]
  2.     public List<TItem>? DataItems { get; set; }
  3.     public List<ColumnDefinition>? Columns { get; set; }
  4.     [Parameter]
  5.     public RenderFragment? ChildContent { get; set; }
  7.     public void AddColumn(ColumnDefinition columnDefinition)
  8.     {
  9.         if (Columns is null)
  10.             Columns = new();
  11.         Columns.Add(columnDefinition);
  12.         StateHasChanged();
  13.     }

Code for child component:

  1.     [CascadingParameter]
  2.     public DataGridComponent<TItem>? ContainerDataGridComponent { get; set; }
  3.     [Parameter]
  4.     public required ColumnDefinition ColumnDefinition { get; set; } 
  6.     protected override void OnInitialized()
  7.     {
  8.         base.OnInitialized();
  9.         ContainerDataGridComponent?.AddColumn(ColumnDefinition);
  10.     }

launch code:

  1. <DataGridComponent DataItems="PersonDtos" TItem="PersonDto">
  2.     <ColumnComponent TItem="PersonDto" ColumnDefinition="@(new(){DataField = " FirstName", Caption="First Name" })" ></ColumnComponent>
  3.     <ColumnComponent TItem="PersonDto" ColumnDefinition="@(new(){DataField = "LastName", Caption = "Last Name"})" ></ColumnComponent>
  4.     <ColumnComponent TItem="PersonDto" ColumnDefinition="@(new(){DataField = "CreatedDate", Caption = "Created Date"})" ></ColumnComponent>
  5.     <ColumnComponent TItem="PersonDto" ColumnDefinition="@(new(){DataField = "UpdatedDate", Caption = "Updated Date"})" ></ColumnComponent>
  6. </DataGridComponent>

My problem:
this property is always null

  1. [CascadingParameter]
  2.     public DataGridComponent<TItem>? ContainerDataGridComponent { get; set; }

......
What do I have to do?

答案1

得分: 4

不确定你在做什么，因为根据你提供的代码，这是你应该有的东西。你在 Grid 中进行级联吗？

  1. public class ColumnDefinition
  2. {
  3.     public string? Name { get; set; }
  4. }

GridItem

  1. @typeparam TItem
  2. <div class="alert alert-primary">
  3. @ChildContent
  4. </div>
  6. @code {
  7.     [CascadingParameter] public Grid<TItem>? ContainerDataGridComponent { get; set; }
  9.     [Parameter, EditorRequired] public required ColumnDefinition ColumnDefinition { get; set; }
  10.     [Parameter] public RenderFragment? ChildContent { get; set; }
  12.     protected override void OnInitialized()
  13.     {
  14.         ContainerDataGridComponent?.AddColumn(this.ColumnDefinition);
  15.     }
  16. }

Grid

  1. @typeparam TItem
  2. <h3>Grid</h3>
  3. <CascadingValue Value="this">
  4.         @ChildContent
  5.         <div class="alert alert-info">
  6.             Registered columns: @Columns.Count()
  7.         </div>
  8. </CascadingValue>
  10. @code {
  11.     [Parameter] public List<TItem>? DataItems { get; set; }
  12.     public List<ColumnDefinition>? Columns { get; set; }
  13.     [Parameter] public RenderFragment? ChildContent { get; set; }
  15.     public void AddColumn(ColumnDefinition columnDefinition)
  16.     {
  17.         if (Columns is null)
  18.             Columns = new();
  19.         Columns.Add(columnDefinition);
  20.         StateHasChanged();
  21.     }
  22. }

页面：

  1. @page "/"
  2. <PageTitle>Index</PageTitle>
  4. <h1>Hello, world!</h1>
  6. <Grid TItem="int">
  7.     <GridItem TItem="int" ColumnDefinition="@(new ColumnDefinition { Name="Fred"})">Hello 1</GridItem>
  8.     <GridItem TItem="int" ColumnDefinition="@(new ColumnDefinition { Name="Fred"})">Hello 2</GridItem>
  9.     <GridItem TItem="int" ColumnDefinition="@(new ColumnDefinition { Name="Fred"})">Hello 3</GridItem>
  10. </Grid>

评论：在这种情况下，你不需要级联整个组件，只需要注册方法，像这样的 Action：

GridItem

  1. @typeparam TItem
  2. <div class="alert alert-primary">
  3. @ChildContent
  4. </div>
  6. @code {
  7.     [CascadingParameter] private Action<ColumnDefinition>? Register { get; set; }
  8.     [Parameter, EditorRequired] public required ColumnDefinition ColumnDefinition { get; set; }
  9.     [Parameter] public RenderFragment? ChildContent { get; set; }
  11.     protected override void OnInitialized()
  12.     {
  13.         this.Register?.Invoke(this.ColumnDefinition);
  14.     }
  15. }

Grid

  1. @typeparam TItem
  2. <h3>Grid</h3>
  3. <CascadingValue Value="this.RegisterColumn">
  4.         @ChildContent
  5.         <div class="alert alert-info">
  6.             Registered columns: @Columns.Count()
  7.         </div>
  8. </CascadingValue>
  10. @code {
  11.     [Parameter] public List<TItem>? DataItems { get; set; }
  12.     [Parameter] public RenderFragment? ChildContent { get; set; }
  14.     private readonly List<ColumnDefinition> Columns = new();
  16.     private void RegisterColumn(ColumnDefinition columnDefinition)
  17.     {
  18.         if (!this.Columns.Any(item => item == columnDefinition ))
  19.             Columns.Add(columnDefinition);
  21.         StateHasChanged();
  22.     }
  23. }

ASP.NET Core Blazor: 层叠参数

  2. <details>
  3. <summary>英文:</summary>
  5. I&#39;m not sure what you&#39;re doing because this is what you should have based on the code you&#39;ve supplied.  Are you doing the cascade in Grid?
  7. ```csharp
  8. public class ColumnDefinition
  9. {
  10.     public string? Name { get; set; }
  11. }

GridItem

  1. @typeparam TItem
  2. &lt;div class=&quot;alert alert-primary&quot;&gt;
  3. @ChildContent
  4. &lt;/div&gt;
  6. @code {
  7.     [CascadingParameter] public Grid&lt;TItem&gt;? ContainerDataGridComponent { get; set; }
  9.     [Parameter, EditorRequired] public required ColumnDefinition ColumnDefinition { get; set; }
  10.     [Parameter] public RenderFragment? ChildContent { get; set; }
  12.     protected override void OnInitialized()
  13.     {
  14.         ContainerDataGridComponent?.AddColumn(this.ColumnDefinition);
  15.     }
  16. }

Grid

  1. @typeparam TItem
  2. &lt;h3&gt;Grid&lt;/h3&gt;
  3. &lt;CascadingValue Value=&quot;this&quot;&gt;
  4.         @ChildContent
  5.         &lt;div class=&quot;alert alert-info&quot;&gt;
  6.             Registered columns : @Columns.Count()
  7.         &lt;/div&gt;
  8. &lt;/CascadingValue&gt;
  10. @code {
  11.     [Parameter] public List&lt;TItem&gt;? DataItems { get; set; }
  12.     public List&lt;ColumnDefinition&gt;? Columns { get; set; }
  13.     [Parameter] public RenderFragment? ChildContent { get; set; }
  15.     public void AddColumn(ColumnDefinition columnDefinition)
  16.     {
  17.         if (Columns is null)
  18.             Columns = new();
  19.         Columns.Add(columnDefinition);
  20.         StateHasChanged();
  21.     }
  22. }

And the page:

  1. @page &quot;/&quot;
  3. &lt;PageTitle&gt;Index&lt;/PageTitle&gt;
  5. &lt;h1&gt;Hello, world!&lt;/h1&gt;
  7. &lt;Grid TItem=&quot;int&quot;&gt;
  8.     &lt;GridItem TItem=&quot;int&quot; ColumnDefinition=&quot;@(new ColumnDefinition { Name=&quot;Fred&quot;})&quot;&gt;Hello 1&lt;/GridItem&gt;
  9.     &lt;GridItem TItem=&quot;int&quot; ColumnDefinition=&quot;@(new ColumnDefinition { Name=&quot;Fred&quot;})&quot;&gt;Hello 2&lt;/GridItem&gt;
  10.     &lt;GridItem TItem=&quot;int&quot; ColumnDefinition=&quot;@(new ColumnDefinition { Name=&quot;Fred&quot;})&quot;&gt;Hello 3&lt;/GridItem&gt;
  11. &lt;/Grid&gt;

Comment: In this instance you don't need to cascade the whole component, just the registration method, as an Action like this:

GridItem

  1. @typeparam TItem
  2. &lt;div class=&quot;alert alert-primary&quot;&gt;
  3. @ChildContent
  4. &lt;/div&gt;
  6. @code {
  7.     [CascadingParameter] private Action&lt;ColumnDefinition&gt;? Register { get; set; }
  8.     [Parameter, EditorRequired] public required ColumnDefinition ColumnDefinition { get; set; }
  9.     [Parameter] public RenderFragment? ChildContent { get; set; }
  11.     protected override void OnInitialized()
  12.     {
  13.         this.Register?.Invoke(this.ColumnDefinition);
  14.     }
  15. }

Grid

  1. @typeparam TItem
  2. &lt;h3&gt;Grid&lt;/h3&gt;
  3. &lt;CascadingValue Value=&quot;this.RegisterColumn&quot;&gt;
  4.         @ChildContent
  5.         &lt;div class=&quot;alert alert-info&quot;&gt;
  6.             Registered columns : @Columns.Count()
  7.         &lt;/div&gt;
  8. &lt;/CascadingValue&gt;
  10. @code {
  11.     [Parameter] public List&lt;TItem&gt;? DataItems { get; set; }
  12.     [Parameter] public RenderFragment? ChildContent { get; set; }
  14.     private readonly List&lt;ColumnDefinition&gt; Columns = new();
  16.     private void RegisterColumn(ColumnDefinition columnDefinition)
  17.     {
  18.         if (!this.Columns.Any(item =&gt; item == columnDefinition ))
  19.             Columns.Add(columnDefinition);
  21.         StateHasChanged();
  22.     }
  23. }

ASP.NET Core Blazor: 层叠参数

huangapple
  • 本文由 发表于 2023年3月8日 14:54:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/75670113.html
  • asp.net
  • blazor
  • c#
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定