Skip to content

Build error when parameter and child component have the same name #5634

@fayezmm

Description

@fayezmm

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-blazorIncludes: Blazor, Razor ComponentsbugThis issue describes a behavior which is not expected - a bug.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions