How to implement page and access partial view, even with link

Question

I and need direction. I have an ASP.NET Core MVC web app, C#, on .NBET Core.

Initial design:

Initially, there is a layout/main page (which contains the user details, site name and the app selection). Based on this app selection, i display a partial view - menu item (on the left side) and the display the first menu item partial page (in the center).

The issue with this setup was a page reload/refresh will always to the home page and the user cannot access a specific page through URL. To handle this issue, I decided on switching to view/page and having a difficult situation with this. So, app selection in the layout, will load the main page with menu items (partial page) clicking a menu should display a page. There is a page, which has a list of projects.

Clicking this project should show more details on the project. This is another place where I am stuck. This works when I access the project details through the project list but if I use the link - (localhost://app/page/action?Param) localhost://app/projectlist/projectdetails?Param, I only get the partial view with no design and I do not see the layout.

Another option I thought of is, localhost://app/page1/page2/action?Param localhost://app/projectlist/projectdetails/index?Param, but I am not a fan of the url, page/page/action.

Any help or guidance will be much appreciated.

public class ProjectsController : Controller
{
     private readonly IAllProjectsServices services;

     public ProjectsController(IAllProjectsServices _services)
     {
         services = _services;
     }

     public IActionResult Index()
     {
             var projectsList = services.GetProjectTypes(); //get project types 

             //return PartialView(allProjectsModel); //return partial view
             return View(projectsList);
     }

     public IActionResult GetDetails(int projectid)
     {
         var resultSet = services.GetResultSet(projectid); //get the result set, project details
         return PartialView("~/Views/ProjectList/_ProjectDetailsPartial.cshtml", resultSet); //return partial view with object
     }
}

I have tried to move the partial page to page. I moved an action to a page, don't like this option

Answer 1

You could try below code to display the pretrial view and maintain the url structure.

Js/site.js:

function loadProjectDetails(projectId) {
    $.ajax({
        url: '/Projects/GetDetails?id=' + projectId,
        type: 'GET',
        success: function (data) {
            $('#projectDetails').html(data); // Load partial view content
        },
        error: function () {
            alert('Failed to load project details.');
        }
    });
}

ProjectsController.cs:

using Microsoft.AspNetCore.Mvc;
using WebApplication2.Models;

namespace WebApplication2.Controllers
{
    public class ProjectsController : Controller
    {
        private static readonly List<ProjectModel> _projects = new List<ProjectModel>
        {
            new ProjectModel { Id = 1, Name = "User Login", Stakeholder = "Otto", Description = "Create a user login portal." },
            new ProjectModel { Id = 2, Name = "Log Hours", Stakeholder = "Thornton", Description = "Develop log hours functionality." },
            new ProjectModel { Id = 3, Name = "Feedback Portal", Stakeholder = "the Bird", Description = "Implement feedback submission system." }
        };
        public IActionResult Index()
        {
            return View(_projects);
        }
        public IActionResult GetDetails(int id)
        {
            var project = _projects.FirstOrDefault(p => p.Id == id);
            if (project == null) return NotFound();
            if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
            {
                return PartialView("_ProjectDetailsPartial", project); // Return partial view for AJAX
            }
            return View("ProjectDetails", project); // Full view for direct URL access
        }

    }
}

Views/Projects/_ProjectDetailsPartial.cshtml:

@model WebApplication2.Models.ProjectModel
<h3>Project Details</h3>
<p><strong>Name:</strong> @Model.Name</p>
<p><strong>Stakeholder:</strong> @Model.Stakeholder</p>
<p><strong>Description:</strong> @Model.Description</p>

Views/Projects/Index.cshtml:

@model List<WebApplication2.Models.ProjectModel>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Projects List</h2>
<table>
    <tr>
        <th>Project Number</th>
        <th>Project Name</th>
        <th>Stakeholder</th>
    </tr>
    @foreach (var project in Model)
    {
        <tr>
            <td>@project.Id</td>
            <td>
                <a href="javascript:void(0)" onclick="loadProjectDetails(@project.Id)">
                    @project.Name
                </a>
            </td>
            <td>@project.Stakeholder</td>
        </tr>
    }
</table>
<!-- Placeholder for Partial View -->
<div id="projectDetails"></div>

Views/Projects/ProjectDetails.cshtml:

@model WebApplication2.Models.ProjectModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Project Details</h2>
<p><strong>Name:</strong> @Model.Name</p>
<p><strong>Stakeholder:</strong> @Model.Stakeholder</p>
<p><strong>Description:</strong> @Model.Description</p>

Program.cs:

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();