Question

我的布局页面（菜单+ 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;
                });
            });

有什么想法吗？

Answer 1

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

@{
  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视图中，布局设置为null

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

Answer 2

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

对于前。

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

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

<强>的Javascript

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

Answer 3

您需要为iframe中加载的网页设置不同的布局。
然后，在此页面中，您可以执行

@{
   Layout = "YourLayout.cshtml";
}

默认情况下，所有cshtml视图都使用_ViewStart.cshtml

中提供的布局

修改
您可以使用以下概念：

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

您为iframe命名，然后使用该名称作为操作链接的目标。这是最简单的解决方案。如果您愿意，还可以使用jquery点击处理程序，如其他答案之一所示。

在iframe中加载cshtml文件（razor）

3 个答案: