[ASP.NET] PopUp Filtro – Usando Ajax Toolkit ModalPopupExtender

 

Introducción

---

En esta oportunidad analizaremos como implementar un filtro usando los controles de ajax tookit, mas concretamente el control ModalPopupExtender

Se hará uso de una lista de productos la cual será filtrada por proveedores, desplegados en el popup.

Algo que notaran en el ejemplo será dos formas de implementar la selección del proveedor:

- en una se contara con al ayuda de ToolkitScriptManager para registrar la información seleccionada, será necesario un .js (ListProducts.js), encargado de tomar la info y asignarla a los controles

- la otra será una asignación directa usando jquery (esta ultima seria la recomendable, porque requiere menos objetos involucrados en su implementación)

 

Abrir ventana de búsqueda

---

La apertura de la ventana de filtro será realizada por medio de un evento asp.net, pero para poder hacerlo es necesario deshabilitar el javascript que asocia el botón con el ModalPopupExtender.

Para lograrlo es que se asigna la propiedad TargetControlID a un objeto hidden, como muestra la imagen

Esto permite que desde el botón se pueda cargar los ítems en el gridview que formara parte del popup de filtro, si se hubiera asignado directo el botón al ModalPopupExtender, este deshabilita los evento de asp.net, por lo que la carga del grid no se hubiera podido llevar a cabo.

 protected void btnOpenSupplierSearch_Click(object sender, EventArgs e)
 {
     LoadGridSuppliers();

     ModalPopupExtender1.Show();

 }

private void LoadGridSuppliers()
 {
     gvSuppliers.DataSource = NorthwindData.GetAllSuppliers();
     gvSuppliers.DataBind();
 }

El uso del Show() sobre el ModalPopupExtender abrirá la ventana, luego de cargar el grid que contiene.

 

Selección ítem en el popup

---

La selección del proveedor será implementada por medio de un botón de imagen de asp.net, el cual lanzara el evento del gridview, es por eso que se asocia el CommandName=”Select”

La acción de este evento podría ser implementada de dos formas:

Usando al funcionalidad de ToolkitScriptManager

En la implementación de esta opción puede implicar varios puntos a tener en cuenta, el primero involucra hacer uso del ToolkitScriptManager para asignar la información que se quiere devolver como resultado de la selección

protected void gvSuppliers_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
    string id = Convert.ToString(gvSuppliers.DataKeys[e.NewSelectedIndex].Value);
    string name = gvSuppliers.Rows[e.NewSelectedIndex].Cells[2].Text;

    //
    // asigno la informacion a los controles que estan fuera de updatepanel
    //
    ToolkitScriptManager1.RegisterDataItem(txtId, id);
    ToolkitScriptManager1.RegisterDataItem(lblSupplierName, name);


    //
    // Cargo grid de productos con el dato seleccionado
    //
    LoadGridProducts(id);

    //
    // cierro el popup
    //
    ModalPopupExtender1.Hide();
}

 

Pero además implica hacer uso de JavaScript para poder tomar la información enviada en el RegisterDataItem(), es por eso que se asocia un .js que cumplirá esta función

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/ListProducts.js" />
    </Scripts>
</asp:ToolkitScriptManager>

El contenido del .js implementa el siguiente código

Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(SupplierFilterHandler);

function SupplierFilterHandler(sender, args) {
    var datos = args.get_dataItems();

    //obtenermos el id geenrado por asp.net, o sea el ClientID
    var txtId = $("[id*='txtId']").attr('id');
    var lblSupplierName = $("[id*='lblSupplierName']").attr('id');
    

    if (datos[txtId] == undefined)
        return;

    $("[id*='txtId']").val(datos[txtId]);
    $("[id*='lblSupplierName']").text(datos[lblSupplierName]);

}

La idea es poder tomar la información enviada desde el código .net desde el cliente y asignarla a los controles todo ello desde código cliente, sin mezclar parte de .net con parte javascript, separando cada responsabilidad

Se usa el *= ya que el id del control es generado por asp.net (el cual puede cambiar del asignado desde el diseñador), por eso se ubica el nombre real generado, ya que no se disponer del ClientID para tomarlo desde el .js

 

Usando directamente jquery

Este seria el camino directo para asignar la información del filtro en la pagina principal

protected void gvSuppliers_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
    string id = Convert.ToString(gvSuppliers.DataKeys[e.NewSelectedIndex].Value);
    string name = gvSuppliers.Rows[e.NewSelectedIndex].Cells[2].Text;

    //
    // asigno la informacion a los controles que estan fuera de updatepanel
    //
    string script = @" $(""[id*='txtId']"").val('{0}');
                       $(""[id*='lblSupplierName']"").text('{1}');";

    script = string.Format(script, id, name.Encode());

    ScriptManager.RegisterStartupScript(this, typeof(Page), "filterinfo", script, true);

    //
    // Cargo grid de productos con el dato seleccionado
    //
    LoadGridProducts(id);

    //
    // cierro el popup
    //
    ModalPopupExtender1.Hide();
}

 

En esta implementación solo es necesario definir el script que se encargara de asignar los datos a los controles y enviarlo al cliente por medio del ScriptManager.RegisterStartupScript().

Esto es mucho mas directo y sin vueltas que el paso anterior, aunque requiere generar código javascript (ayudado con jquery) inserto en medio del con código .net en el servidor, a veces puede gustar, a veces no, mezclar este tipo de código, pero si hay que reconocer que es el camino directo en su implementación.

 

Código

---

[C#]