No existen reglas sobre cómo utilizar los cuadros de diálogo de bootstrap en ASP.NET MVC. A menudo, aparecen muchas preguntas en una fase de ejecución:
- ¿Cómo crear cuadros de diálogos?
- ¿Dónde se deben colocar en el HTML?
- ¿Cómo insertar información dinámica en los cuadros de diálogo?
- ¿Cómo utilizar sus eventos?
Este artículo te ofrecerá una aproximación para organizar y utilizar los cuadros de diálogo de Bootstrap de una manera efectiva.
El código
Vamos a crear una función para crear cuadros de diálogo de Bootstrap:
DialogUtils = { ShowDialog: function(dialogOptions) { var container = $("[data-dialog-container="" + dialogOptions.url + ""]"); /* Check is dialog already exists to prevent double loading */ if (container.length) { return; } /* Create new container for dialog url */ var newContainer = $("
"); newContainer.attr("data-dialog-container", dialogOptions.url); $("body").append(newContainer); container = newContainer; /* Load dialog into container */ $.post(dialogOptions.url, dialogOptions.data, function(response, status, xhr) { if (status == "error") { console.error("Couldn't load dialog " + dialogOptions.url + " due to error: " + xhr.statusText); return; } container.html(response); var dialog = $('.modal', container); dialog.modal('show'); /* Enable dialog result handlers */ dialog.on('hidden.bs.modal', function() { if (dialog.data("dialog-result") != undefined) { var dialogResultHandler = "on" + dialog.data("dialog-result"); if (dialogOptions[dialogResultHandler] !== undefined) { dialogOptions[dialogResultHandler](dialog); } } container.remove(); }); }); } };
Y su uso sería este:
DialogUtils.ShowDialog({ url: "@Url.Action("SubmitPaymentConfirmation")", data: $("#SubmitPayment").serialize(), onConfirm: function () { $("#SubmitPayment").submit(); }, onConfirmAndPrint: function () { $("#Print").val("true"); //some hidden field $("#SubmitPayment").submit(); } });
La función toma como un parámetro dialogOptions que contiene las siguientes propiedades:
- url: dirección de la acción que provee al HTML
- data: parámetro de acción
- onConfirm, onConfirmAndPrint: callbacks que son invocados cuando el cuadro de diálogo se cierra en un estado específico.
/* override original bootstrap modal function to set the dialog result on hide. Usage: modal('hide', 'result') */ $(function () { var originalModal = $.fn.modal; $.fn.modal = function(option, result) { if (option == 'hide' && typeof result == 'string') { var $this = $(this); $this.data("dialog-result", result); arguments[1] = null; } originalModal.apply(this, arguments); }; });
Ahora la plantilla del cuadro de diálogo debe contener los triggers que cerrarán el cuadro en un estado específico:
@model Dialogs.Models.SubmitPaymentConfirmation
@{
Layout = null;
}
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Payment Confirmation</h4>
</div>
<div class="modal-body">
<div class="row">
<label class="col-md-6 text-nowrap text-right">Amount:</label>
<span>@Html.DisplayFor(model => model.Amount)</span>
</div>
<div class="row">
<label class="col-md-6 text-nowrap text-right">Name On Card:</label>
<span>@Html.DisplayFor(model => model.NameOnCard)</span>
</div>
<div class="row">
<label class="col-md-6 text-nowrap text-right">CVV:</label>
<span>@Html.DisplayFor(model => model.CreditCardCvv2)</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-primary" onclick="$(this).closest('.modal').modal('hide', 'Confirm')">
<span class="glyphicon glyphicon-ok"></span> CONFIRM
</button>
<button type="button" class="btn btn-default" onclick="$(this).closest('.modal').modal('hide', 'ConfirmAndPrint')">
<span class="glyphicon glyphicon-ok-circle"></span> CONFIRM AND PRINT
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove-circle"></span> CANCEL
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Puedes ver que los botones Confirm y ConfirmAndPrint contienen los hadlers que cerrarán el cuadro de dialogo.
La última cosa que tengo que decir es que el cuadro de diálogo representa una acción separada en el controlador:
public ViewResult SubmitPaymentConfirmation(SubmitPaymentConfirmation paymentPageModel) { return View("SubmitPaymentConfirmation", paymentPageModel); }
Y este ha sido el artículo en el que trataba explicaros cómo usar cuadros de diálogo de Bootstrap en ASP.NET, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!