Blazor Features missing in existing project

Question

I've started playing around with the new "Blazor Server App" project template in VS 2019 and everything works as expected. Now I've tried to use some Blazor stuff in an existing .NET Core 3 ASP.NET MVC app. I've added ".MapBlazorHub(); & .AddServerSideBlazor();" to the startup class and

<script src="_framework/blazor.server.js"></script>

to the _layout file. The new razor component gets rendered as expected and the "OnInitialized()" method in the @code block is fired. But when I try to use a button click event nothing happens - not in the VS console - not in the browser console. After some hours of research I've found out that the syntax highlighting is different in the 2 projects:

Microsoft Blazor Server App template:

Existing project:

Also I found that the "Add - Razor Page..." context menu is only visibible in the MS template. But I can't find any differences in the csproject or the sln file.

I'm really stuck on this. Any ideas what I'm missing?

Ryan · Accepted Answer · 2019-10-18 06:02:41Z

2

As Andreas has said, you need to add a new _Imports.razor file in your folder( Views folder or your custom folder where you restore your razor components.

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

Structure:

Also I found that the "Add - Razor Page..." context menu is only visibible in the MS template. But I can't find any differences in the csproject or the sln file.

The MS template uses Pages folder and you could see Add- Razor Page option.

If you are using Razor Pages project there will be Add- Razor Page, since you are using MVC, the option does not exist.

If you use the latest vs 2019 and asp.net core 3.0, you could create a razor component by clicking Add - New Item - Razor Component directly

answered Oct 18, 2019 at 6:02

Ryan

20.3k10 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M. Altmann Over a year ago

Adding the _Imports.razor to the folder with the components did the trick!

Andreas · Accepted Answer · 2019-10-17 20:27:21Z

0

In the Blazor-Template-Project you should see a _Imports.razor file containing multiple @using directives.

Try adding the following directive to the Views\_ViewImports.cshtml file in your MVC app.

@using Microsoft.AspNetCore.Components.Web

Without the using directive the razor engine doesn't know the @onclick should be interpreted as C# code and therefor does not wire up the event handler as expceted. That's also why VisualStudio does not highlight it as C# syntax.

If this helps, you should probably also add the other blazor relevant @using directives to the _ViewImports.cshtml file.

Don't know about the missing 'Add - Razor Page...', sry.

answered Oct 17, 2019 at 20:27

Andreas

2441 silver badge7 bronze badges

Collectives™ on Stack Overflow

Blazor Features missing in existing project

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related