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

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) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var url = '@Url.Action("Search", "Search")';&nbsp; &nbsp; $.ajax(&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "GET",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'Search/Search',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Error");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });});注意，如果您在不同的 URL 和/或端口对另一个项目进行 ajax 调用，您可能必须设置另一个项目以接受 CORS 请求。