javascript - modals - mvc partial view in modal

Usar la ventana modal de Bootstrap como PartialView

Question

Estaba buscando usar las ventanas de Twitter Bootstrap Modal 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.

Hice un poco de investigación y encontré esta publicación que es similar pero no exactamente igual.

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

Gracias por tu ayuda.

Answer 1

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

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

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

Entonces, solo necesitas 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 2

Lo he logrado utilizando 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 3

Proyecto de ejemplo completo y claro http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals Muestra la creación, edición y eliminación de modos de operación de entidad con bootstrap y también incluye código para manejar el resultado devuelto por esas operaciones de la entidad (c #, JSON, javascript)

Answer 4

Sí, hemos hecho esto

En su Index.cshtml tendrá 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, tendrá 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 tu controlador que se parece a esto ...

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

Por supuesto, necesitará una vista llamada GetGameListing.cshtml dentro de su carpeta Views.

Answer 5

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

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

Luego tiene su método de controlador, yo uso JSON y tengo una clase personalizada que interpreta la vista en una cadena. Hago esto para poder realizar múltiples actualizaciones de ajax en la pantalla con una llamada ajax. Referencia aquí: Example pero puede usar un PartialViewResult / ActionResult en return si solo está haciendo una llamada. Lo mostraré usando JSON ..

Y el método JSON 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 usando su modal: Puede empaquetar el AJAX en su parcial y llamar a @ {Html.RenderPartial ... O puede tener un marcador de posición con un div:

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

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

Luego, el botón para tu modal:

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