在 iframe 中加载一个 cshtml 文件（剃刀）答案

【问题标题】：load a cshtml file (razor) in the iframe在 iframe 中加载一个 cshtml 文件（剃刀）
【发布时间】：2012-07-10 14:31:52
【问题描述】：

我的布局页面中有（菜单 + Iframe）我想在菜单中单击后在 iframe 中加载一个 cshtml 文件（查看页面）。目标不是加载整个布局页面

我试过这样：

<ul id="qm0" class="qmmc">
    <li><a class="qmparent" >FILES</a>
        <ul class="rgauche">
                <li>@Html.ActionLink("USERS","getUsers")</li>   
                <li><a id="disconnect">Deconnexion</a></li>                              
             </ul>
    </li>
</ul>

但它会加载整个布局页面

我从另一个 ASP.NET 项目中获得了这个想法，该项目在单击菜单后使用 javascript 在 iframe 中加载 .aspx 页面

 <ul id="qm0" class="qmmc">
        <li><a class="qmparent" >FILES</a>
            <ul class="rgauche">
                    <li><a id="getuser">USERS</a></li>   
                    <li><a id="disconnect">Deconnexion</a></li>                              
                 </ul>
        </li>
    </ul>


            $(function () {

                $('#getuser').click(function () {
                    document.getElementById('myIframe').src = "users.aspx";
                    return false;
                });
            });

有什么想法吗？

【问题讨论】：

您的 cshtml 文件是否引用了布局页面？如果可能，请尝试使用部分视图而不是页面。
是的，cshtml页面指的是布局页面。我会试试你的想法。

标签： javascript asp.net-mvc-3 iframe razor

【解决方案1】：

您必须将 iframe 的“src”属性指向返回视图的控制器操作。

例如

返回不带布局的局部视图的操作

public PartialViewResult IframeAction()
{
   return PartialView();
}

Javascript

$('#getuser').click(function () 
{                     
    document.getElementById('myIframe').src 
          = "/IframeController/IframeAction";                     
    return false;                 
});

【讨论】：

【解决方案2】：

通过操作方法加载视图。在此视图中，将 Layout 值设置为 null，以便它不会使用 viewstart.cshtml 中定义的布局

@{
  Layout=null;
}
<p>some partial view content</p>

编辑： 不太确定你想要实现什么。但是如果你想更新布局内的 iframe 内容，你可以这样做

假设你的Layout.cshtml 是这样的

<head>
    //Load jQuery library
</head>

<body>
 @Html.ActionLink("List", "GetUsers", "Users", null, new { @class = "iframable" })
 <iframe id="ifrm" style="width:500px; height:200px; border:1px solid black;">
 </iframe>

@RenderBody()

<script type="text/javascript">
    $(function () {
        $(".iframable").click(function (e) {
            e.preventDefault();
            var item = $(this);
            $("#ifrm").attr('src', item.attr("href"));
        });
    });
</script>

现在在您的用户控制器中拥有GetUsers 操作方法

public ActionResult GetUsers()
{
      return View();
}

并确保在GetUsers.cshtml 视图中，布局设置为空

@{
  Layout=null;
}
<p>some partial view content</p>

【讨论】：

感谢您的回复，但如何在单击菜单后将 cshtml 文件加载到 iframe 中。就像我上面展示的 web 表单 asp.net 的例子一样

【解决方案3】：

您在 iframe 中加载的页面需要不同的布局。
然后，在这个页面中，你可以做

@{
   Layout = "YourLayout.cshtml";
}

默认情况下，您的所有 cshtml 视图都使用 _ViewStart.cshtml 中提供的布局

编辑
您可以使用以下概念：

<iframe name="my_frame"></iframe>
@Html.ActionLink("Users", "GetUsers", null, new { target = "my_frame" })

您为 iframe 命名，然后将该名称用作操作链接的目标。那是最简单的解决方案。如果您愿意，也可以使用 jquery click handler，如其他答案之一中提供的那样。

【讨论】：

感谢您的回复，但是如何在单击菜单后将 cshtml 文件加载到 iframe 中。
已编辑。当然，您在控制器中的操作（“GetUsers”）应该返回使用其他布局的预期视图。