javascript - 在同一页面上渲染部分 View

Question

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

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

我正在进行 Ajax 调用，以转到不同的项目 Controller

 $(".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");
            }
        });

});

Controller

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

使用此代码，我发布了部分 View 在新页面中打开。搜索 Controller 位于不同的项目中，并且具有导航和js的布局文件位于不同的项目中。

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

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

Answer 1

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

而是选择页面上您希望注入(inject)部分内容的某个现有元素，并将该元素的 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 请求。