I have in my Layout page (Menu + Iframe) and i want to load a cshtml files (view pages) in the iframe after the click in the menu. the goal is not to load the entire Layout page
I tried this way:
<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>
but it loads the entire layout page
I had this idea from another ASP.NET project that uses javascript to load a .aspx page in the iframe after the click on the menu
<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;
});
});
Any ideas ?
I have in my Layout page (Menu + Iframe) and i want to load a cshtml files (view pages) in the iframe after the click in the menu. the goal is not to load the entire Layout page
I tried this way:
<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>
but it loads the entire layout page
I had this idea from another ASP.NET project that uses javascript to load a .aspx page in the iframe after the click on the menu
<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;
});
});
Any ideas ?
Share Improve this question edited Jul 10, 2012 at 14:49 Othmane ByMe asked Jul 10, 2012 at 14:31 Othmane ByMeOthmane ByMe 231 gold badge1 silver badge5 bronze badges 2- 1 Is your cshtml file referring the Layout page? If possible try using a partial view rather than a page. – Siva Gopal Commented Jul 10, 2012 at 14:57
- Yes, the cshtml page refer to the layout page. I will try your idea. – Othmane ByMe Commented Jul 10, 2012 at 15:07
3 Answers
Reset to default 1You have to point the "src" attribute of the iframe to a controller action that returns the view.
For ex.
Action that returns the partial view without layout
public PartialViewResult IframeAction()
{
return PartialView();
}
Javascript
$('#getuser').click(function ()
{
document.getElementById('myIframe').src
= "/IframeController/IframeAction";
return false;
});
Load the view thru an action method. In this view, set the Layout value to null so that it wont use the layour defined in viewstart.cshtml
@{
Layout=null;
}
<p>some partial view content</p>
EDIT : Not quite sure what you want to achieve. But If you want to update the Iframe content inside the Layout you can do like this
Assuming your Layout.cshtml is like this
<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>
Now have the GetUsers action method in your Users controller
public ActionResult GetUsers()
{
return View();
}
and make sure in the GetUsers.cshtml view, the layout is set to null
@{
Layout=null;
}
<p>some partial view content</p>
you need a different layout for the page you are loading within the iframe.
Then, within this page, you can do
@{
Layout = "YourLayout.cshtml";
}
By default all your cshtml views are using the layout provided in the _ViewStart.cshtml
EDIT
You can use the following concept:
<iframe name="my_frame"></iframe>
@Html.ActionLink("Users", "GetUsers", null, new { target = "my_frame" })
You give your iframe a name, and then use the name as the target for your action link. Thats the simplest solution. if you prefer, you can also use jquery click handler, as provided in one of the other answers.