Usando cuadros de diálogo de Bootstrap en ASP.NET

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">&times;</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!