javascriptcssasp.net-mvcasp.net-coreasp.net-identity
MVC Identity Manage Nav pages not working with bootstrap styling?
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
- Chunk downloading of the big files right to the hard drive
- My custom CSS transition animation is not working on hover after I added AOS JS library
- how to get the Google analytics client ID
- Toggle vue-multiselect close/open on button click
- Best way to filter an objects's properties for data
- Passing function with arguments as a prop and invoking it internally in React
- Outlook calendar don't render with FullCalendar
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- How to clear react native webview cookies?
- Skipping a test in Cypress conditionally
- How can I get all the HTML in a document or node containing shadowRoot elements
- Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- Is there is a C# function which is similar to .Map() in JavaScript?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I test a Node.JS Script that is not a module and runs as soon as it's called?
- Set element width based on a string that is not in the element
- Testing JavaScript Written for the Browser in Node JS
- Where are the trailing commas coming from in these radio buttons?
- How to verify a signature from the Phantom wallet?
- How to get the value of a Google Chrome flag using Javascript
- event.preventDefault cannot block clipboard paste in chatgpt.com prompt box
- Should I use ref or findDOMNode to get react root dom node of an element?
- Disable button for 5 seconds with different label and change after it
- JavaScript - Get all but last item in array
- React-Redux: Should all component states be kept in Redux Store
- Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?
- Capture selected option returns not defined instead
- Uncaught TypeError: matchExpr[type].exec is not a function