CODEWITHSUNDEEP
.net-coreasp.net-core-mvcblazor.net-7.0
d0rf47
d0rf47

Reputation: 499

.net core 7.0 + MVC with added blazor Pages

I am trying to configure a .NET Core 7.0 project that uses MVC but would also like to support adding Blazor pages. I am having issues with the Program.cs file configurations and getting the app to use the blazor.server.js file. I have configured the app and file structure but upon running the app and trying to use a Blazor page I cannot get the functionality to work correctly.I created a demo app and tried to set up a counter but once the app runs the server.blazor.js file returns a 404.

I'm not certain what is being done wrong, and I can only seem to find guides for using .net 6.0 and the old syntax for configuring the Blazor portion.

The counter section, that is the Blazor component seems to do nothing, but the only error I get is onload the 404 for the blazor.server.js Really at a loss as to why it wont work since all research suggest that this is possible

Below is all the code I think is relevant to the issue

program.cs:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// MVC
builder.Services.AddControllersWithViews();
// Add services to the container.
// Blazor
builder.Services.AddRazorPages();
 
var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Component.razor:

@using Microsoft.AspNetCore.Components

<h3>Blazor Component in MVC</h3>
<button @onclick="Test" class="btn btn-dark">Click to get answer</button>
<br />
<div>@Data </div>

@code {
    [Parameter]
    public string Data { get; set; } = string.Empty;
    private void Test()
    {
        Console.WriteLine("click");
        Data = "Button Clicked";
    }
 }

Index.cshtml:

@using Microsoft.AspNetCore.Components

<h3>Blazor Component in MVC</h3>
<button @onclick="Test" class="btn btn-dark">Click to get answer</button>
<br />
<div>@Data </div>

@code {
    [Parameter]
    public string Data { get; set; } = string.Empty;
    private void Test()
    {
        Console.WriteLine("click");
        Data = "Button Clicked";
    }
 }

_layout.cshtml:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MvcBlazorSampleApp</title>
    <base href="~/" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/MvcBlazorSampleApp.styles.css" asp-append-version="true" />    
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcBlazorSampleApp</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - MvcBlazorSampleApp - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="_framework/blazor.server.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Project file structure:

enter image description here

I have tried changing to configuration and tried looking for any resource for doing this in .NET 7, but I have not yet found a working solution. Only info I can find relates to .NET 6 and I cannot determine what I am missing in order for this to work.

Any ideas, resource or suggestions are welcome.

Upvotes: 0

Views: 822

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30001

Take a look at this article which explains how to add Server Side Blazor to any AspNetCore web application.

https://www.codeproject.com/Articles/5321697/Building-a-Blazor-Server-Application-from-the-Web

Upvotes: 1

Related Questions