javascript - Ctrl+单击呈现局部 View 的链接

Question

我得到了一个使用 AJAX 呈现局部 View 的链接。

这是我的链接代码:

<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 的情况下单击它时没问题，部分 View 呈现到我的 div 中。但是当我用 CTRL 键单击它时，局部 View 呈现到当前选项卡中，然后另一个选项卡在索引页面打开。

当我右键单击链接并选择在另一个选项卡中打开它时，当前选项卡没有任何反应，新选项卡在索引页面打开。

那么，有什么办法可以解决吗？

Answer 1

我找到了很好的解决方案，所以我根据这个解决方案修改了项目:Make an MVC Application into a SPA with AJAX and History.js

1) 使 Controller 方法返回 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 中为 View 创建容器

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

5) 像这样准备 helper 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 文件包含到包中!