2012-07-10 3 views
1

J'ai dans ma mise en page la page (Menu + Iframe) et je veux charger un fichier cshtml (pages de vue) dans le iframe après le clic dans le menu. l'objectif est de ne pas charger l'ensemble Mise en page Pagecharge un fichier cshtml (rasoir) dans le iframe

J'ai essayé de cette façon:

<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> 

mais il charge la page entière de mise en page

J'ai eu cette idée d'un autre projet ASP.NET qui utilise le javascript pour charger une page .aspx dans le iframe après le clic dans le 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; 
       }); 
      }); 

Tous des idées?

+1

Votre fichier cshtml renvoie la page mise en page? Si possible, essayez d'utiliser une vue partielle plutôt qu'une page. –

+0

Oui, la page cshtml fait référence à la page de disposition. Je vais essayer votre idée. –

Répondre

1

Vous devez pointer l'attribut "src" de l'iframe vers une action du contrôleur qui renvoie la vue.

Par ex.

action qui retourne la vue partielle sans mise en page

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

Javascript

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

Vous avez besoin d'une disposition différente pour la page que vous chargez dans l'iframe.
Ensuite, dans cette page, vous pouvez faire

@{ 
    Layout = "YourLayout.cshtml"; 
} 

Par défaut, toutes vos vues de cshtml utilisent la disposition prévue dans la

EDIT
Vous pouvez utiliser le concept suivant:

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

Vous donnez un nom à votre iframe, et puis utilisez le nom comme cible pour votre lien d'action. C'est la solution la plus simple. Si vous préférez, vous pouvez également utiliser le gestionnaire de clics jquery, comme indiqué dans l'une des autres réponses.

+0

merci pour la réponse mais comment puis-je charger le fichier cshtml dans l'iframe après le clic dans le menu. –

+0

édité. Bien sûr, votre action dans le contrôleur ("GetUsers") est supposée renvoyer la vue attendue, qui utilise l'autre disposition. – YavgenyP

+0

merci beaucoup :) –

1

Charger la vue à l'aide d'une méthode d'action. Dans ce point de vue, définissez la valeur de la mise en page à null pour qu'il utilise la coutume layour définie dans viewstart.cshtml

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

EDIT: Pas tout à fait sûr de ce que vous voulez atteindre. Mais si vous voulez mettre à jour le contenu Iframe dans la mise en page que vous pouvez faire comme ceci

En supposant que votre Layout.cshtml est comme ce

<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> 

maintenant la méthode d'action GetUsers dans votre contrôleur Utilisateurs

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

et assurez-vous que dans la vue GetUsers.cshtml, la disposition est définie sur null

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

merci pour la réponse mais comment puis-je charger le fichier cshtml dans l'iframe après le clic dans le menu. comme l'exemple que je montre ci-dessus avec le formulaire web asp.net –

+0

@OthmaneByMe: Voir ma réponse mise à jour – Shyju

Questions connexes