在运行时更改组件索引

Question

如何在运行时更改 Blazor 组件索引的索引。这是剃须刀的代码

@page "/datagrid"
 @namespace PS
 
 
 <div class="input-group">  
     <DxDateEdit  @bind-Date="@DateTimeValue"/>

     <DxTextBox Text="This is textbox"/>
 </div>


      
      
  

 @code
{
    DateTime DateTimeValue { get; set; } = new DateTime(2022, 1, 1);
    public bool IsDisplayTextBoxFirst { get; set; } = false;

 }

当前输出

当用户将值 IsDisplayTextBoxFirst 设置为 true 时，文本框应该像附加图像一样首先呈现我如何根据 IsDisplayTextBoxFirst 属性.

的值在运行时更改组件索引

Answer 1

您可以使用条件渲染并像这样编写代码

<div class="input-group">  
     <DxDateEdit  @bind-Date="@DateTimeValue"/>
     @if(IsDisplayTextBoxFirst){
       <DxTextBox Text="This is textbox"/>
     }
 </div>

Answer 2

您可以在 .input-group 中使用 if/else 表达式，如下所示：

<div class="input-group">
    @if (IsDisplayTextBoxFirst)
    {
        <DxTextBox Text="This is textbox"/>
        <DxDateEdit @bind-Date="@DateTimeValue"/>
    }
    else
    {
        <DxDateEdit @bind-Date="@DateTimeValue"/>        
        <DxTextBox Text="This is textbox"/>
    }
</div>

或者，在您的代码中定义 reusable RenderFragments：

<div class="input-group">
    @if (IsDisplayTextBoxFirst)
    {
        @TextBox
        @DateEdit
    }
    else
    {
        @DateEdit
        @TextBox
    }
</div>

@code
{
    // Parameters and other logic

    private RenderFragment TextBox => __builder =>
    {
        <DxTextBox Text="This is textbox"/>
    };

    private RenderFragment DateEdit => __builder =>
    {
        <DxDateEdit @bind-Date="@DateTimeValue"/>
    };
}

如@henk-holtermann 所建议，您可以选择实现可重用的 RenderFragments (docs) 而根本不需要引用 __builder：

@code
{
    // Parameters and other logic

    private RenderFragment TextBox => @<DxTextBox Text="This is textbox"/>;

    private RenderFragment DateEdit => @<DxDateEdit @bind-Date="@DateTimeValue"/>;
}

在运行时更改组件索引

Change Component Index at runtime

razor

blazor