This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(214.4, 35%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EFR%3C/text%3E%3C/svg%3E)
I've got another Blazor question. I started an ASP.NET Razor application a couple months back, because as I understood it at the time, it was the best way of getting to use Windows Authentication. And I know that it is possible to host Blazor components within Razor pages. So far, it seems to be working.But I would like to take one of my Razor pages, and convert it to a Blazor component. I found a good Microsoft Learn course on this here: https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/input-components?view=aspnetcore-8.0
And I had hoped all I'd have to do was rename the .cshtml file to .razor and I'd be done. But before I did that, I searched to see if my simple approach would work. It looks like it is more complicated then I thought. I found this page which describes migrating a Razor page to Blazor https://www.devgem.io/posts/step-by-step-guide-to-migrating-asp-net-core-razor-pages-to-blazor
So, is that second link, correct? Is the steps I need to do in order to convert my Razor page to a Blazor component?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
the second link is just for converting a razor page to a Blazor page. to host a Blazor component on a razor page, is more complex:
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integration?view=aspnetcore-9.0
Hi Bruce, thank you for your response. I've gone to the Microsoft Learn link that you gave, although I changed it to .NET 8, since that's what I'm working in.
In the Configuration section I can't add a script tag in front of a Script render section (@await RenderSectionAsync(...)). I don't have any file that has that line in it. It isn't in my _ViewStart.cshtml file. I must have done something wrong again. Have you an idea where I've gone wrong?
if you created a standard razor page project, then in:
pages/shared/_layout.cshtml
you will find the script includes for jQuery & bootstrap, followed by the render scripts section. this is where you put Blazor boot script boot include. this allows blazor component support on every page. you would move to the hosting page if only one page.
note: if using Blazor components on Razor pages I'd change to .net 9 to get the best support (this is an evolving feature).
as there is no current WASM support, if you need to support mobile access, I'd avoid this solution.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(22.400000000000002, 68%, 12%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ERF%3C/text%3E%3C/svg%3E)
Hi,@Falanga, Rod, DOH
So, is that second link, correct?
The codes in second document to host razor components is not correct
builder.Services.AddSignalR();
builder.Services.AddServerSideBlazor();
.....
app.UseStaticFiles();
app.UseRouting();
app.UseBlazorFrameworkFiles();
app.UseAuthorization();
app.MapRazorPages();
// don't remove if you still have Razor pages
app.MapDefaultControllerRoute();
app.MapBlazorHub();
the services registered are for blazor server apps and the middleware app.UseBlazorFrameworkFiles(); is for blazor webassembly apps
although there exists the route in test component:
@page "/Test"
The test component is not routeble at all.
Based on Bruce's answer, notice the .net version of your app,in .net 7 or lower versions ,you need _host.cshtml for all your razor components to be rendered on ,in .net 8 or higher versions,you could use app.razor instead
document for .net 7 and document for .net 8
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Ruikai Feng
Is what you're written applied to the WASM project in a Blazor app? I've looked at the Program.cs file in my second document (my API project, not a WASM project) and I don't have anything there for adding SignalR.
On Blazor server is supported, WASM projects are not supported, you would need to write your plumbing support.
to support a Blazor component in razor page project (not api) you use server side b\Blazor. to support server side, you need to add:
while a Blazor component is running (page hosting component displayed in browser), there is a signal/r connection from the client to the server, dedicated server thread to host the component instance, and dedicated server memory for the Blazor application state.
Hello Bruce, I've got the builder.Services.AddServerSideBlazor() in Program.cs and the Blazor Server Support js file in the _Layout.cshtml file. However, I didn't have app.MapBlazorHub() in the Program.cs file. I've place it there, towards the bottom of Program.cs:
app.UseAuthorization();
app.MapRazorPages();
app.MapBlazorHub();
app.Run();
Have I put it in the correct place?
looks correct, but don't see static asset support. here is my programs.cs that calls blazor component (just followed article).
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
app.MapStaticAssets();
app.MapRazorPages()
.WithStaticAssets();
app.MapBlazorHub();
app.Run();
I added files:
/_imports.razor
Pages/Shared/Counter.Razor
modified _layout.razor:
<base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" render-mode="ServerPrerendered" />
Thank you, Bruce, for sharing your Program.cs. It is almost the end of my day, however I thought I would share my Program .cs file from my primary project (not the API project): I've gotten rid of the errors I was getting, but it still isn't allowing me to interact with it in the Blazor page. I'm guessing I've done something wrong here:
using Microsoft.AspNetCore.Authentication.Negotiate;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddAuthentication(NegotiateDefaults.AuthenticationScheme)
.AddNegotiate();
builder.Services.AddAuthorization(options =>
{
// By default, all incoming requests will be authorized according to the default policy.
options.FallbackPolicy = options.DefaultPolicy;
});
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.MapBlazorHub();
app.Run();