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

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 的布局文件在不同的项目中。

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

关于如何做到这一点有什么想法吗？我尝试使用 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");
            }
        });
});

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

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

render partial view on same page

javascript

c#

ajax

asp.net-mvc

asp.net-mvc-partialview