Ctrl+单击呈现局部视图的链接答案

【问题标题】：Ctrl+Click on link that renders partial viewCtrl+单击呈现局部视图的链接
【发布时间】：2015-12-12 15:31:27
【问题描述】：

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

当我右键单击链接并选择在另一个选项卡中打开它时，当前选项卡不会发生任何事情，新选项卡会在索引页面打开。

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

【问题讨论】：

这是应该发生的（不要尝试更改浏览器的默认行为）
是的，我知道，但是有什么解决方法可以在新选项卡上呈现部分视图吗？

标签： javascript c# jquery ajax asp.net-mvc

【解决方案1】：

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

1) 让控制器方法返回 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 文件包含在包中！

【讨论】：