web-dev-qa-db-fra.com

Utilisation de Bootstrap La fenêtre modale en tant que PartialView

Je cherchais à utiliser le Twitter Bootstrap Fenêtres modales = comme une vue partielle. Cependant, je ne pense pas vraiment que le logiciel a été conçu pour être utilisé de cette façon; semble être conçu pour être utilisé de façon assez statique, mais je pense que ce serait bien de pouvoir l’utiliser de manière partielle.

Donc, par exemple, disons que j'ai une liste de jeux. Après avoir cliqué sur un lien pour un jeu donné, j'aimerais demander des données au serveur, puis afficher des informations sur ce jeu dans une fenêtre modale "au-dessus de" la page actuelle.

J'ai fait un peu de recherche et trouvé ce post qui est similaire mais pas tout à fait pareil.

Quelqu'un at-il essayé cela avec succès ou échec? Quelqu'un a quelque chose sur jsFiddle ou une source qu'il serait prêt à partager?

Merci de votre aide.

javascriptasp.net-mvctwitter-bootstrapmodal-dialog
63
KWondra

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, dans JS pour la même page (en ligne ou dans un fichier séparé, vous obtiendrez un résultat similaire).

$(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 dans votre dossier Vues.

123
Shane Courtrille

Je le fais avec moustache.js et des modèles (vous pouvez utiliser n'importe quelle bibliothèque de templates JavaScript).

À mon avis, j'ai quelque chose comme ça:

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

... qui me permet de conserver mes modèles dans une vue partielle appelée 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ée des espaces réservés pour chaque modal à mon avis:

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

... et 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>
<%}%>
7
ken

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

4
Flavia Obreja

Exemple de projet complet et clair http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals Il affiche les opérations de création, modification et suppression d'entité modals avec bootstrap et inclut également du code permettant de gérer les résultats renvoyés par ces opérations d'entité (c #, JSON, javascript)

3
Брайков

J'utilise AJAX pour ce faire. Vous avez votre partiel avec votre modèle HTML typique de modal Twitter:

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="LocationNumberModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            &times;
          </button>
          <h4 class="modal-title">
            Serial Numbers
          </h4>
        </div>
        <div class="modal-body">
          <span id="test"></span>
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Ensuite, vous avez votre méthode de contrôleur, j'utilise JSON et une classe personnalisée qui rend la vue en chaîne. Je fais cela pour pouvoir effectuer plusieurs mises à jour ajax à l'écran avec un seul appel ajax. Référence ici: Exemple mais vous pouvez utiliser un PartialViewResult/ActionResult au retour si vous ne faites que l'appel. Je vais le montrer en utilisant JSON ..

Et la méthode JSON dans le contrôleur:

public JsonResult LocationNumberModal(string partNumber = "")
{
  //Business Layer/DAL to get information
  return Json(new {
      LocationModal = ViewUtility.RenderRazorViewToString(this.ControllerContext, "LocationNumberModal.cshtml", new SomeModelObject())
    },
    JsonRequestBehavior.AllowGet
  );
}

Et ensuite, dans la vue utilisant votre modal: Vous pouvez empaqueter le AJAX dans votre partiel et appeler @ {Html.RenderPartial ... ou vous pouvez avoir un espace réservé avec un div:

<div id="LocationNumberModalContainer"></div>

alors votre ajax:

function LocationNumberModal() {
  var partNumber = "1234";

  var src = '@Url.Action("LocationNumberModal", "Home", new { area = "Part" })'
    + '?partNumber='' + partNumber; 

  $.ajax({
    type: "GET",
    url: src,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
      $("#LocationNumberModalContainer").html(data.LocationModal);
      $('#LocationNumberModal').modal('show');
    }
  });
};

Puis le bouton à votre modal:

<button type="button" id="GetLocBtn" class="btn btn-default" onclick="LocationNumberModal()">Get</button>
1
eaglei22