在同一页面上呈现部分视图

Question

在我的导航栏中，我有 搜索

 <li><a href="#" class="callSearch">Search </a></li>

我正在做 Ajax 调用，去不同的项目控制器

 $(".callSearch").click(function (e) {
    e.preventDefault();

    var url = '@Url.Action("Search", "Search")';
    $.ajax(
        {
            type: "GET",
            url: 'Search/Search',
            //dataType: "json",
            success: function () {
                window.location = "https://localhost:xxx/Search/Search";
            },
            error: function () {
                alert("Error");
            }
        });

});

控制器

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

通过此代码，我发布了部分视图在新页面中打开。搜索控制器在不同的项目中，布局文件有导航和js在不同的项目中。

我想在同一页面上返回模态......但是现在它转到不同的页面并且导航在该页面上消失了。

关于如何做到这一点的任何想法？我尝试使用Render a partial view inside a Jquery modal popup on top of a parent view，但对我不起作用。

Answer 1

window.location 命令使您的浏览器导航到由给定 URL 指定的新位置。

而是选择页面上您希望注入部分内容的现有元素，并将该元素的innerHTML 属性设置为响应的内容。例如假设你有一个像这样的现有 div：

<div id="results"></div>

然后，在你的 JavaScript 中你可以这样做：

$(".callSearch").click(function (e) {
    e.preventDefault();

    var url = '@Url.Action("Search", "Search")';
    $.ajax(
        {
            type: "GET",
            url: 'Search/Search',
            dataType: "html",
            success: function (response) {
                $("#results").html(response); //set the HTML content of the "results" div to be the response from the server, which contains the HTML generated by execution of the partial view
            },
            error: function () {
                alert("Error");
            }
        });
});

注意请注意，如果您在不同的 URL 和/或端口对另一个项目进行 ajax 调用，您可能必须设置另一个项目以接受 CORS 请求。