Environment: Visual Studio 2022, Version 17.8.3, and ASP.NET Core.
When a user clicks the "Account Settings", the account setting page shall load at "content page" with keeping sidebar and header intact. But below code does not do so.
Below is the scaffolding folder structure
Below is the cshtml
code for "Account Setting" link
<li class="nav-header">Settings</li>
<li class="nav-item">
<a is-active-page asp-area="Identity" asp-page="/Account/Manage/Index" class="nav-link">
<i class="nav-icon fas fa-cogs"></i>
<p>
Account Settings
</p>
</a>
</li>
When I click the "Account settings" entire page refreshes and shows the below screen
BUT I would like to load "manage account" page in the "content page" . I mean sidebar and header shall show always. I understand this is something to do with _Layout
. However I am not able to find the account->manage folder or related pages for customization?
I understand these pages are hidden but where is it? How do I customize so that it fits at "content page" rather than full page view.
Expectation: When user clicks the "Account setting" , account details shall show as below.
After adding scaffold for Manage views, we would get account->manage folder. Then we will have the views listed in our project, and we can custom the content to match your requirement.
right click on the
Area folder -> add -> new scaffolded items... -> choose identity -> pick up the required views
============= Updated ============
Loading the index page within "content" area requires us to modify the layout. I had a change like below within _Layout.cshtml.
<div class="container">
<main role="main" class="pb-3" style="overflow:hidden">
<div style="float:left;width: 200px;background: red;position: sticky;height: 80vh;">
<div>
<a asp-controller="Home" asp-action="Privacy">direct to Privacy</a>
</div>
<div>
<a asp-controller="Home" asp-action="Index">direct to Index</a>
</div>
<div>
<a asp-area="Identity" asp-page="/Account/Manage/Index">direct to account management</a>
</div>
</div>
<div style ="float:left;">
@RenderBody()
</div>
</main>
</div>