ASP.NET Core 3.1 MVC Views in custom Areas dont have the same design as those in the default one

Question

I am new to ASP and I am creating ASP.NET Core 3.1 MVC application. I just learned about areas and created one named Seller.

I added a controller :

[Area("Seller")]
public class SellerController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

and a view :

<h1>Hello @User.Identity.Name</h1>
<p>Use the menu below or the navigation bar to navigate the site</p>
<ul>
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="Seller" asp-controller="SellerProduct" asp-action="Index">ProductManagement</a>
    </li>
</ul>

Now my problem is that the view looks like this :

Another issue I have is that this line :

<a class="nav-link text-dark" asp-area="Seller" asp-controller="SellerProduct" asp-action="Index">ProductManagement</a>

does not behave like link, but like a text, I mean "ProductManagement" is beeing writen on scree, but if I click it, or hover over it, nothing happens

How can I use the default design that the default pages have, like this one.

Also if it is relevant I call the SellerControler using this line:

<a class="nav-link text-dark" asp-area="Seller" asp-controller="Seller" asp-action="Index">SellerHome</a>

Thank you for the help in advance.

Answer 1

Styling:
You rather need to add Layout to your template or add the _ViewStart.chtml in the Area folder:

In Template:
Layout = "~/Views/Shared/_Layout.cshtml";

Or _ViewStart.chtml (Areas > Seller > Views):

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Answer 2

To share a common layout for the entire app, move the _ViewStart.cshtml from your Views/Shared/_Layout.cshtml to the application root folder.

Refer to https://docs.microsoft.com/en-us/aspnet/core/mvc/controllers/areas?view=aspnetcore-3.1#shared-layout-for-areas-using-the-_viewstartcshtml-file

Another issue I have is that this line : <a class="nav-link text-dark" asp-area="Seller" asp-controller="SellerProduct" asp-action="Index">ProductManagement</a> does not behave like link, but like a text, I mean "ProductManagement" is beeing writen on scree, but if I click it, or hover over it, nothing happens

It is possible that tag helpers do not work as expected, check your /Views/_ViewImports.cshtml to add

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers