diff --git a/aspnetcore/migration/31-to-50.md b/aspnetcore/migration/31-to-50.md index db2efc4735..73a575a304 100644 --- a/aspnetcore/migration/31-to-50.md +++ b/aspnetcore/migration/31-to-50.md @@ -4,7 +4,7 @@ author: scottaddie description: Learn how to migrate an ASP.NET Core 3.1 project to ASP.NET Core 5.0. ms.author: scaddie ms.custom: mvc -ms.date: 11/11/2020 +ms.date: 11/15/2020 no-loc: [appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: migration/31-to-50 --- @@ -93,6 +93,246 @@ For a Blazor WebAssembly project, including the *`Client`* project of a hosted B 1. Update other packages to their latest versions. The latest versions can be found at [NuGet.org](https://www.nuget.org). +1. In `wwwroot/index.html`: + + * Add a `` element to the `` element for scoped styles. + * Change the element that loads the `App` component. + + ```diff + + + ``` + + ```diff + -Loading... + +Loading... + ``` + +1. In `Program.Main`: + + * Change the reference to the `` element to a CSS selector by adding a hash `#` to it. + * Change the `HttpClient` registration to scoped. + + ```diff + -builder.RootComponents.Add("app"); + +builder.RootComponents.Add("#app"); + + -builder.Services.AddTransient(sp => new HttpClient + - { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + +builder.Services.AddScoped(sp => new HttpClient + + { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + ``` + +1. In `Shared/MainLayout.razor`, surround all of the content in a `
` element with an `id` of `page`: + + ```razor +
+ + ... + +
+ ``` + +1. Add the following files to the `Shared` folder: + + `MainLayout.razor.css`: + + ```css + .page { + position: relative; + display: flex; + flex-direction: column; + } + + .main { + flex: 1; + } + + .sidebar { + background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); + } + + .top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + height: 3.5rem; + display: flex; + align-items: center; + } + + .top-row ::deep a, .top-row .btn-link { + white-space: nowrap; + margin-left: 1.5rem; + } + + .top-row a:first-child { + overflow: hidden; + text-overflow: ellipsis; + } + + @media (max-width: 767.98px) { + .top-row:not(.auth) { + display: none; + } + + .top-row.auth { + justify-content: space-between; + } + + .top-row a, .top-row .btn-link { + margin-left: 0; + } + } + + @media (min-width: 768px) { + .page { + flex-direction: row; + } + + .sidebar { + width: 250px; + height: 100vh; + position: sticky; + top: 0; + } + + .top-row { + position: sticky; + top: 0; + z-index: 1; + } + + .main > div { + padding-left: 2rem !important; + padding-right: 1.5rem !important; + } + } + ``` + + `NavMenu.razor.css`: + + ```css + .navbar-toggler { + background-color: rgba(255, 255, 255, 0.1); + } + + .top-row { + height: 3.5rem; + background-color: rgba(0,0,0,0.4); + } + + .navbar-brand { + font-size: 1.1rem; + } + + .oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; + } + + .nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; + } + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + + .nav-item ::deep a.active { + background-color: rgba(255,255,255,0.25); + color: white; + } + + .nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } + + @media (min-width: 768px) { + .navbar-toggler { + display: none; + } + + .collapse { + /* Never collapse the sidebar for wide screens */ + display: block; + } + } + ``` + +1. The latest base `wwwroot/css/app.css` file includes the following styles. Remove extra styles leaving the following styles and any that you've added to the app. + + `wwwroot/css/app.css` (base styles not including styles added by the developer): + + ```css + @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); + + html, body { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + } + + a, .btn-link { + color: #0366d6; + } + + .btn-primary { + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; + } + + .content { + padding-top: 1.1rem; + } + + .valid.modified:not([type=checkbox]) { + outline: 1px solid #26b050; + } + + .invalid { + outline: 1px solid red; + } + + .validation-message { + color: red; + } + + #blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; + } + + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } + ``` + ### Standalone Blazor WebAssembly app with Microsoft Accounts For a standalone Blazor WebAssembly app registered in the Azure portal to use Azure Active Directory (AAD) for Microsoft Accounts: