сделать частичное представление на той же странице - PullRequest
Новая
       12

сделать частичное представление на той же странице

0 голосов
/ 09 мая 2018

В моей панели навигации у меня есть Поиск 

 <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 - в другом проекте.

Я хочу вернуть модальное сообщение на той же странице .... Но сейчас его переход на другую страницу и навигация на этой странице пропала.

Есть идеи, как это сделать? Я попытался использовать Визуализировать частичное представление внутри модального всплывающего окна Jquery поверх родительского представления , но у меня не сработало.

1 Ответ

0 голосов
/ 09 мая 2018

Команда 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. Обратите внимание, что если вы выполняете ajax-вызов другого проекта с другим URL-адресом и / или портом, вам, возможно, придется настроить другой проект для приема запросов CORS.

...