CODEWITHSUNDEEP
c#blazor
KingKerosin
KingKerosin

Reputation: 3841

Multiple components use the same tag in blazor

I'm currently playing around with blazor just to test what it is able to do.

I have a main project which will act as the final website to be shown to the user. For the components I have created a class-library for holding bootstrap-based components like a Table which will render the table with bootstrap-class applied. Because of I will have multiple websites at the end, there will also be shared components between those in another class-library project. This one will also have a component called Table which will render a bootstrap-table from the other shared project with additional handlings for sorting, paging, filtering and so on.

The problem I get is, that there is a naming-conflict which I am not able to resolve.

Lets say the the projects are named Company.Website1 for the final website, Company.Shared.Components for the extended table and Company.Shared.Components.Bootstrap which will hold the bootstrap-components to be consumed by the other shared project.

When I try to create my Table-component in Company.Shared.Components I get the following error

Multiple components use the tag 'Table'

I tried whats been written here but then I got the error

Found markup element with unexpected name 'Table.Table'. If this is intended to be a component, add a @using directive for its namespace

I also tried to alias the using directive without any chance.

The razor-file itself is simply

@using Company.Shared.Components.Bootstrap.Table

<Table></Table>

I guess I would get the same errors if I would use a third-party library which has some components named the same as some already existing in my project. So there must be a workaround which I'm currently not able to see.

Upvotes: 6

Views: 13640

Answers (4)

Ramesh Vaduka
Ramesh Vaduka

Reputation: 126

As per your requirement you should add component like

<Company.Shared.Components.Table></Company.Shared.Components.Table>

OR

<Company.Shared.Components.Bootstrap.Table></Company.Shared.Components.Bootstrap.Table>

NOTE: Open and closing tags should be same always.

Upvotes: 0

Nijenhof
Nijenhof

Reputation: 692

If you have a multiple components that share the same name, you can just add the namespace in the tag to specify which one you want to use.

So you could do:

<Company.Shared.Components.Table></Table>

Or

<Company.Shared.Components.Bootstrap.Table></Table>

Source: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0#namespaces

Upvotes: 15

Sascha Liebmann
Sascha Liebmann

Reputation: 31

I had this issue after moving a blazor component with code-behind cs file. Moving the whole package into a different folder created a namespace conflict in the cs file because the namespace was not automatically updated while the one from the .razor file seems to reflect the folder structure.

Updating the namespace in the .cs file to match the new folder structure resolved the issue for me

Upvotes: 1

Caius Jard
Caius Jard

Reputation: 74605

Had this issue with Blazorise.Icon vs Blazorise.Icons.FontAwesome.Icon - anywhere that imported both Blazorise and Blazorise.Icons.FontAwesome hit a problem

In the end, to keep things clean, I just inherited Blazorise.Icons.FontAwesome.Icon:

//in FAIcon.razor
@inherits Blazorise.Icons.FontAwesome.Icon
@{
    base.BuildRenderTree(__builder);
}

and used <FAIcon everywhere

Upvotes: 2

Related Questions