Scaffolding: Blazor WebAssembly Identity scaffolding issues

Created on 27 Apr 2020 · 15Comments · Source: dotnet/Scaffolding

Blazor webassembly version: dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview5.20216.8

Creating new project blazer web assembly with Authentication and asp.netcore hosted

after Scaffold applied for Identity, I am getting the error:
invalidOperationException: The following sections have been defined but have not been rendered by the page at '/Pages/Shared/_Layout.cshtml': 'Scripts'. To ignore an unrendered section call IgnoreSection("sectionName").

it will "fix" if I change: Server/Page/Shared/_Layout.cshtml

remove:

@section Scripts {
    @RenderSection("Scripts", required: false)
}

and replace for:

@{
    @if (IsSectionDefined("Scripts"))
    {
        IgnoreSection("Scripts");
    }
}

however the JS wont be populated from pages using this template via:

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

I am missing any configuration to get that sorted?

duplicate

Source

douglassimaodev

Most helpful comment

~@deepchoudhery It looks like the Identity scaffolder generates a layout into the server project that doesn't render the Scripts section used by the Identity pages to add required scripts to the page.~

Correction: The problematic layout comes from the Blazor WebAssembly template, not from the scaffolder.

The generated Pages/Shared/_Layout.cshtml looks like this:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>@ViewBag.Title</title>
    <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/app.css" rel="stylesheet" />
</head>

<body>
    <div class="main">
        <div class="content px-4">
            @RenderBody()
        </div>
    </div>
</body>

</html>

But it needs to render the Scripts section like this:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>@ViewBag.Title</title>
    <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/app.css" rel="stylesheet" />
</head>

<body>
    <div class="main">
        <div class="content px-4">
            @RenderBody()
        </div>
    </div>

    @RenderSection("Scripts", required: false)
</body>

</html>

danroth27 on 13 Jun 2020

👍4

All 15 comments

This seems like a content issue. @danroth27 @HaoK any ideas?

deepchoudhery on 29 Apr 2020

Also what pages are you scaffolding? aka what dotnet aspnet-codegenerator command did you run?

deepchoudhery on 29 Apr 2020

I am scaffolding all pages from Identity (as test)

I didn't not run any dotnet command, I am using all from VS2019, new project... right click project, add new scaffolding, identity etc

I only run dotnet ... to install blazor template so I can select it from VS2019

douglassimaodev on 29 Apr 2020

Same issue here. Any workaround?

rubeesh on 29 May 2020

I am having same issue on this also. Any update yet?

OluwatosinPro on 9 Jun 2020

I am having same issue on this also. Any update yet?

use
@RenderSection("Scripts", required: false)
in _Layout.cshtml body

rubeesh on 9 Jun 2020

@douglassimaodev this is a dup of #1321, how are they different? Can you close one?

Can you confirm the following works?

use @RenderSection("Scripts", required: false) in _Layout.cshtml body

Rick-Anderson on 10 Jun 2020

I found this fixes it:
Under the server project, delete the _ViewStart.cshtml under Areas/Identity/Pages/

OluwatosinPro on 10 Jun 2020

Correction: The problematic layout comes from the Blazor WebAssembly template, not from the scaffolder.

The generated Pages/Shared/_Layout.cshtml looks like this:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>@ViewBag.Title</title>
    <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/app.css" rel="stylesheet" />
</head>

<body>
    <div class="main">
        <div class="content px-4">
            @RenderBody()
        </div>
    </div>
</body>

</html>

But it needs to render the Scripts section like this:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>@ViewBag.Title</title>
    <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/app.css" rel="stylesheet" />
</head>

<body>
    <div class="main">
        <div class="content px-4">
            @RenderBody()
        </div>
    </div>

    @RenderSection("Scripts", required: false)
</body>

</html>

danroth27 on 13 Jun 2020

👍4

@deepchoudhery The generated Pages/Shared/_ViewImports.cshtml file also looks a bit mangled:

@using Microsoft.AspNetCore.Identity
@using BlazorWebAssemblyWithIdentity.Server.Areas.Identity


BlazorWebAssemblyWithIdentity.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

It looks like one of the namespace directive isn't rendering properly. I think it's supposed to look like this:

@using Microsoft.AspNetCore.Identity
@using BlazorWebAssemblyWithIdentity.Server.Areas.Identity
@namespace BlazorWebAssemblyWithIdentity.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

danroth27 on 13 Jun 2020

@danroth27 is #1321 a dup?

Rick-Anderson on 13 Jun 2020

@deepchoudhery Also, if we're going to generate a layout that gets used by the identity area, shouldn't it be more complete than this one and include the normal heading and footing?

danroth27 on 13 Jun 2020

@Rick-Anderson Yup, looks like it

danroth27 on 13 Jun 2020

@danroth27 it looks like we do have a render scripts section in the layout already don't we?

https://github.com/dotnet/Scaffolding/blob/master/src/VS.Web.CG.Mvc/Templates/Identity/Bootstrap4/Pages/_Layout.cshtml#L61

HaoK on 13 Jun 2020

@HaoK Whoops! You're right. I need to work on my diff'ing skills 😝

There is a default minimalistic layout in the Blazor WebAssembly server project that doesn't render the Scripts section. Looks like we need to address the layout issue in the Blazor WebAssembly template. Closing this issue as a dup of https://github.com/dotnet/aspnetcore/issues/22712. I'll open a separate issue for the view imports issue.

danroth27 on 13 Jun 2020

Was this page helpful?

0 / 5 - 0 ratings