Issue
I am building a website with MVC and the Manage profile pages (change email, password, etc) are not working with bootstrap or my template styling.
For example, the change first/last name page looks and works fine: 
However, when I click the email or password tab, the styling does not work. 
I have gone so far as to include the css and js scripts in the email view; however, this still doesn't work.
This is the Index view, which shows the change first/last name form and correctly works:
@page
@model IndexModel
@using IssueTracker.Areas.Identity.Data;
@inject SignInManager<ApplicationUser> SignInManager
@{
ViewData["Title"] = "Update Contact Info";
ViewData["ActivePage"] = ManageNavPages.Index;
var hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IssueTracker | Contact Details</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../dist/plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../../dist/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="card card-outline card-primary">
<div class="card-header text-center">
<a asp-controller="Home" asp-action="Index" class="h1"><b>Issue</b>Tracker</a>
<ul class="nav nav-pills ml-auto d-flex justify-content-center">
<li class="nav-item">
<a class="nav-link @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Contact Info</a>
</li>
<li class="nav-item">
<a class="nav-link @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a>
</li>
<li class="nav-item">
<a class="nav-link @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a>
</li>
@if (hasExternalLogins)
{
<li id="external-logins" class="nav-item"><a id="external-login" class="nav-link @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External Logins</a></li>
}
</ul>
</div>
<div class="card-body">
<p class="login-box-msg">Update your contact info below.</p>
<form id="profile-form" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-floating mb-3">
<div class="input-group">
<input asp-for="Username" class="form-control" disabled />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
</div>
<div class="form-floating mb-3">
<div class="input-group">
<input asp-for="Input.FirstName" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<span asp-validation-for="Input.FirstName" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<div class="input-group">
<input asp-for="Input.LastName" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>
<span asp-validation-for="Input.LastName" class="text-danger"></span>
</div>
<partial name="_StatusMessage" for="StatusMessage" />
<div class="row">
<div class="col-12">
<button id="update-profile-button" type="submit" class="btn btn-primary btn-block">Update Profile</button>
</div>
<!-- /.col -->
</div>
</form>
<p class="mt-3 mb-1">
<a asp-controller="Home" asp-action="Index">Back to Dashboard</a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="../../dist/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../dist/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
</body>
</html>
Here is the email view which does not display my custom styling.
@page
@model EmailModel
@using IssueTracker.Areas.Identity.Data;
@inject SignInManager<ApplicationUser> SignInManager
@{
ViewData["Title"] = "Manage Email";
ViewData["ActivePage"] = ManageNavPages.Email;
var hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IssueTracker | Manage Email</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="../../dist/plugins/fontawesome-free/css/all.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../../dist/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="card card-outline card-primary">
<div class="card-header text-center">
<a asp-controller="Home" asp-action="Index" class="h1"><b>Issue</b>Tracker</a>
<ul class="nav nav-pills ml-auto d-flex justify-content-center">
<li class="nav-item">
<a class="nav-link @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Contact Info</a>
</li>
<li class="nav-item">
<a class="nav-link @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a>
</li>
<li class="nav-item">
<a class="nav-link @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a>
</li>
@if (hasExternalLogins)
{
<li id="external-logins" class="nav-item"><a id="external-login" class="nav-link @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External Logins</a></li>
}
</ul>
</div>
<div class="card-body">
<p class="login-box-msg">Update your contact info below.</p>
<form id="email-form" method="post">
<div asp-validation-summary="All" class="text-danger"></div>
@if (Model.IsEmailConfirmed)
{
<div class="form-floating mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" disabled />
<div class="input-group-append">
<span class="h-100 input-group-text text-success font-weight-bold">✓</span>
</div>
</div>
</div>
}
else
{
<div class="form-floating mb-3">
<div class="input-group">
<input asp-for="Email" class="form-control" placeholder="Email" disabled />
<button id="email-verification" type="submit" asp-page-handler="SendVerificationEmail" class="btn btn-link">Send verification email</button>
</div>
</div>
}
<div class="form-floating mb-3">
<div class="input-group">
<input asp-for="Input.NewEmail" class="form-control" autocomplete="email" placeholder="New Email" aria-required="true" />
</div>
<span asp-validation-for="Input.NewEmail" class="text-danger"></span>
</div>
<partial name="_StatusMessage" for="StatusMessage" />
<div class="row">
<div class="col-12">
<button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="btn btn-primary btn-block">Change Email</button>
</div>
<!-- /.col -->
</div>
</form>
<p class="mt-3 mb-1">
<a asp-controller="Home" asp-action="Index">Back to Dashboard</a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="../../dist/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../dist/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
</body>
</html>
Also, here the _Layout.cshtml in Areas/Identity/Pages/Account/Manage
@{
if (ViewData.TryGetValue("ParentLayout", out var parentLayout))
{
Layout = (string)parentLayout;
}
else
{
Layout = "/Areas/Identity/Pages/_Layout.cshtml";
}
}
<div class="col-md-12">
@RenderBody()
</div>
@section Scripts {
@RenderSection("Scripts", required: false)
}
Additionally, the _Layout page references Layout = "/Areas/Identity/Pages/_Layout.cshtml"; , but I can't find this file in my project. Also, I tried switching the lines in this Layout file to reference my custom Layout /Views/Shared/_Layout.cshtml, but the styling did not work correctly.
If someone could help me figure out why the styling does not work on the email and password nav pages, that would be great! Thank you so much.
Solution
Answering this for any people with the same issue. Adding the _ViewStart file did not work, and neither did other solutions that I found on similar posts. As a workaround, I moved the Email and Password change files to a different location in the identity folder and then it was able to work
Answered By - Ryan Tobin
