asp.net - 在 Razor 页面中使用带有树对象的模型绑定和递归渲染?
问题描述
我有这堂课:
public class SmartNode
{
public string Key { get; set; }
public object Value { get; set; }
public JsonValueKind ValueKind { get; set; }
public bool IsFinal { get; set; }
public int Level { get; set; }
public SmartNode ParentNode { get; set; }
public List<SmartNode> SubNodes { get; set; } = new List<SmartNode>();
}
IsFinal
表示该对象表示一个简单的 JSON 节点(字符串、布尔值或数字..)如果IsFinal
为 false,我会进行递归以获得“最终”属性:
这是剃须刀页面:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
@{
if (Model.HeadNode != null)
{
using (Html.BeginForm())
{
await DrawNode(Model.HeadNode);
async Task DrawNode(SmartNode node)
{
var margin = (node.Level * 20).ToString() + "px";
if (!node.IsFinal)
{
<h4 style="margin-left:@margin">@node.Key</h4>
foreach (var subnode in node.SubNodes)
{
await DrawNode(subnode);
}
}
else
{
int i = 0;//temp
var id = node.Key + "_" + node.Level;
<div>
<label for="@id" style="margin-left: @margin">@node.Key</label>
@switch (node.ValueKind)
{
case System.Text.Json.JsonValueKind.Undefined:
break;
case System.Text.Json.JsonValueKind.Object:
break;
case System.Text.Json.JsonValueKind.Array:
break;
case System.Text.Json.JsonValueKind.String:
<input type="text" name="???.Value" value="@node.Value" id="@id" />
break;
case System.Text.Json.JsonValueKind.Number:
<input type="number" name="???.Value" value="@node.Value" id="@id" />
break;
case System.Text.Json.JsonValueKind.True:
case System.Text.Json.JsonValueKind.False:
<input type="checkbox" name="???.Value"
checked="@(node.Value.ToString() == "True")"
value="True" id="@id" />
<input name="???.Value" type="hidden" value="False">
break;
case System.Text.Json.JsonValueKind.Null:
<input type="text" name="???.Value" value="@node.Value" id="@id" />
break;
default:
break;
}
</div>
}
}
<button type="submit">Save</button>
}
}
}
问题是如何从剃刀分配输入名称
我使用 .NET 5 Razor 页面。
解决方案
不要直接在页面上执行此操作,而是创建一个执行渲染的组件,将节点传递给组件,并使组件包含每个子节点的自身实例。
恭喜你现在有了一个递归组件。
Edit1:组件(此处为 SmartTreeView.razor)看起来像这样:
<!-- Maybe some title per node, whatever -->
<h3>@Node.Key - @Node.Value</h3>
<!-- Render node data here, like -->
@if (Node.Value != null)
{
<DataComponent data="@(Node.Value)" />
}
<!-- Then, recursion -->
@foreach (var node in Node.SubNodes)
{
<span>@tab</span>
<SmartTreeView Node="@(node)" />
}
@code {
private const string tab = "\t";
[Parameter]
public SmartNode Node { get; set; }
}
然后页面只是放在<SmartTreeView Node="@(Model.HeadNode)" />
任何地方。
推荐阅读
- python - 熊猫滚动相关性随着时间偏移而表现得很奇怪
- database - 使用来自另一个数据库的值更新列
- php - LDAP 连接适用于 PHP 5 但不适用于 PHP 7
- flutter - 在 Flutter 中删除或修改导航抽屉覆盖阴影
- python - ImportError:DLL 加载失败:找不到指定的模块“TestClass”
- python - “ AttributeError: module 'numpy' has no attribute 'integer'” 从命令提示符运行 tensorboard 时出现此错误
- python - TypeError:“numpy.float64”对象不可调用;公式中的错误
- java - Vaadin 8 与 Vaadin 7 兼容包:Sass 编译器失败
- google-cloud-firestore - 在读取集合中的所有文档时,规则是否有任何功能?
- c++ - 错误:数字常量前应为 ';'、',' 或 ')