2009-06-15 6 views
1

Désolé pour la question mal formulée.Rendu des vues partielles (fenêtres modales) dans asp.net MVC

J'espérais obtenir les idées de tout le monde sur la meilleure façon de gérer cela.

J'ai un lien sur une page maître qui lie à un formulaire de contact. Si l'utilisateur a javascript activé, je veux ouvrir le formulaire dans une fenêtre modale en utilisant jQuery. Sinon, l'utilisateur sera simplement dirigé vers la page du formulaire de contact.

Le problème est que lorsque je sers la fenêtre modale, je veux seulement afficher le formulaire de contact - sans le gabarit/page maître environnante. Cependant, dans le cas où le javascript est désactivé, la page du formulaire de contact doit être affichée avec le modèle/la page maître.

Quelle est la meilleure façon de l'implémenter? Actuellement, ma seule idée est d'utiliser javascript pour ajouter une valeur/querystring au lien du formulaire de contact indiquant que javascript est activé. Par exemple, http://www.mysite.com/contact/js ou http://www.mysite.com/contact/?js=enabled. Si javascript est activé, je peux rendre partiellement le formulaire de contact.

Je salue toutes les idées et les liens.

Merci!

Répondre

3

vous pouvez en effet faire bien avec jQuery! Disons que votre formulaire de contact sur votre page de contact est enveloppé dans un div avec id="myContactForm". Vous pouvez combiner un sélecteur (par exemple, '#myContactForm') avec l'URL à partir de laquelle vous voulez charger le contenu. Vous pouvez charger votre formulaire (ou tout autre contenu) directement dans votre page actuelle de différentes façons. Personnellement, je préfère jqModal pour mes besoins de fenêtrage modal, mais vous pouvez le faire avec la méthode jQuery.load elle-même si vous utilisiez autre chose.

Donc, si votre première page est nommée « master.html » et votre formulaire de contact est appelé « contact.html », voici ce que vous pouvez faire à l'intérieur de « master.html »:

<div id="someDiv"> 
    Please <a id="contactLink" href="contact.html">contact us</a> with 
    any questions! 
</div> 
<div id="myModalPlaceholder"> 
    Modal content would go in here; this div is initially hidden. 
</div> 

Cette bien sûr, un lien vers le formulaire de contact si vous n'avez pas javascript. Mais vous voulez extraire juste une partie de "contact.html" et l'afficher sur votre page maître. Voici une idée de la façon dont vous accomplissez votre objectif sur votre page master.html:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#contactLink').click(function() { 
     $('#myModalPlaceholder').load('contact.html #myContactForm'); 
     return false; // cancel the native click event 
    }); 
}); 
</script> 

Remarquez comment il y a un espace séparant l'URL dans la méthode « charge » de la région sur la page cible que vous voulez seulement saisir . Vous pouvez en savoir plus à ce sujet here. Cela va saisir le div #myContactForm de la page contact.html, et l'insérer dans #myModalPlaceHolder div de votre page maître.

Bonne chance!
-Mike

+1

C'est exactement ce dont j'avais besoin, Mike! jQuery ne manque jamais de m'impressionner - je n'avais aucune idée que vous pouviez utiliser un sélecteur jQuery comme ça dans la fonction de chargement. Merci pour votre réponse très complète. – adamisnt

4

Utilisez dans votre contrôleur à la place:

if (Request.IsAjaxRequest()) 
{ 
    return PartialView("PartialViewWithYourForm"); 
} 

return View("FullView"); 

FullView.aspx

... 
<%= Html.RenderPartial("PartialViewWithYourForm") %> 
... 
+0

Merci pour la réponse, eu-ge-ne. J'avais déjà pensé à ça. Cependant, je crois que le plugin jQuery Modal Window (fancybox) fait un appel régulier (non-ajax) à la page du formulaire de contact - donc Request.IsAjaxRequest serait évalué à false. Note: Je viens de faire un test pour m'assurer qu'il est faux. Est-il facile de faire la demande dans une requête ajax? Ou est-ce qu'il y a un autre moyen de le faire? Merci pour votre aide, Adam – adamisnt

Questions connexes