En utilisant Bootstrap fenêtre Modale comme PartialView

Question

J'ai été à la recherche à l'aide du 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.

Answer 1

Oui nous l'avons fait.

Dans votre Index.cshtml vous aurez quelque chose comme..

<div id='gameModal' class='modal hide fade in' data-url='@Url.Action("GetGameListing")'>
   <div id='gameContainer'>
   </div>
</div>

<button id='showGame'>Show Game Listing</button>

Ensuite en JS pour la même page (inline ou dans un fichier séparé, vous aurez quelque chose comme ça..

$(document).ready(function() {
   $('#showGame').click(function() {
        var url = $('#gameModal').data('url');

        $.get(url, function(data) {
            $('#gameContainer').html(data);

            $('#gameModal').modal('show');
        });
   });
});

Avec une méthode sur votre contrôleur qui ressemble à ceci..

[HttpGet]
public ActionResult GetGameListing()
{
   var model = // do whatever you need to get your model
   return PartialView(model);
}

Vous aurez bien sûr besoin d'une vue appelée GetGameListing.cshtml à l'intérieur de votre dossier de Vues..

Answer 2

Je le fais avec mustache.js et les modèles (vous pouvez utiliser n'importe quel JavaScript template library).

De mon point de vue, j'ai quelque chose comme ceci:

<script type="text/x-mustache-template" id="modalTemplate">
    <%Html.RenderPartial("Modal");%>
</script>

...ce qui me permet de garder mes modèles dans une vue partielle appelés Modal.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    <div>
        <div class="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
            <h3>{{Name}}</h3>
        </div>
        <div class="modal-body">
            <table class="table table-striped table-condensed">
                <tbody>
                    <tr><td>ID</td><td>{{Id}}</td></tr>
                    <tr><td>Name</td><td>{{Name}}</td></tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <a class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>

Je créer des espaces réservés pour chaque modal de mon point de vue:

<%foreach (var item in Model) {%>
    <div data-id="<%=Html.Encode(item.Id)%>"
         id="modelModal<%=Html.Encode(item.Id)%>" 
         class="modal hide fade">
    </div>
<%}%>

...et de faire des appels ajax avec jQuery:

<script type="text/javascript">
    var modalTemplate = $("#modalTemplate").html()
    $(".modal[data-id]").each(function() {
        var $this = $(this)
        var id = $this.attr("data-id")
        $this.on("show", function() {
            if ($this.html()) return
            $.ajax({
                type: "POST",
                url: "<%=Url.Action("SomeAction")%>",
                data: { id: id },
                success: function(data) {
                    $this.append(Mustache.to_html(modalTemplate, data))
                }
            })
        })
    })
</script>

Ensuite, vous avez juste besoin d'un déclencheur quelque part:

<%foreach (var item in Model) {%>
    <a data-toggle="modal" href="#modelModal<%=Html.Encode(item.Id)%>">
        <%=Html.Encode(item.DutModel.Name)%>
    </a>
<%}%>

Answer 3

J'ai réalisé cela en utilisant un bel exemple que j'ai trouvé ici. J'ai remplacé le jquery boîte de dialogue utilisée dans cet exemple avec Twitter Bootstrap fenêtres Modales.