[Asp.net core 3.1] 经过一个小组件熟悉Blazor服务端组件开发
经过一个小组件，熟悉 Blazor 服务端组件开发。githubcss
1、环境搭建
vs2019 16.4, asp.net core 3.1 新建 Blazor 应用，选择 asp.net core 3.1。 根文件夹下新增目录 Components，放置代码。html
2、组件需求定义
Components 目录下新建一个接口文件(interface)看成文档,加个 using using Microsoft.AspNetCore.Components;。git
先从直观的方面入手。github
- 相似 html 标签对的组件,样子相似
<xxx propA="aaa" data-propB="123" ...>其余标签或内容...</xxx>或<xxx .../>。接口名：INTag. - 须要 Id 和名称，方便区分和调试。
string TagId{get;set;} string TagName{get;set;}. - 须要样式支持。加上
string Class{get;set;} string Style{get;set;}。 - 不经常使用的属性也提供支持,使用字典。
IDictionary<string,object> CustomAttributes { get; set; } - 应该提供 js 支持。加上
using Microsoft.JSInterop;属性IJSRuntime JSRuntime{get;set;}。
考虑一下功能方面。面试
- 既然是标签对，那就有可能会嵌套，就会产生层级关系或父子关系。由于只是可能，因此咱们新建一个接口，用来提供层级关系处理，IHierarchyComponent。
- 须要一个 Parent ，类型就定为 Microsoft.AspNetCore.Components.IComponent.
IComponent Parent { get; set; }. - 要能添加子控件，
void AddChild(IComponent child);,有加就有减,void RemoveChild(IComponent child);。 - 提供一个集合方便遍历，咱们已经提供了 Add/Remove,让它只读就好。
IEnumerable<IComponent> Children { get;}。 - 一旦有了 Children 集合，咱们就须要考虑何时从集合里移除组件，让 IHierarchyComponent 实现 IDisposable,保证组件被释放时解开父子/层级关系。
- 组件须要处理样式，仅有 Class 和 Style 可能不够，一般还会须要 Skin、Theme 处理，增长一个接口记录一下，
public interface ITheme{ string GetClass<TComponent>(TComponent component); }。INTag 增长一个属性ITheme Theme { get; set; }
INTag:c#
public interface INTag
{
string TagId { get; set; }
string TagName { get; }
string Class { get; set; }
string Style { get; set; }
ITheme Theme { get; set; }
IJSRuntime JSRuntime { get; set; }
IDictionary<string,object> CustomAttributes { get; set; }
}
IHierarchyComponent:浏览器
public interface IHierarchyComponent:IDisposable
{
IComponent Parent { get; set; }
IEnumerable<IComponent> Children { get;}
void AddChild(IComponent child);
void RemoveChild(IComponent child);
}
IThemeasp.net
public interface ITheme
{
string GetClass<TComponent>(TComponent component);
}
组件的基本信息 INTag 有了，须要的话能够支持层级关系 IHierarchyComponent，能够考虑下一些特定功能的处理及类型部分。async
- Blazor 组件实现相似
<xxx>....</xxx>这种可打开的标签对，须要提供一个RenderFragment 或 RenderFragment<TArgs>属性。RenderFragment 是一个委托函数，带参的明显更灵活些，可是参数类型很差肯定，很差肯定的类型用泛型。再加一个接口，INTag< TArgs >:INTag, 一个属性RenderFragment<TArgs> ChildContent { get; set; }. - 组件的主要目的是为了呈现咱们的数据，也就是通常说的 xxxModel,Data....,类型不肯定，那就加一个泛型。
INTag< TArgs ,TModel>:INTag. - RenderFragment 是一个函数，ChildContent 是一个函数属性，不是方法。在方法内，咱们可使用 this 来访问组件自身引用，可是函数内部实际上是没有 this 的。为了更好的使用组件自身，这里增长一个泛型用于指代自身，
public interface INTag<TTag, TArgs, TModel>:INTag where TTag: INTag<TTag, TArgs, TModel>。
INTag[TTag, TArgs, TModel ]ide
public interface INTag<TTag, TArgs, TModel>:INTag
where TTag: INTag<TTag, TArgs, TModel>
{
/// <summary>
/// 标签对之间的内容，<see cref="TArgs"/> 为参数,ChildContent 为Blazor约定名。
/// </summary>
RenderFragment<TArgs> ChildContent { get; set; }
}
回顾一下咱们的几个接口。
- INTag:描述了组件的基本信息，即组件的样子。
- IHierarchyComponent 提供了层级处理能力，属于组件的扩展能力。
- ITheme 提供了 Theme 接入能力，也属于组件的扩展能力。
- INTag<TTag, TArgs, TModel> 提供了打开组件的能力，ChildContent 像一个动态模板同样，让咱们能够在声明组件时自行决定组件的部份内容和结构。
- 全部这些接口最主要的目的实际上是为了产生一个合适的 TArgs， 去调用 ChildContent。
- 有描述，有能力还有了主要目的，咱们就能够去实现 NTag 组件。
3、组件实现
抽象基类 AbstractNTag
Components 目录下新增 一个 c#类，AbstractNTag.cs, using Microsoft.AspNetCore.Components; 借助 Blazor 提供的 ComponentBase,实现接口。
public abstract class AbstractNTag<TTag, TArgs, TModel> : ComponentBase, IHierarchyComponent, INTag<TTag, TArgs, TModel>
where TTag: AbstractNTag<TTag, TArgs, TModel>{
}
调整一下 vs 生成的代码， IHierarchyComponent 使用字段实现一下。
Children:
List<IComponent> _children = new List<IComponent>();
public void AddChild(IComponent child)
{
this._children.Add(child);
}
public void RemoveChild(IComponent child)
{
this._children.Remove(child);
}
Parent,dispose
IComponent _parent;
public IComponent Parent { get=>_parent; set=>_parent=OnParentChange(_parent,value); }
protected virtual IComponent OnParentChange(IComponent oldValue, IComponent newValue)
{
if(oldValue is IHierarchyComponent o) o.RemoveChild(this);
if(newValue is IHierarchyComponent n) n.AddChild(this);
return newValue;
}
public void Dispose()
{
this.Parent = null;
}
增长对浏览器 console.log 的支持, razor Attribute...,完整的 AbstractNTag.cs
public abstract class AbstractNTag<TTag, TArgs, TModel> : ComponentBase, IHierarchyComponent, INTag<TTag, TArgs, TModel>
where TTag: AbstractNTag<TTag, TArgs, TModel>
{
List<IComponent> _children = new List<IComponent>();
IComponent _parent;
public string TagName => typeof(TTag).Name;
[Inject]public IJSRuntime JSRuntime { get; set; }
[Parameter]public RenderFragment<TArgs> ChildContent { get; set; }
[Parameter] public string TagId { get; set; }
[Parameter]public string Class { get; set; }
[Parameter]public string Style { get; set; }
[Parameter(CaptureUnmatchedValues =true)]public IDictionary<string, object> CustomAttributes { get; set; }
[CascadingParameter] public IComponent Parent { get=>_parent; set=>_parent=OnParentChange(_parent,value); }
[CascadingParameter] public ITheme Theme { get; set; }
public bool TryGetAttribute(string key, out object value)
{
value = null;
return CustomAttributes?.TryGetValue(key, out value) ?? false;
}
public IEnumerable<IComponent> Children { get=>_children;}
protected virtual IComponent OnParentChange(IComponent oldValue, IComponent newValue)
{
ConsoleLog($"OnParentChange: {newValue}");
if(oldValue is IHierarchyComponent o) o.RemoveChild(this);
if(newValue is IHierarchyComponent n) n.AddChild(this);
return newValue;
}
protected bool FirstRender = false;
protected override void OnAfterRender(bool firstRender)
{
FirstRender = firstRender;
base.OnAfterRender(firstRender);
}
public override Task SetParametersAsync(ParameterView parameters)
{
return base.SetParametersAsync(parameters);
}
int logid = 0;
public object ConsoleLog(object msg)
{
logid++;
Task.Run(async ()=> await this.JSRuntime.InvokeVoidAsync("console.log", $"{TagName}[{TagId}_{ logid}:{msg}]"));
return null;
}
public void AddChild(IComponent child)
{
this._children.Add(child);
}
public void RemoveChild(IComponent child)
{
this._children.Remove(child);
}
public void Dispose()
{
this.Parent = null;
}
}
- Inject 用于注入
- Parameter 支持组件声明的 Razor 语法中直接赋值，<NTag Class="ssss" .../>;
Parameter(CaptureUnmatchedValues =true)支持声明时将组件上没定义的属性打包赋值;CascadingParameter配合 Blazor 内置组件<CascadingValue Value="xxx" >... <NTag /> ...</CascadingValue>,捕获 Value。处理过程和级联样式表（css）很相似。
具体类 NTag
泛型其实就是定义在类型上的函数，TTag,TArgs,TModel 就是 入参，获得的类型就是返回值。所以处理泛型定义的过程，就很相似函数逐渐消参的过程。好比：
func(a,b,c) 肯定a以后，func(b,c)=>func(1,b,c); 肯定b以后，func(c)=>func(1,2,c); 最终： func()=>func(1,2,3)； 执行 func 能够获得一个明确的结果。
一样的,咱们继承 NTag 基类时须要考虑各个泛型参数应该是什么：
- TTag:这个很容易肯定，谁继承了基类就是谁。
- TModel: 这个不到最后使用咱们是没法肯定的，须要保留。
- TArgs: 前面说过，组件的主要目的是为了给 ChildContent 提供参数.从这一目的出发，TTag 和 TModel 的用途之一就是给
TArgs提供类型支持,或者说 TArgs 应该包含 TTag 和 TModel。又由于 ChildContent 只有一个参数，所以 TArgs 应该有必定的扩展性，不妨给他一个属性作扩展。 综合一下，TArgs 的大概模样就有了,来个 struct。
public struct RenderArgs<TTag,TModel>
{
public TTag Tag;
public TModel Model;
public object Arg;
public RenderArgs(TTag tag, TModel model, object arg ) {
this.Tag = tag;
this.Model = model;
this.Arg = arg;
}
}
- RenderArgs 属于经常使用辅助类型，所以不须要给 TArgs 指定约束。
Components 目录下新增 Razor 组件，NTag.razor;aspnetcore3.1 组件支持分部类，新增一个 NTag.razor.cs;
NTag.razor.cs 就是标准的 c#类写法
public partial class NTag< TModel> :AbstractNTag<NTag<TModel>,RenderArgs<NTag<TModel>,TModel>,TModel>
{
[Parameter]public TModel Model { get; set; }
public RenderArgs<NTag<TModel>, TModel> Args(object arg=null)
{
return new RenderArgs<NTag<TModel>, TModel>(this, this.Model, arg);
}
}
重写一下 NTag 的 ToString,方便测试
public override string ToString()
{
return $"{this.TagName}<{typeof(TModel).Name}>[{this.TagId},{Model}]";
}
NTag.razor
@typeparam TModel
@inherits AbstractNTag<NTag<TModel>,RenderArgs<NTag<TModel>,TModel>,TModel>//保持和NTag.razor.cs一致
@if (this.ChildContent == null)
{
<div>@this.ToString()</div>//默认输出，用于测试
}
else
{
@this.ChildContent(this.Args());
}
@code {
}
简单测试一下, 数据就用项目模板自带的 Data 打开项目根目录，找到_Imports.razor,把 using 加进去
@using xxxx.Data @using xxxx.Components
新增 Razor 组件【Test.razor】
未打开的NTag,输出NTag.ToString():
<NTag TModel="object" />
打开的NTag:
<NTag Model="TestData" Context="args" >
<div>NTag内容 @args.Model.Summary; </div>
</NTag>
<NTag Model="@(new {Name="匿名对象" })" Context="args">
<div>匿名Model,使用参数输出【Name】属性: @args.Model.Name</div>
</NTag>
@code{
WeatherForecast TestData = new WeatherForecast { TemperatureC = 222, Summary = "aaa" };
}
转到 Pages/Index.razor, 增长一行<Test />,F5 。
应用级联参数 CascadingValue/CascadingParameter
咱们的组件中 Theme 和 Parent 被标记为【CascadingParameter】，所以须要经过 CascadingValue 把值传递过来。
首先，修改一下测试组件,使用嵌套 NTag,描述一个树结构，Model 值指定为树的 Level。
<NTag Model="0" TagId="root" Context="root">
<div>root.Parent:@root.Tag.Parent </div>
<div>root Theme:@root.Tag.Theme</div>
<NTag TagId="t1" Model="1" Context="t1">
<div>t1.Parent：@t1.Tag.Parent </div>
<div>t1 Theme:@t1.Tag.Theme</div>
<NTag TagId="t1_1" Model="2" Context="t1_1">
<div>t1_1.Parent：@t1_1.Tag.Parent </div>
<div>t1_1 Theme：@t1_1.Tag.Theme </div>
<NTag TagId="t1_1_1" Model="3" Context="t1_1_1">
<div>t1_1_1.Parent：@t1_1_1.Tag.Parent </div>
<div>t1_1_1 Theme：@t1_1_1.Tag.Theme </div>
</NTag>
<NTag TagId="t1_1_2" Model="3" Context="t1_1_2">
<div>t1_1_2.Parent：@t1_1_2.Tag.Parent</div>
<div>t1_1_2 Theme：@t1_1_2.Tag.Theme </div>
</NTag>
</NTag>
</NTag>
</NTag>
一、 Theme:Theme 的特色是共享，不管组件在什么位置，都应该共享同一个 Theme。这类场景，只须要简单的在组件外套一个 CascadingValue。
<CascadingValue Value="Theme.Default"> <NTag TagId="root" ...... </CascadingValue>
F5 跑起来，结果大体以下：
root.Parent:
<div>root Theme:Theme[blue]</div>
<div>t1.Parent： </div>
<div>t1 Theme:Theme[blue]</div>
<div>t1_1.Parent： </div>
<div>t1_1 Theme：Theme[blue] </div>
<div>t1_1_1.Parent： </div>
<div>t1_1_1 Theme：Theme[blue] </div>
<div>t1_1_2.Parent：</div>
<div>t1_1_2 Theme：Theme[blue] </div>
二、Parent:Parent 和 Theme 不一样，咱们但愿他和咱们组件的声明结构保持一致，这就须要咱们在每一个 NTag 内部增长一个 CascadingValue，直接写在 Test 组件里过于啰嗦了，让咱们调整一下 NTag 代码。打开 NTag.razor,修改一下,Test.razor 不动。
<CascadingValue Value="this">
@if (this.ChildContent == null)
{
<div>@this.ToString()</div>//默认输出，用于测试
}
else
{
@this.ChildContent(this.Args());
}
</CascadingValue>
看一下结果
root.Parent:
<div>root Theme:Theme[blue]</div>
<div> t1.Parent：NTag`1[root,0] </div>
<div>t1 Theme:Theme[blue]</div>
<div> t1_1.Parent：NTag`1[t1,1] </div>
<div> t1_1 Theme：Theme[blue] </div>
<div> t1_1_1.Parent：NTag`1[t1_1,2] </div>
<div> t1_1_1 Theme：Theme[blue] </div>
<div> t1_1_2.Parent：NTag`1[t1_1,2]</div>
<div> t1_1_2 Theme：Theme[blue] </div>
- CascadingValue/CascadingParameter 除了能够经过类型匹配以外还能够指定 Name。
呈现 Model
到目前为止，咱们的 NTag 主要在处理一些基本功能，好比隐式的父子关系、子内容 ChildContent、参数、泛型。。接下来咱们考虑如何把一个 Model 呈现出来。
对于常见的 Model 对象来讲，呈现 Model 其实就是把 Model 上的属性、字段。。。这些成员信息呈现出来，所以咱们须要给 NTag 增长一点能力。
- 描述成员最直接的想法就是 lambda，model=>model.xxxx，此时咱们只须要 Model 就足够了；
- UI 呈现时仅有成员还不够，一般会有格式化需求，好比：{0:xxxx}； 或者带有先后缀： "￥{xxxx}元整"，甚至就是一个常量。。。。此类信息一般应记录在组件上，所以咱们须要组件自身。
- 呈现时有时还会用到一些环境变量，好比序号/行号这种，所以须要引入一个参数。
- 以上需求能够很容易的推导出一个函数类型：Func<TTag, TModel,object,object> ；考虑 TTag 就是组件自身，这里能够简化一下：Func<TModel,object,object>。 主要目的是从 model 上取值，兼顾格式化及环境变量处理，返回结果会直接用于页面呈现输出。
调整下 NTag 代码，增长一个类型为 Func<TModel,TArg,object> 的 Getter 属性,打上【Parameter】标记。
[Parameter]public Func<TModel,object,object> Getter { get; set; }
- 此处也可以使用表达式(Expression<Func<TModel,object,object>>)，须要增长一些处理。
- 呈现时一般还须要一些文字信息，好比 lable，text 之类， 支持一下；
[Parameter] public string Text { get; set; }
- UI 呈现的需求难以肯定，一般还会有对状态的处理， 这里提供一些辅助功能就能够。
一个小枚举
public enum NVisibility
{
Default,
Markup,
Hidden
}
状态属性和 render 方法,NTag.razor.cs
[Parameter] public NVisibility TextVisibility { get; set; } = NVisibility.Default;
[Parameter] public bool ShowContent { get; set; } = true;
public RenderFragment RenderText()
{
if (TextVisibility == NVisibility.Hidden|| string.IsNullOrEmpty(this.Text)) return null;
if (TextVisibility == NVisibility.Markup) return (b) => b.AddContent(0, (MarkupString)Text);
return (b) => b.AddContent(0, Text);
}
public RenderFragment RenderContent(RenderArgs<NTag<TModel>, TModel> args)
{
return this.ChildContent?.Invoke(args) ;
}
public RenderFragment RenderContent(object arg=null)
{
return this.RenderContent(this.Args(arg));
}
NTag.razor
<CascadingValue Value="this">
@RenderText()
@if (this.ShowContent)
{
var render = RenderContent();
if (render == null)
{
<div>@this</div>//测试用
}
else
{
@render//render 是个函数，使用@才能输出，若是不考虑测试代码，能够直接 @RenderContent()
}
}
</CascadingValue>
Test.razor 增长测试代码
七、呈现Model
<br />
value:@@arg.Tag.Getter(arg.Model,null)
<br />
<NTag Text="日期" Model="TestData" Getter="(m,arg)=>m.Date" Context="arg">
<input type="datetime" value="@arg.Tag.Getter(arg.Model,null)" />
</NTag>
<br />
Text中使用Markup：value:@@((DateTime)arg.Tag.Getter(arg.Model, null))
<br />
<label>
<NTag Text="<span style='color:red;'>日期</span>" TextVisibility="NVisibility.Markup" Model="TestData" Getter="(m,a)=>m.Date" Context="arg">
<input type="datetime" value="@((DateTime)arg.Tag.Getter(arg.Model,null))" />
</NTag>
</label>
<br />
也能够直接使用childcontent：value:@@arg.Model.Date
<div>
<NTag Model="TestData" Getter="(m,a)=>m.Date" Context="arg">
<label> <span style='color:red;'>日期</span> <input type="datetime" value="@arg.Model.Date" /></label>
</NTag>
</div>
getter 格式化:@@((m,a)=>m.Date.ToString("yyyy-MM-dd"))
<div>
<NTag Model="TestData" Getter="@((m,a)=>m.Date.ToString("yyyy-MM-dd"))" Context="arg">
<label> <span style='color:red;'>日期</span> <input type="datetime" value="@arg.Tag.Getter(arg.Model,null)" /></label>
</NTag>
</div>
使用customAttributes ，借助外部方法推断TModel类型
<div>
<NTag type="datetime" Getter="@GetGetter(TestData,(m,a)=>m.Date)" Context="arg">
<label> <span style='color:red;'>日期</span> <input @attributes="arg.Tag.CustomAttributes" value="@arg.Tag.Getter(arg.Model,null)" /></label>
</NTag>
</div>
@code {
WeatherForecast TestData = new WeatherForecast { TemperatureC = 222, Date = DateTime.Now, Summary = "test summary" };
Func<T, object, object> GetGetter<T>(T model, Func<T, object, object> func) {
return (m, a) => func(model, a);
}
}
考察一下测试代码，咱们发现 用做取值的 arg.Tag.Getter(arg.Model,null) 明显有些啰嗦了，调整一下 RenderArgs,让它能够直接取值。
public struct RenderArgs<TTag,TModel>
{
public TTag Tag;
public TModel Model;
public object Arg;
Func<TModel, object, object> _valueGetter;
public object Value => _valueGetter?.Invoke(Model, Arg);
public RenderArgs(TTag tag, TModel model, object arg , Func<TModel, object, object> valueGetter=null) {
this.Tag = tag;
this.Model = model;
this.Arg = arg;
_valueGetter = valueGetter;
}
}
//NTag.razor.cs
public RenderArgs<NTag<TModel>, TModel> Args(object arg = null)
{
return new RenderArgs<NTag<TModel>, TModel>(this, this.Model, arg,this.Getter);
}
集合，Table 行列
集合的简单处理只须要循环一下。Test.razor
<ul>
@foreach (var o in this.Datas)
{
<NTag Model="o" Getter="(m,a)=>m.Summary" Context="arg">
<li @key="o">@arg.Value</li>
</NTag>
}
</ul>
@code {
IEnumerable<WeatherForecast> Datas = Enumerable.Range(0, 10)
.Select(i => new WeatherForecast { Summary = i + "" });
}
复杂一点的时候，好比 Table，就须要使用列。
- 列有 header：可使用 NTag.Text;
- 列要有单元格模板：NTag.ChildContent;
- 行就是全部列模板的呈现集合，行数据便是集合数据源的一项。
- 具体到 table 上，thead 定义列，tbody 生成行。
新增一个组件用于测试:TestTable.razor,试着用 NTag 呈现一个 table。
<NTag TagId="table" TModel="WeatherForecast" Context="tbl">
<table>
<thead>
<tr>
<NTag Text="<th>#</th>"
TextVisibility="NVisibility.Markup"
ShowContent="false"
TModel="WeatherForecast"
Getter="(m, a) =>a"
Context="arg">
<td>@arg.Value</td>
</NTag>
<NTag Text="<th>Summary</th>"
TextVisibility="NVisibility.Markup"
ShowContent="false"
TModel="WeatherForecast"
Getter="(m, a) => m.Summary"
Context="arg">
<td>@arg.Value</td>
</NTag>
<NTag Text="<th>Date</th>"
TextVisibility="NVisibility.Markup"
ShowContent="false"
TModel="WeatherForecast"
Getter="(m, a) => m.Date"
Context="arg">
<td>@arg.Value</td>
</NTag>
</tr>
</thead>
<tbody>
<CascadingValue Value="default(object)">
@{ var cols = tbl.Tag.Children;
var i = 0;
tbl.Tag.ConsoleLog(cols.Count());
}
@foreach (var o in Source)
{
<tr @key="o">
@foreach (var col in cols)
{
if (col is NTag<WeatherForecast> tag)
{
@tag.RenderContent(tag.Args(o,i ))
}
}
</tr>
i++;
}
</CascadingValue>
</tbody>
</table>
</NTag>
@code {
IEnumerable<WeatherForecast> Source = Enumerable.Range(0, 10)
.Select(i => new WeatherForecast { Date=DateTime.Now,Summary=$"data_{i}", TemperatureC=i });
}
- 服务端模板处理时，代码会先于输出执行，直观的说，就是组件在执行时会有层级顺序。因此咱们在 tbody 中增长了一个 CascadingValue,推迟一下代码的执行时机。不然，
tbl.Tag.Children会为空。 - thead 中的 NTag 做为列定义使用，与最外的 NTag（table）正好造成父子关系。
- 观察下 NTag，咱们发现有些定义重复了，好比 TModel，单元格
<td>@arg.Value</td>。下面试着简化一些。
以前测试 Model 呈现的代码中咱们说到能够 “借助外部方法推断 TModel 类型”，当时使用了一个 GetGetter 方法，让咱们试着在 RenderArg 中增长一个相似方法。
RenderArgs.cs:
public Func<TModel, object, object> GetGetter(Func<TModel, object, object> func) => func;
- GetGetter 极简单，不须要任何逻辑，直接返回参数。原理是 RenderArgs 可用时，TModel 必然是肯定的。
用法：
<NTag Text="<th>#<th>"
TextVisibility="NVisibility.Markup"
ShowContent="false"
Getter="(m, a) =>a"
Context="arg">
<td>@arg.Value</td>
做为列的 NTag，每列的 ChildContent 实际上是同样的，变化的只有 RenderArgs，所以只须要定义一个就足够了。
NTag.razor.cs 增长一个方法,对于 ChildContent 为 null 的组件咱们使用一个默认组件来 render。
public RenderFragment RenderChildren(TModel model, object arg=null)
{
return (builder) =>
{
var children = this.Children.OfType<NTag<TModel>>();
NTag<TModel> defaultTag = null;
foreach (var child in children)
{
if (defaultTag == null && child.ChildContent != null) defaultTag = child;
var render = (child.ChildContent == null ? defaultTag : child);
render.RenderContent(child.Args(model, arg))(builder);
}
};
}
TestTable.razor
<NTag TagId="table" TModel="WeatherForecast" Context="tbl">
<table>
<thead>
<tr>
<NTag Text="<th >#</th>"
TextVisibility="NVisibility.Markup"
ShowContent="false"
Getter="tbl.GetGetter((m,a)=>a)"
Context="arg">
<td>@arg.Value</td>
</NTag>
<NTag Text="<th>Summary</th>"
TextVisibility="NVisibility.Markup"
ShowContent="false"
Getter="tbl.GetGetter((m, a) => m.Summary)"/>
<NTag Text="<th>Date</th>"
TextVisibility="NVisibility.Markup"
ShowContent="false"
Getter="tbl.GetGetter((m, a) => m.Date)"
/>
</tr>
</thead>
<tbody>
<CascadingValue Value="default(object)">
@{
var i = 0;
foreach (var o in Source)
{
<tr @key="o">
@tbl.Tag.RenderChildren(o, i++)
</tr>
}
}
</CascadingValue>
</tbody>
</table>
</NTag>
结束
- 文中经过 NTag 演示一些组件开发经常使用技术，所以功能略多了些。
- TArgs 能够视做 js 组件中的 option.
相关文章
- 1. 【ASP.NET Core】Blazor 服务器端的 Base Path
- 2. Blazor 组件库 Blazui 开发入门
- 3. 前端开发小组件
- 4. 开发一个 Enhancer 前端组件
- 5. 实验一 开发环境的熟悉(小组)
- 6. Flutter 组件 | 熟悉而陌生的 Container
- 7. Angular2组件开发—调用服务（一）
- 8. 3.1 vCenter组件和服务详解
- 9. （28）ASP.NET Core AutoMapper组件
- 10. [AspNetCore 3.0 ] Blazor 服务端组件 Render, RenderFragment ，RenderTreeBuilder, CascadingValue/CascadingPa
- 更多相关文章...
- • ASP AdRotator 组件 - ASP 教程
- • ASP Content Linking 组件 - ASP 教程
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • PHP开发工具
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【ASP.NET Core】Blazor 服务器端的 Base Path
- 2. Blazor 组件库 Blazui 开发入门
- 3. 前端开发小组件
- 4. 开发一个 Enhancer 前端组件
- 5. 实验一 开发环境的熟悉(小组)
- 6. Flutter 组件 | 熟悉而陌生的 Container
- 7. Angular2组件开发—调用服务（一）
- 8. 3.1 vCenter组件和服务详解
- 9. （28）ASP.NET Core AutoMapper组件
- 10. [AspNetCore 3.0 ] Blazor 服务端组件 Render, RenderFragment ，RenderTreeBuilder, CascadingValue/CascadingPa