none
Manera mas sencilla de realizar operaciones CRUD con ventanas Modales PopUp RRS feed

  • Pregunta

  • Hola:

     Actualmente me encuentro trabajando en un proyecto con Asp Mvc 5 y Entity Framework, tengo la necesidad de realizar operaciones CRUD de entidades no complejas así que se me ocurrió hacer este mantenimiento con vistas modales PopUp.

     He estado buscando ejemplos en internet y veo que la mayoría genera scripts especiales para cada entidad para así definir la action que esta tomara, me gustaría saber como es que ustedes trabajan, si es posible generar un solo script que acepte cualquier vista y la muestre como PopUp, y si tienen link de ejemplos se los agradeceré demasiado.

    Gracias adelantadas.


    Saludos desde Monterrey, Nuevo León, México!!!

    martes, 15 de marzo de 2016 21:55

Respuestas

  • hola

    >>se me ocurrió hacer este mantenimiento con vistas modales PopUp.

    pero usando popup no es la manera mas sensilla

    si defiens uan pagina que listas las entidades con botones de eliminar agregar o editar y al presionarlo navegas a la edicion o alta de la entidad eso es mucho mas simple

    la navegacion con post a los actione slo mas rapido de desarrollar

    >>si es posible generar un solo script que acepte cualquier vista y la muestre como PopUp

    eso no es posible porque la vista depende de la partialview que le cargues

    podrias estandarizar como lanzas el popup y como lo envias a grabar mediante la serializacion del form al enviarlo mediente $.ajax

    pero tema de validaciones y la partiaview que defienen los campos, ademas de la clase model de cada entidad eso se debe crear para cada una

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 15 de marzo de 2016 22:06
  •  >>Ahí se muestra que siempre se llamara a la vista Details de la carpeta Home, entonces no quisiera escribir tantas veces ese escript como popups desee visualizar.

    podrias definir de forma contextual cual es la url del detalle

    no se que que contexto defines el boton btnMantenimiento, si es un boton general o si lo puedes separar para cada popup

    <button .. id="btnMantenimiento" data-url='@Url.Action("Details", "Home")' >Mantenimiento</button>

    $('.btnMantenimiento').on('click', function () {

        var urlDetalle = $(this).data('url');

        $("#Details").dialog({
            autoOpen: true,
            center", at: "top+350", of: window },
            width: 1000,
            resizable: false,
            title: 'Details',
            modal: true,
            open: function () {
                $(this).load(urlDetalle);
            }
        });
       
    });

    estarias usando jquery data

    porque usaste el . en lugar del # como selector del btnMantenimiento ?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 16 de marzo de 2016 10:53
  • En lo personal creo partial views para la edición/inserción de un registro.  Esto normalmente es un proceso manual para tener la posibilidad de personalizar cualquier vista en cualquier momento.  Si llegara a tener centenas de entidades tal vez pensaría en una forma de automatizar la creación de la vista.  Eso no me ha pasado aún.

    En fin, cada vista contiene un elemento <form> con su respectivo verbo y action.  Este partial view puede presentarse como popup o incrustado en un full view.  En ambos casos necesito botones de Guardar y Cancelar.  Para el caso de popups, obtengo el partial view mediante Ajax.  Pero me estoy adelantando.

    En el layout inserto un DIV invisible sin nada para popups y otro para mensajes.  Luego un script de jQuery UI prepara ambos como popups (dialogs).  Al primer DIV se le agregan botones de Guardar y Cancelar y al otro un botón de OK.

    Cuando quiero un popup de edición uso el que ya está preparado.  Lo lleno con Ajax como mencioné.  Cuando se llena, ubico el <form> con jQuery y preparo la acción del botón Guardar con el verb y el action del <form>.  El botón Guardar usa Ajax nuevamente para postear los datos.  Aquí puede presentar un "Por favor espere..." mientras se ejecuta el .done() o el .fail().  En el .done() usamos el otro dialog para mostrar un mensaje de éxito bonito; en el .fail() usamos el otro dialog para presentar un mensaje de error bonito.  En el .always() escondemos el "Por favor espere...".

    Como mejores prácticas de programación, tratamos que bajo ninguna circunstancia se genere una excepción no controlada en las acciones/webapi que se usan via Ajax, así que esos métodos siempre tienen try..catch y mis respuestas JSON siempre tienen una propiedad ResultCode que si es 0 es que todo fue bien, pero si es 1 entonces la propiedad de la respuesta JSON ErrorMessage tendrá el mensaje de error, que se presenta en el dialog ya preparado para mensajes.


    Jose R. MCP
    Code Samples

    miércoles, 16 de marzo de 2016 14:08
  • hola

    que pasa si usas

    <a class="btn btn-success" data-modal="" href='@Url.Action("Create")' id="btnCreate">

    no le especificas ningun controller, entonces segun cual sea el contexto pondra Phone u otro controller

    cuando invocas el boton debes tomar ese href para invocar la funcionalidad

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 16 de marzo de 2016 22:11
  • Pues algo como lo que monté aquí.

    Todo el Javascript que ve ahí estaría en un .js aparte que siempre se agrega.  Todo excepto el JS para el botón cuyo ID es btnEditor.  Ese botón es un ejemplo de uso.  O sea, cada vez que necesite hacer uso del dialog para edición, entonces escribiría JS similar al que se muestra:

      $('#btnEditor').click(function()
                           {
        //En vez de agregar contenido HTML hacemos una llamada Ajax a un partial view.
        var f = $('<form></form>');
        $('<label>').appendTo(f).text('Nombre:');
        $('<input>').attr('type', 'text').appendTo(f);
        f.attr('method', 'PUT').attr('action', 'http://www.somedomain.com/api/entidad/new');
        PopulateEditorDlg(f, function(successful, data)
                         {
          if (successful)
            ShowMessage('Todo listo.');
        });
      });
    

    Básicamente el hacer clic sobre el botón produce una llamada a la función PopulateEditorDlg(), que en el ejemplo toma un elemento <form> de HTML, pero en la práctica la función tomaría un URL y un method (GET, POST, etc., usualmente GET) para hacer una llamada Ajax para obtener el HTML del partial view.  La función luego haría uso de jQuery para encontrar el elemento <form> y extraer el method y el action para uso posterior en el botón de guardar.

    Y me parece que eso demuestra lo esencial.  Entonces básicamente proveer la edición/adición de una entidad vía un dialog es bien fácil:  Una llamada a PopulateEditorDlg() y listo.  Si se necesita hacer algo después de que el guardado es exitoso, ese algo se hace en el callback que se le da a esta función.  En el ejemplo simplemente muestro un mensajito de "Todo listo.", pero puesto que la función recibe el JSON, uno puede hacer cosas más creativas.  Por lo general en una operación de guardado de una entidad, yo siempre devuelvo el ID de la entidad.  De esta forma, si inserté un nuevo registro, ya tengo el ID disponible.  Lo podría usar para agregar una opción a una lista, por ejemplo.


    Jose R. MCP
    Code Samples

    jueves, 17 de marzo de 2016 5:50

