如何实现页面并访问部分视图，即使有链接

Question

我需要指导。我在 .NBET Core 上有一个 ASP.NET Core MVC Web 应用程序，C#。

初步设计：

最初有一个布局/主页（其中包含用户详细信息、站点名称和应用程序选择）。基于此应用程序选择，我显示部分视图 - 菜单项（在左侧）并显示第一个菜单项部分页面（在中心）。

此设置的问题是页面重新加载/刷新将始终到主页，并且用户无法通过 URL 访问特定页面。为了解决这个问题，我决定切换到视图/页面，但遇到了困难。因此，在布局中选择应用程序，将加载带有菜单项（部分页面）的主页面，单击菜单应显示一个页面。有一个页面，其中有项目列表。

单击该项目应显示该项目的更多详细信息。这是我被困住的另一个地方。当我通过项目列表访问项目详细信息时，这是有效的，但如果我使用链接 - (

localhost://app/page/action?Param

)

localhost://app/projectlist/projectdetails?Param

，我只能获得没有设计的部分视图，并且看不到布局。

我想到的另一个选择是，

localhost://app/page1/page2/action?Param

localhost://app/projectlist/projectdetails/index?Param

，但我不喜欢这个网址，

page/page/action

。

任何帮助或指导将不胜感激。

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
     }
}

我尝试将部分页面移动到页面。我将一个操作移至页面，不喜欢这个选项

Answer 1

您可以尝试下面的代码来显示预审视图并维护 url 结构。

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
        }

    }
}

视图/项目/_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>

视图/项目/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>

视图/项目/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>

程序.cs：

app.UseRouting();

app.UseAuthorization();

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

app.Run();