-
Notifications
You must be signed in to change notification settings - Fork 10.4k
Description
Add support for @tagHelperPrefix
Problem
Current implementation of Blazor v0.6.0 does not have support for Razor @tagHelperPrefix
Functional impact
Trying to Include a child component inside a RenderFragment of a parent component where both the child and the RenderFragment have the same name will result in compile time error.
Minimal repro steps
Let us suppose we have a component in Panel.cshtml
as follows:
<div class="panel panel-default">
<div class="panel-heading">@PanelHeader</div>
<div class="panel-body">@PanelBody</div>
</div>
@functions{
[Parameter] private RenderFragment PanelHeader { get; set; }
[Parameter] private RenderFragment PanelBody { get; set; }
}
and another component in PanelHeader.cshtml
like this:
<div>@Title</div>
<div>@SubTitle</div>
@functions{
[Parameter] private string Title { get; set; }
[Parameter] private string SubTitle { get; set; }
}
then using these two components in a page like below code will result in a compile time error:
<Panel>
<PanelHeader>
<PanelHeader Title="some title" SubTitle="sub title"></PanelHeader>
</PanelHeader>
<PanelBody>Some content ...</PanelBody>
<Panel>
Proposal
I would recommend to add support for @tagHelperPrefix
so to simplify distinguishing components from RenderFragments.
Above code could then can be re-written as follows:
Panel.cshtml
would be like this:
@tagHelperPrefix "pre1:"
<div class="panel panel-default">
<div class="panel-heading">@PanelHeader</div>
<div class="panel-body">@PanelBody</div>
</div>
@functions{
[Parameter] private RenderFragment PanelHeader { get; set; }
[Parameter] private RenderFragment PanelBody { get; set; }
}
And PanelHeader.cshtml
would look like this:
@tagHelperPrefix "pre2:"
<div>@Title</div>
<div>@SubTitle</div>
@functions{
[Parameter] private string Title { get; set; }
[Parameter] private string SubTitle { get; set; }
}
And finally both the child and the parent components can be used like this:
<pre1:Panel>
<PanelHeader>
<pre2:PanelHeader Title="some title" SubTitle="sub title"></pre2:PanelHeader>
</PanelHeader>
<PanelBody>Some content ...</PanelBody>
<pre1:Panel>