Blazor Html Json格式化
最近在嘗試自己做一個Json格式化的工具,怎奈大部分都是html js版本的,于是做了一個blazor版本的,雙手奉上
@using WebCommonTools.Components
@using System.Text.Json
@code {
[Parameter]
public JsonElement element { get; set; }
[Parameter]
public int level { get; set; }
private bool isExpand { get; set; } = true;
private string imageName
{
get
{
if (isExpand) return "Expanded.gif";
return "Collapsed.gif";
}
}
private string display
{
get
{
if (isExpand) return "inline";
return "none";
}
}
private void OnExpandClick()
{
isExpand = !isExpand;
}
public string Space(int scount)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(' ', scount);
return sb.ToString();
}
public string Tab(int tcount)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(' ', tcount * 4);
return sb.ToString();
}
}
@{
switch (element.ValueKind)
{
case JsonValueKind.Object:
{
@Space(0)<span>{</span><img src="JSONFormat-master/@imageName" @onclick="OnExpandClick" /><span style="display:@display">
@foreach (var jel in element.EnumerateObject())
{
@Tab(level + 1)<span>"@jel.Name":</span><HtmlJsonElement element=jel.Value level=this.level+1></HtmlJsonElement>
}@Tab(level)</span><span>}</span>@Space(0)
}
break;
case JsonValueKind.Array:
{
int cc = 1;
@Space(0)<span>[</span><img src="JSONFormat-master/@imageName" @onclick="OnExpandClick" /><span style="display:@display">
@foreach (var jel in element.EnumerateArray())
{
@Tab(level + 1)@cc<span>:</span><HtmlJsonElement element=jel level=this.level+1></HtmlJsonElement>
++cc;
}@Tab(level)</span><span>]</span>@Space(0)
}
break;
case JsonValueKind.Number:
@element.GetDouble();
break;
case JsonValueKind.String:
@Space(0)<span>"@element.GetString()"</span>@Space(0)
break;
case JsonValueKind.True:
@Space(0)<span>true</span>@Space(0)
break;
case JsonValueKind.False:
@Space(0)<span>false</span>@Space(0)
break;
case JsonValueKind.Null:
@Space(0)<span>null</span>@Space(0)
break;
case JsonValueKind.Undefined:
@Space(0)<span>undefined</span>@Space(0)
break;
}
}
測試位址