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

Question

In my navigation bar, I have Search

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

I am making Ajax call, to go to different projects 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");
    }

With this code I posted the partial view is opening in new page. Search controller is in different project and layout file that has navigation and js is in different project.

I want to return the modal on the same page ....But right now its going to different page and navigation is gone on that page.

Any ideas on how to do that? I tried using Render a partial view inside a Jquery modal popup on top of a parent view but didnt work for me.

Answer 1

The window.location command causes your browser to navigate to a new location, as specified by the given URL.

Instead choose some existing element on your page where you wish to inject the contents of the partial, and set the innerHTML property of that element to be the contents of the response. eg let's say you have an existing div somewhere like this:

<div id="results"></div>

Then, in your JavaScript you can do this:

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

NB Note that if you are making an ajax call to another project at a different URL and/or port you may have to setup the other project to accept CORS requests.