0

我现在在 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 来拦截列表上的点击事件并捕获从动作返回的数据，并将其注入到 div 中：

$(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()调用中生成的内容时。我尝试将控制器方法更改为 have return PartialView("Index");，但它给出了相同的结果。有没有办法让我只取回那部分视图？还是有一些更清洁、更“MVC”的方式来解决这个问题？

4

1 回答 1

1

最好的选择实际上是从单独的控制器操作中返回您的部分视图。所以，我会改变一些事情来让它工作：

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