Gonzalo Muro P.: Enviar Form con Dialog de JQuery usando ASP.NET y VB

Dialog es una de las herramientas que nos proporciona JQueryUI. Éste “widget” es una de esas ventanitas flotantes que vemos comúnmente en sitios webs, parecidos a los tooltips.

Éstas utilidades de jQuery, realmente son útiles en ciertos casos, aumentan la funcionalidad y mejoran el diseño de nuestras aplicaciones.

Me surgió la necesidad de usar estos dialogs para agregar información extra a ciertos registros de la bd que se muestran en un GridView, en éste caso, posicionando el mouse encima de cada registro se debe desplegar el dialog y aparecer el formulario.

En la imagen anterior cuando se posiciona sobre el link Pendiente, se abre el dialog.

Tienen que descargar JQuery y JQuery UI o llamarlos desde la API de Google, que es así:

Para éste ejemplo voy a crear un div con el id “dialog”, éste en la página .aspx:

 
Aceptar trabajo: 
Si 
No

Comentario:

En el código anterior vemos que en el botón de enviar uso un control de asp.net, y un campo oculto donde voy a guardar el id del registro a editar, pero esto es para ejemplificar que aquí son irrelevantes los controles de asp.net, ya que cuando jquery toma el control de #dialog, lo convierte a inputs normales, no importa si hubiera puesto lo siguiente:

Todo lo que esté dentro de <div id="dialog"> no es necesario que lo ocultemos nosotros, jquery lo oculta automáticamente desde que le asignamos la instancia de dialog.

A continuación nuestro código javascript que hace que todo ésto funcione, es recomendable que vaya en un archivo .js, aunque puede colocarse también dentro <head></head>.

$(document).ready(function () {

 //Inicializamos la instancia de dialog en el objeto #dialog
 //La opción autoOpen es para que no se habrá automáticamente, hasta que ocurra algo
    $("#dialog").dialog({ autoOpen: false });
    

//Las siguientes opciones cambian el título, tamaño y modal es para que cuando esté abierto un dialog se bloquee todo lo demás. Pueden ver todas las opciones, eventos y demás aquí.

$("#dialog").dialog("option", "title", "Evaluar Trabajo");
    $("#dialog").dialog("option", "width", 300);
    $("#dialog").dialog("option", "height", 350);
    $("#dialog").dialog("option", "modal", "true");

//Cada registro en el GridView tiene un enlace con la clase .dialog
    $(".dialog").each(function () {

//Cada ves que se posicione el mouse encima, hará lo siguiente
        $(this).mouseover(function () {
            var id = $(this).attr("id");

            var x = $(this).offset().left - 305;
            var y = $(this).offset().top;
            $("#dialog").dialog("option", "position", [x, y]);
            
  //Aquí es donde abre el dialogo con todas las opciones previamente establecidas
$("#dialog").dialog("open");

            $("#idTrabajo").val(id);

        });

    });

    $("#enviarEvaluacion").click(function () {
        var id_trabajo = $("#idTrabajo").val();
        var aceptado = "";
        var lab = "";
        if ($("#aceptarV").attr("checked")) {
            aceptado = 1;
            lab = "Si";
        } else if ($("#aceptarF").attr("checked")) {
            aceptado = 2;
            lab = "No";
        }

        var coment = $("#comentario").val();


        if (confirm("¿Está seguro de enviar los siguientes datos? \n Aceptado: " + lab + "\n Comentario: " + coment)) {
            window.location = "default.aspx?id=" + id_trabajo + "&ac=" + aceptado + "&com=" + coment;
        }
    });
});

Lo que hago al final es redireccionar la página con los datos ingresados en el form:

if (confirm("¿Está seguro de enviar los siguientes datos? \n Aceptado: " + lab + "\n Comentario: " + coment)) {

            window.location = "default.aspx?id=" + id_trabajo + "&ac=" + aceptado + "&com=" + coment;

        }

¿Por qué?

Por lo mismo que jquery convierte los botones, ya no es posible crear un método que maneje el botón al darle click, por lo tanto, lo que se me ocurrió fue enviar las variables por el método GET y así recogerlas y trabajar con ellas. (No digo que sea la única forma, solo lo pensé así).

Al redireccionar a esa página con esas variables, en el Page_Load puse la función evaluar(), que será la encargada de recoger las variables y decidir que hacer:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Evaluar()

'Aqui el demas codigo para mostrar el grid etc

End Sub

Aqui la función evaluar() :

Private Function evaluar() As Boolean
        Dim clase As New CCE
        Dim mensaje As New BLL
        Dim id_trabajo, aceptado As Integer
        Dim coment As String
        Dim sqlCon As New SqlConnection(clase.ObtenConexion())
        Dim sqlCommand As New SqlCommand("", sqlCon)
        Dim sqlTrans As SqlTransaction = Nothing
        Try
  'Aqui recojo las variables
            id_trabajo = Request.QueryString("id")
            aceptado = Request.QueryString("ac")
            coment = Request.QueryString("com")

  'Si estan vacias que se salga de la función y siga cargando la página normalmente

            If (id_trabajo = 0) And (aceptado = 0) And (coment = "") Then
                Return False
            Else

                sqlCon.Open()
                sqlTrans = sqlCon.BeginTransaction()
                sqlCommand.Transaction = sqlTrans

                sqlCommand.Parameters.Clear()
                sqlCommand.Parameters.Add("@id_trabajo", SqlDbType.Int).Value = id_trabajo
                sqlCommand.Parameters.Add("@aceptado", SqlDbType.Int).Value = aceptado
                sqlCommand.Parameters.Add("@coment", SqlDbType.VarChar).Value = coment

                sqlCommand.CommandText = "UPDATE [ICPI_resumen_trabajos] SET aceptado=@aceptado WHERE id=@id_trabajo"
                sqlCommand.ExecuteNonQuery()

                sqlCommand.CommandText = "INSERT INTO [ICPI_evaluado_comentario] VALUES (@id_trabajo, @coment)"
                sqlCommand.ExecuteNonQuery()

                sqlTrans.Commit()
                sqlCon.Dispose()

                Response.Redirect("default.aspx")
            End If
        Catch ex As Exception
            If sqlTrans Is Nothing Then
                sqlTrans.Rollback()
            End If
            clase.ErrorLog(ex.Message)
            Return False
        Finally
            sqlCommand.Dispose()
            sqlCon.Dispose()
        End Try
        Return True
    End Function

Eso es todo.

Gonzalo Muro P.

martes, 2 de agosto de 2011

Enviar Form con Dialog de JQuery usando ASP.NET y VB

No hay comentarios:

Publicar un comentario