如何以树结构渲染以下模型并将其绑定到表单?

问题描述 投票:0回答:1

我确实有一个评估模型,其中有 n 个子评估模型。我想将 AssessmentNode 模型渲染为树结构中的表单元素(例如:TextBox HTML 元素)。一个表单可以有多个评估节点元素。

我使用 LIFO Stack 类在 UI 中渲染模型。我正在寻找将弹出的节点绑定到表单中。

public class Assessment
{
    public Guid ID { get; set; }
    public string Name { get; set; }
    public List<AssessmentNode> Nodes { get; set; }
    public List<Connector> Connectors { get; set; }
}
public class AssessmentNode
{
    public Guid NodeID { get; set; }
    public string Question { get; set; }
    public string Answer { get; set; }
    public bool HasChildNode { get; set; }
}

public class Connector
{
    public Guid ConnectorID { get; set; }
    public string Name { get; set; }
    public string SourceNodeId { get; set; }
    public string TargetNodeId { get; set; }
}

如何在 UI 中将节点渲染为树形结构并将其绑定到表单?

例如:

  1. Q1
  2. 第二季度 a) 2Qa b) 2Qb
  3. Q3
c# blazor syncfusion
1个回答
0
投票

首先,修复模型:

public class Assessment
{
    public Guid ID { get; set; }
    public string Name { get; set; }
    public List<AssessmentNode> Nodes { get; set; }
    //public List<Connector> Connectors { get; set; }
}
public class AssessmentNode
{
    public Guid NodeID { get; set; }
    public string Question { get; set; }
    public string Answer { get; set; }
    //public bool HasChildNode { get; set; }
    public List<AssessmentNode> Children { get; set; }
}

// public class Connector {}

然后可以简单地附加 UI:

AssessmentView.razor

@* display Name etc *@
@foreach(node in Element.Nodes)
{
   <AssessmentNodeView Node='node'   />
}

@code
{
   [Parameter] public Assessment Element { get; set; }
}

AssessmentNodeView.razor

@* display Name etc *@
@foreach(node in NodeChildren)
{
   <AssessmentNodeView Node='node'   />
}

@code
{
   [Parameter] public AssessmentNode Node { get; set; }
}
© www.soinside.com 2019 - 2024. All rights reserved.