Todas las respuestas

  • hola

    >>se me ocurrió hacer este mantenimiento con vistas modales PopUp.

    pero usando popup no es la manera mas sensilla

    si defiens uan pagina que listas las entidades con botones de eliminar agregar o editar y al presionarlo navegas a la edicion o alta de la entidad eso es mucho mas simple

    la navegacion con post a los actione slo mas rapido de desarrollar

    >>si es posible generar un solo script que acepte cualquier vista y la muestre como PopUp

    eso no es posible porque la vista depende de la partialview que le cargues

    podrias estandarizar como lanzas el popup y como lo envias a grabar mediante la serializacion del form al enviarlo mediente $.ajax

    pero tema de validaciones y la partiaview que defienen los campos, ademas de la clase model de cada entidad eso se debe crear para cada una

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 15 de marzo de 2016 22:06
  • Hola:

     En cuanto al script me refiero a algo como esto:

    $('.btnMantenimiento').on('click', function () {
        $("#Details").dialog({
            autoOpen: true,
            position: { my: "center", at: "top+350", of: window },
            width: 1000,
            resizable: false,
            title: 'Details',
            modal: true,
            open: function () {
                $(this).load('@Url.Action("Details", "Home")');
            }
        });
       
    });

     Ahí se muestra que siempre se llamara a la vista Details de la carpeta Home, entonces no quisiera escribir tantas veces ese escript como popups desee visualizar.

     Dentro de los proyectos de tu blog tendras alguno de hable de este tema?


    Saludos desde Monterrey, Nuevo León, México!!!


    martes, 15 de marzo de 2016 23:55
  •  >>Ahí se muestra que siempre se llamara a la vista Details de la carpeta Home, entonces no quisiera escribir tantas veces ese escript como popups desee visualizar.

    podrias definir de forma contextual cual es la url del detalle

    no se que que contexto defines el boton btnMantenimiento, si es un boton general o si lo puedes separar para cada popup

    <button .. id="btnMantenimiento" data-url='@Url.Action("Details", "Home")' >Mantenimiento</button>

    $('.btnMantenimiento').on('click', function () {

        var urlDetalle = $(this).data('url');

        $("#Details").dialog({
            autoOpen: true,
            center", at: "top+350", of: window },
            width: 1000,
            resizable: false,
            title: 'Details',
            modal: true,
            open: function () {
                $(this).load(urlDetalle);
            }
        });
       
    });

    estarias usando jquery data

    porque usaste el . en lugar del # como selector del btnMantenimiento ?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 16 de marzo de 2016 10:53
  • En lo personal creo partial views para la edición/inserción de un registro.  Esto normalmente es un proceso manual para tener la posibilidad de personalizar cualquier vista en cualquier momento.  Si llegara a tener centenas de entidades tal vez pensaría en una forma de automatizar la creación de la vista.  Eso no me ha pasado aún.

    En fin, cada vista contiene un elemento <form> con su respectivo verbo y action.  Este partial view puede presentarse como popup o incrustado en un full view.  En ambos casos necesito botones de Guardar y Cancelar.  Para el caso de popups, obtengo el partial view mediante Ajax.  Pero me estoy adelantando.

    En el layout inserto un DIV invisible sin nada para popups y otro para mensajes.  Luego un script de jQuery UI prepara ambos como popups (dialogs).  Al primer DIV se le agregan botones de Guardar y Cancelar y al otro un botón de OK.

    Cuando quiero un popup de edición uso el que ya está preparado.  Lo lleno con Ajax como mencioné.  Cuando se llena, ubico el <form> con jQuery y preparo la acción del botón Guardar con el verb y el action del <form>.  El botón Guardar usa Ajax nuevamente para postear los datos.  Aquí puede presentar un "Por favor espere..." mientras se ejecuta el .done() o el .fail().  En el .done() usamos el otro dialog para mostrar un mensaje de éxito bonito; en el .fail() usamos el otro dialog para presentar un mensaje de error bonito.  En el .always() escondemos el "Por favor espere...".

    Como mejores prácticas de programación, tratamos que bajo ninguna circunstancia se genere una excepción no controlada en las acciones/webapi que se usan via Ajax, así que esos métodos siempre tienen try..catch y mis respuestas JSON siempre tienen una propiedad ResultCode que si es 0 es que todo fue bien, pero si es 1 entonces la propiedad de la respuesta JSON ErrorMessage tendrá el mensaje de error, que se presenta en el dialog ya preparado para mensajes.


    Jose R. MCP
    Code Samples

    miércoles, 16 de marzo de 2016 14:08
  • Hola Leandro:

     El botón esta declarado en una vista de la siguiente manera y es un ejemplo que encontré en internet, realmente solo estoy analizándolo para ver que puedo obtener de el.

                <div class="pull-right col-lg-1">
                    <a class="btn btn-success" data-modal="" href="/Phone/Create" id="btnCreate">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                </div>


    Saludos desde Monterrey, Nuevo León, México!!!

    miércoles, 16 de marzo de 2016 21:31
  • Hola José:

     Muchas gracias por tu respuesta, entiendo perfectamente lo que me dices.

     Se que es mucho pedir pero me gustaría ver un ejemplo de esto que me platicas, así como lo describes parece ser lo que ando buscando pero que no encontrado ningún ejemplo claro en la web.

     El tema de los mensajes lo soluciono como Toastr, tengo ya implementado los diferentes tipos de mensaje desde el Controller así que por este lado no hay problema, es solo el tema del popup lo que te agradecería si me ejemplificas.

    Gracias de antemano.


    Saludos desde Monterrey, Nuevo León, México!!!

    miércoles, 16 de marzo de 2016 21:37
  • hola

    que pasa si usas

    <a class="btn btn-success" data-modal="" href='@Url.Action("Create")' id="btnCreate">

    no le especificas ningun controller, entonces segun cual sea el contexto pondra Phone u otro controller

    cuando invocas el boton debes tomar ese href para invocar la funcionalidad

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 16 de marzo de 2016 22:11
  • Pues algo como lo que monté aquí.

    Todo el Javascript que ve ahí estaría en un .js aparte que siempre se agrega.  Todo excepto el JS para el botón cuyo ID es btnEditor.  Ese botón es un ejemplo de uso.  O sea, cada vez que necesite hacer uso del dialog para edición, entonces escribiría JS similar al que se muestra:

      $('#btnEditor').click(function()
                           {
        //En vez de agregar contenido HTML hacemos una llamada Ajax a un partial view.
        var f = $('<form></form>');
        $('<label>').appendTo(f).text('Nombre:');
        $('<input>').attr('type', 'text').appendTo(f);
        f.attr('method', 'PUT').attr('action', 'http://www.somedomain.com/api/entidad/new');
        PopulateEditorDlg(f, function(successful, data)
                         {
          if (successful)
            ShowMessage('Todo listo.');
        });
      });
    

    Básicamente el hacer clic sobre el botón produce una llamada a la función PopulateEditorDlg(), que en el ejemplo toma un elemento <form> de HTML, pero en la práctica la función tomaría un URL y un method (GET, POST, etc., usualmente GET) para hacer una llamada Ajax para obtener el HTML del partial view.  La función luego haría uso de jQuery para encontrar el elemento <form> y extraer el method y el action para uso posterior en el botón de guardar.

    Y me parece que eso demuestra lo esencial.  Entonces básicamente proveer la edición/adición de una entidad vía un dialog es bien fácil:  Una llamada a PopulateEditorDlg() y listo.  Si se necesita hacer algo después de que el guardado es exitoso, ese algo se hace en el callback que se le da a esta función.  En el ejemplo simplemente muestro un mensajito de "Todo listo.", pero puesto que la función recibe el JSON, uno puede hacer cosas más creativas.  Por lo general en una operación de guardado de una entidad, yo siempre devuelvo el ID de la entidad.  De esta forma, si inserté un nuevo registro, ya tengo el ID disponible.  Lo podría usar para agregar una opción a una lista, por ejemplo.


    Jose R. MCP
    Code Samples

    jueves, 17 de marzo de 2016 5:50
  • Hola a todos 

    ¿Y los links?


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú

    lunes, 20 de marzo de 2017 15:47