En utilisant Bootstrap fenêtre Modale comme PartialView
J'ai été à la recherche à l'aide de la Twitter Bootstrap fenêtres Modales qu'une vue partielle. Cependant, je ne pense pas vraiment qu'il a été conçu pour être utilisé dans ce mode, il semble comme il a été conçu pour être utilisé dans un assez statique de la mode. Néanmoins, je pense qu'il serait cool de pouvoir l'utiliser comme une vue partielle.
Ainsi, par exemple, disons que j'ai une liste de Jeux. En cliquant sur un lien pour un jeu donné, je voudrais demander des données à partir du serveur, puis afficher les informations sur ce jeu dans une fenêtre modale "over the top" de la présente page.
J'ai fait un peu de recherche et a trouvé ce post qui est similaire mais pas tout à fait la même.
Quelqu'un a déjà essayé cela avec succès ou l'échec? Quelqu'un a quelque chose sur jsFiddle ou de certaines sources, ils seraient disposés à partager?
Merci pour votre aide.
Vous devez vous connecter pour publier un commentaire.
Oui nous l'avons fait.
Dans votre Index.cshtml vous aurez quelque chose comme..
Ensuite en JS pour la même page (inline ou dans un fichier séparé, vous aurez quelque chose comme ça..
Avec une méthode sur votre contrôleur qui ressemble à ceci..
Vous aurez bien sûr besoin d'une vue appelée GetGameListing.cshtml à l'intérieur de votre dossier de Vues..
[ChildActionOnly]
?Je le fais avec mustache.js et modèles (vous pouvez utiliser n'importe quel JavaScript template library).
De mon point de vue, j'ai quelque chose comme ceci:
...ce qui me permet de garder mes modèles dans une vue partielle appelé
Modal.ascx
:- Je créer des espaces réservés pour chaque modal de mon point de vue:
...et de faire des appels ajax avec jQuery:
Ensuite, vous avez juste besoin d'un déclencheur quelque part:
J'ai réalisé cela en utilisant un bel exemple, j'ai trouvé ici.
J'ai remplacé le jquery boîte de dialogue utilisée dans cet exemple avec Twitter Bootstrap fenêtres Modales.
Complet et clair exemple de projet
http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals
Il affiche de créer, modifier et supprimer une entité fonctionnement des modaux avec bootstrap et inclut également le code pour gérer raison retourné à partir de ceux de l'entité de l'exploitation (c#, JSON, javascript)
J'utilise AJAX pour ce faire. Vous avez votre partielles avec votre typique twitter modal modèle html:
Alors vous avez votre méthode de contrôleur, j'utilise JSON et ont une classe personnalisée qui rendors la vue à une chaîne. Je fais ce que je peux utiliser plusieurs ajax mises à jour sur l'écran avec un appel ajax. Référence: Exemple mais vous pouvez utiliser un PartialViewResult/ActionResult sur retour si vous êtes tout simplement faire un appel. Je vais le montrer à l'aide de JSON..
Et la Méthode JSON dans le Contrôleur:
Et puis, dans la vue à l'aide de votre modal: Vous pouvez créer un package de l'AJAX dans vos partielle et call @{Html.RenderPartial... Ou vous pouvez avoir un espace réservé avec un div:
alors votre ajax:
Ensuite sur le bouton de votre modal:
Mettre le modal et le code javascript dans la vue partielle. Appelez ensuite la vue partielle de votre page.
Cela permettra de gérer la soumission d'un formulaire trop.
Vue Partielle
Javascript
Alors il suffit d'appeler votre partielles à l'intérieur de la forme de votre page.
Créer.cshtml