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

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 的布局文件在不同的项目中。我想在同一页面上返回模态......但是现在它转到不同的页面并且导航在该页面上消失了。关于如何做到这一点的任何想法？

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 请求。