CODEWITHSUNDEEP
javascriptasp.net-mvc-3iframerazor
Othmane ByMe
Othmane ByMe

Reputation: 23

load a cshtml file (razor) in the iframe

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 ?

Upvotes: 1

Views: 11236

Answers (3)

Shyju
Shyju

Reputation: 218962

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>

Upvotes: 1

YavgenyP
YavgenyP

Reputation: 2123

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.

Upvotes: 0

VJAI
VJAI

Reputation: 32768

You 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;                 
});

Upvotes: 1

Related Questions