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

Combining multiple views together in ASP.NET MVC3

本文关键字：视图 组合 在一起 ASP NET MVC3      更新时间：2023-12-06

我现在在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()调用中生成的内容时。我尝试将控制器方法更改为return PartialView("Index");，但它给出了相同的结果。有没有办法让我只看到那部分景色？或者有没有更干净、更"MVC"的方式来实现这一点？

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

  1. 获取您想要共享的内容（无论您想在div for desktop中显示什么），并将其放在局部视图中
  2. 创建一个只返回此部分视图的控制器操作（使用PartialView方法并传入部分视图名称），并在桌面版本中从javascript调用它
  3. 在移动版本的视图中，可以使用RenderPartial方法将部分视图中的内容包括在移动页面中
相关文章：