recursion - Blazor 中的递归标记
问题描述
我有一个 LogModel,它具有 LogModel 类型的 Children 属性,因此是递归/嵌套结构。还有一个 Collapsed bool 属性和一个 Description 字符串。
我试图在 Blazor 服务器端标记中显示它,但无法弄清楚如何处理递归片段。
我希望它显示描述,带有一个 +/- 按钮,该按钮具有切换 Collapse 属性的@onclick,然后控制引导程序中的折叠类,从显示中折叠/隐藏所有子项。
像这个例子: 如何使用 Blazor 语法折叠/展开 Razor 组件?
我的第二个想法是在代码中执行递归部分,它返回一个 MarkupString。这显示正常,但后来我无法弄清楚如何将 +/- 按钮绑定到一个事件以切换折叠的属性,因为 @onlick 不能从我读过的 MarkupString 内部完成。
在此先感谢,亚伦。
解决方案
这是基于您提供的信息的解决方案。这并不漂亮:您需要对 Bootstrap CSS 进行排序以满足您的需求。
日志模型.cs
using System.Collections.Generic;
namespace StackOverflow.Answers
{
public class LogModel
{
public string Description { get; set; }
public List<LogModel> Children { get; set; } = new List<LogModel>();
}
}
LogDisplayControl.razor
@namespace StackOverflow.Answers
<div class="container m-0 p-1 border border-secondary">
<div class="row">
<div class="col-11">
@this.Model.Description
</div>
@if (this.hasChildren)
{
<div class="col-1">
<button class="btn @this.buttonCss" type="button" @onclick="ToggleShow">
@buttonText
</button>
</div>
}
</div>
@if (this.Show)
{
<div class="row">
<div class="col-12">
@if (this.hasChildren)
{
@foreach (var child in this.Model.Children)
{
<LogDisplayControl Model="child"></LogDisplayControl>
}
}
</div>
</div>
}
</div>
@code {
[Parameter] public LogModel Model { get; set; }
private bool Show;
private void ToggleShow()
=> this.Show = !this.Show;
private bool hasChildren => this.Model?.Children?.Count > 0;
private string buttonText => this.Show ? "Hide" : "Show";
private string buttonCss => this.Show ? "btn-dark" : "btn-primary";
private string HeaderCols => this.hasChildren ? "col-11" : "col-12";
}
演示页面
@page "/Accordion"
@foreach (var child in Model)
{
<LogDisplayControl Model="child" />
}
@code {
private List<LogModel> Model = new List<LogModel>();
protected override void OnInitialized()
{
var model1_1_1 = new LogModel { Description = "Log Model 1.1.1" };
var model1_1_2 = new LogModel { Description = "Log Model 1.1.2" };
var model1_1 = new LogModel { Description = "Log Model 1.1", Children = new List<LogModel> { model1_1_1, model1_1_2 } };
var model1_2 = new LogModel { Description = "Log Model 1.2" };
var model1 = new LogModel { Description = "Log Model 1", Children = new List<LogModel> { model1_1, model1_2 } };
var model2_1_1 = new LogModel { Description = "Log Model 2.1.1" };
var model2_1 = new LogModel { Description = "Log Model 2.1", Children = new List<LogModel> { model2_1_1 } };
var model2 = new LogModel { Description = "Log Model 2", Children = new List<LogModel> { model2_1 } };
Model.Add(model1);
Model.Add(model2);
}
}
推荐阅读
- flutter - 如何在 Flutter 中自动关闭对话框警报小部件?
- reactjs - 获取 ReferenceError:找不到变量:导航 React Native
- git - BitBucket 使用 REST API 比较分支
- python - 为 PIL 图像的每个像素独立地在通道维度上随机排列每个值
- python - 防止python进程因内存不足而被杀死
- extjs - Extjs 枢轴网格行号
- python - 使用纬度和经度而不是提供的 xy 坐标绘制地图时避免插值数据
- image-processing - 查找通过改组像素位置和欧几里得距离平均值形成的图像数量
- cmake - 仅在 Windows 上创建项目时如何设置 CMAKE_TOOLCHAIN_FILE
- ruby-on-rails - 红宝石 aws s3:batch_delete!没有删除所有文件