Ctrl + Нажмите на ссылку, которая отображает частичный вид

Question

У меня есть ссылка, которая отображает частичный вид с помощью AJAX.

Вот мой ссылка Код:

<a href="#" onclick="LoadChildCategories(@i.CategoryId, 
    @i.IsTrading.ToString().ToLower())">@i.Name</a> 

А вот LoadChildCategories код функции:

function LoadChildCategories(id, isTrading) { 
    var link; 
    if (isTrading === false) { 
     link = '@Html.Raw(@Url.Action("NonTradingCategories", "Home", 
       new {categoryId = -1}))'; 
    } else { 
     link = '@Html.Raw(@Url.Action("ModelList", "Home", new {categoryId = -1}))'; 
    } 
    link = link.replace("-1", id); 

    $.ajax({ 
     url: link, 
     method: 'GET', 
     success: function(data) { 
      $("#viewPartial").html(data); 
     } 
    }); 
} 

Когда я нажимаю без CTRL это нормально, частичный вид делает в моих дела. Но когда я нажимаю его с частичным представлением CTRL, отображается на текущую вкладку, а затем открывается другая вкладка на странице Index.

И когда я правильно переключаюсь по ссылке и выбираю, чтобы открыть ее на другой вкладке, на текущей вкладке ничего не происходит, и новая вкладка открывается на странице Индекса.

Итак, есть ли способы справиться с этим?

Answer 1

я нашел довольно красивое решение, поэтому я изменил проект в соответствии с этим решением: Make an MVC Application into a SPA with AJAX and History.js

1) Make методов контроллера возврата View, не PartialView и добавить одну строку кода, чем будет проверять действительно ли это запрос AJAX:

public ViewResult Category(int id) 
    { 
     ViewBag.IsAjaxRequest = Request.IsAjaxRequest(); 
     var node = CategoriesHandler.Instance.First(x => x.CategoryId == id); 
     var childCategories = CategoriesHandler.Instance.Where(x => x.ParentId == node.Id).ToList(); 
     ViewBag.Message = node.Name; 
     return View(childCategories); 
    } 

2) Редактировать _ViewStart.cshtml так:

@{ 
Layout = ViewContext.ViewBag.IsAjaxRequest == true ? null : "~/Views/Shared/_Layout.cshtml"; 
} 

3) Подготовка ссылки для управления через AJAX:

<a href="@Url.Action("Category", "Intech", new { id = i.CategoryId })" class="ajaxLink" data-href="@Url.Action("Category", "Intech", new { id = i.CategoryId })" data-title="@i.Name">@i.Name</a> 

4) Создать контейнер для представлений на _Layout.cshtml

@/*Some layout stuff*/ 
<div id="bodyContent"> 
@RenderBody() 
</div> 
@/*Other layout stuff*/ 

5) Подготовка помощника файла JavaScript так:

$(function() { 

var contentShell = $('#bodyContent'); 

var History = window.History, State = History.getState(); 

$(".ajaxLink").on('click', function (e) { 
    e.preventDefault(); 
    var url = $(this).data('href'); 
    var title = $(this).data('title'); 
    History.pushState(null, title, url); 
}); 

function navigateToURL(url) { 
    $('#bodyContent').html('<div class="loader"> </div>'); 
    $.ajax({ 
     type: "GET", 
     url: url, 
     dataType: "html", 
     cache: false, 
     success: function (data, status, xhr) { 
      $('#bodyContent').hide(); 
      contentShell.html(data); 
      $('#bodyContent').fadeIn(500); 
     }, 
     error: function (xhr, status, error) { 
      $('#bodyContent').hide(); 
      alert("TEST_Error"); 
     } 
    }); 
} 

History.Adapter.bind(window, 'statechange', function() { 
    State = History.getState(); 
    if (State.url === '') { 
     return; 
    } 
    navigateToURL(State.url); 
});}); 

6) Не забудьте включить ваши JavaScript файлы в пучок!