Uso de la ventana modal de Bootstrap como PartialView

Question

Estaba buscando utilizar el Twitter Bootstrap Modal windows como una vista parcial. Sin embargo, realmente no creo que haya sido diseñado para ser utilizado de esta manera; parece que estaba destinado a ser utilizado de una manera bastante estática. Sin embargo, creo que sería genial poder usarlo como una vista parcial.

Entonces, por ejemplo, digamos que tengo una lista de juegos. Al hacer clic en un enlace para un juego determinado, me gustaría solicitar datos del servidor y luego mostrar información sobre ese juego en una ventana modal "sobre la parte superior" de la presente página.

Investigué un poco y encontré this post que es similar pero no exactamente lo mismo.

¿Alguien ha intentado esto con éxito o fracaso? ¿Alguien tiene algo en jsFiddle o alguna fuente que estén dispuestos a compartir?

Gracias por su ayuda.

Answer 1

Sí nos han hecho esto.

En su Index.cshtml tendrás algo como ..

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

Luego, en JS para la misma página (en línea o en un archivo separado podrás tener algo como esto ..

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

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

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

Con un método en el controlador que tiene este aspecto ..

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

Usted, por supuesto necesitará una vista llamado GetGameListing.cshtml dentro de su carpeta de Vistas ...

Answer 2

Lo hago con mustache.js y plantillas (puede usar cualquier biblioteca de plantillas de JavaScript).

En mi opinión, tengo algo como esto:

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

... que me permite mantener mis plantillas en una vista parcial llamada 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> 

puedo crear marcadores de posición para cada modal en mi opinión:

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

... y hacer llamadas ajax con 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> 

A continuación, sólo tiene un disparador en alguna parte:

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

Answer 3

He logrado esto mediante el uso de un buen ejemplo que he encontrado here. He reemplazado el diálogo de jquery utilizado en ese ejemplo con las ventanas de Twitter Bootstrap Modal.

Answer 4

Proyecto completo y claro ejemplo http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals Muestra crear, editar y eliminar los modales de operación entidad con arranque y también incluye código para manejar el resultado de regresar de las operaciones de la entidad (C#, JSON, JavaScript)

Answer 5

uso de AJAX para hacer esto. Usted tiene su parcial con su gorjeo modal html típica plantilla:

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

entonces usted tiene su método de control, uso de JSON y tienen una clase personalizada que rendors la vista en una cadena. Hago esto para poder realizar múltiples actualizaciones de ajax en la pantalla con una llamada ajax. Consulte aquí: Example pero puede usar un PartialViewResult/ActionResult en el retorno si solo está haciendo una llamada. Voy a demostrar que el uso de JSON ..

JSON y el método en el controlador:

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 
); 
} 

Y luego, en la vista de la utilización de su modal: puede empaquetar el AJAX en su parcial y llamar a @ {HTML. renderPartial ... O bien, puede tener un marcador de posición con un div:

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

entonces su 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'); 
    } 
    }); 
}; 

A continuación, el botón para su modal:

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