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指定的新位置。

而是选择页面上您希望注入partial的内容的某个现有元素，并将该元素的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和/或端口上对另一个项目进行ajax调用，则可能必须设置另一个项目以接受CORS请求。

在同一页面上渲染局部视图

1 个答案: