Question

我现在在ASP.NET MVC3中设置了一个站点，但所有内容的布局都针对移动设备进行了优化。

我现在想将一些现有视图组合在一起，以利用桌面浏览器或平板电脑中的额外屏幕空间。

我现在有两个视图，一个显示链接列表，另一个显示每个链接生成的一些内容;这两个视图都由单独的控制器处理。这是列表视图（简化）。它使用布局页面，因此这是在布局中调用@RenderBody()时显示的内容（我的第二个视图也是这样，具有相同的布局文件）。

@model IEnumerable<CommandCenterEntity>
@{
    if (Request.Browser.IsMobileDevice) {
        Layout = "~/Views/Shared/_LayoutMobileContent.cshtml";
    }
    else {
        Layout = "~/Views/Shared/_LayoutDesktop.cshtml";
    }
}
<ul data-role="listview" id="commandcenterlist" data-filter="true" data-inset="true" data-theme="b">
    @foreach (var entity in Model)
    {
    <li>
        @Html.CommandCenterLinks(@entity, x => Url.Action("Index", "Worksheet", new { ParentId = @entity.ID_Item }))
    </li>
    }
</ul>

CommandCenterLinks助手只会根据实体的某些属性生成包含不同图标的“a”标记。

我希望以这样一种方式组合我的视图：当我单击列表中的一个链接（位于屏幕左侧的div标签中）时，生成的内容将显示在单独的div标签上右边。

我希望我可以重复使用移动布局中使用的相同动作/控制器，所以我尝试使用jQuery拦截列表中的click事件并捕获从动作返回的数据，并将其注入div： / p>

$(document).on("click", "#commandcenterlist a", function (e) {
    $.mobile.showPageLoadingMsg();        
    $.ajax({
        url: this.href,
        success: function (data) {
            $.mobile.hidePageLoadingMsg();
            $("#desktopContentPane").html(data);
        }
    });
    return false;
});

但是，我在ajax成功处理程序中返回的数据包含完整的html页面，

<!DOCTYPE html> 
<html> 
    <head>...</head>
    <body>...</body>
</html>

...当我想要的只是在布局的@RenderBody()调用中生成的内容。我尝试将控制器方法更改为return PartialView("Index");，但它给出了相同的结果。有没有办法让我只回到视图的那一部分？或者是否有更清洁，更“MVC”的方式来解决这个问题？

Answer 1

最好的选择是从单独的控制器操作返回部分视图。所以，我会改变一些事情来使其发挥作用：

获取您要共享的内容（无论您想在桌面div中显示什么内容），并将其放在局部视图中。
创建一个控制器操作，该操作仅返回此部分视图（使用PartialView方法并传入部分视图名称），并从桌面版本的javascript中调用它。
针对移动版本，您可以使用RenderPartial方法在移动页面中包含部分视图中的内容。

在ASP.NET MVC3中将多个视图组合在一起

1 个答案: