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它没关系时，部分视图会渲染到我的div中。但是，当我使用CTRL部分视图单击它时，将渲染到当前选项卡，然后在索引页面打开另一个选项卡。

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

那么，有没有办法解决这个问题？

Answer 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文件包含在捆绑包中！

Ctrl +点击呈现部分视图的链接

1 个答案: