如何在当前页面加载跨项目Partial View并以模态框展示？

你的核心问题在于当前Ajax请求成功后直接跳转到了新页面，再加上跨项目的跨域限制，导致模态框加载方案失效。下面是一步步的可行解决方案：

1. 在当前页面添加模态框基础容器 #

首先在你导航栏所在的页面（或布局文件）中，加入一个隐藏的模态框容器（这里以Bootstrap模态框为例，用其他UI框架可对应调整）：

<!-- 模态框容器，初始隐藏 -->
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content" id="searchModalContent">
      <!-- Partial View的内容会插入到这里 -->
    </div>
  </div>
</div>

2. 修改Ajax请求逻辑，加载内容到模态框 #

你之前的Ajax成功回调直接跳转到新页面，这完全偏离了模态框加载的逻辑。我们需要获取Partial View的HTML内容，插入到模态框后再显示它，同时要处理跨项目的跨域问题：

$(".callSearch").click(function (e) {
    e.preventDefault();
    // 注意：这里必须写Search项目的完整URL，因为是跨项目请求
    const searchApiUrl = "https://localhost:xxx/Search/Search";
    
    $.ajax({
        type: "GET",
        url: searchApiUrl,
        success: function (partialHtml) {
            // 将返回的Partial View HTML插入模态框
            $("#searchModalContent").html(partialHtml);
            // 显示模态框
            $("#searchModal").modal("show");
        },
        error: function (xhr, status, err) {
            console.error("加载搜索组件失败:", err);
            alert("搜索功能加载失败，请稍后重试");
        }
    });
});

3. 配置跨域（CORS）支持 #

因为两个项目属于不同源（端口/域名不同），浏览器会阻止跨域Ajax请求，必须在Search项目的后端配置CORS：

ASP.NET MVC中的配置步骤： #

1. 先安装CORS包：

Install-Package Microsoft.AspNet.Cors

2. 在Global.asax.cs的Application_Start中注册CORS：

using System.Web.Cors;
using System.Web.Mvc;

protected void Application_Start()
{
    // 配置CORS策略，建议指定你的主项目域名而非AllowAnyOrigin（更安全）
    var corsPolicy = new CorsPolicy
    {
        AllowAnyMethod = true,
        AllowAnyHeader = true,
        Origins = { "https://localhost:yyy" } // 替换成你主项目的URL
    };

    var corsOptions = new CorsOptions
    {
        PolicyProvider = new CorsPolicyProvider
        {
            PolicyResolver = context => Task.FromResult(corsPolicy)
        }
    };

    GlobalConfiguration.Configuration.EnableCors(corsOptions);
    
    // 其他初始化代码...
}

3. 在Search控制器上添加[EnableCors]特性：

[HttpGet]
[EnableCors]
public ActionResult Search()
{
    return PartialView("~/Views/Search/_Search.cshtml");
}

4. 确保Partial View不包含布局 #

你的_Search.cshtml必须取消布局引用，避免模态框里混入完整页面结构（比如导航栏），在Partial View顶部添加：

@{
    Layout = null;
}

为什么之前的方案失败？ #

• 你之前的Ajax成功回调直接用window.location跳转，完全跳过了模态框加载逻辑；
• 忽略了跨域限制，导致Ajax请求被浏览器拦截；
• 没有准备好承载Partial View的模态框容器，无法将返回的HTML插入当前页面。

内容的提问来源于stack exchange，提问作者noor