viernes, 4 de noviembre de 2011

Manejar Controles de Servidor (ASP .NET) del lado del Cliente (JavaScript)

Muchas Veces es necesario modificar controles ASP.Net del lado del cliente con alguna función JavaScrip.

Pongo por ejemplo:

Tenemos una aplicación realizada con C# que necesita desplegar una ventana POPUP para intriducir un Nombre, después C# necesita procesar ses nombre y hacer otras cosas con él.

Este problema se puede solucionar de muchas maneras, la que planteo aquí es:
1.- Crear la ventana emergente con JavaScript
2.- Por medio de una Función JavaScript modificar una propiedad de un Control ASP.Net (Prodria ser una TextBox por ejemplo)
3.- Tomar desde el lado del servidor con C# esa propiedad y hacer lo que más te guste.

  
Ahora, para este ejemplo tenemos dos forms:
  1. Default.aspx que es la pagina principal que se ejecuta
    1. Default.aspx.cs es el Code Behind de la pagina
  2. MiPopUp.aspx es la que se muestra en el PopUp

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MiPopUp.aspx.cs" Inherits="MiPopUp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Mi PopUp</title>
<script type="text/javascript">
//Funcion que obtiene el Texto en la Text1 y lo coloca en la variable global info de Default.aspx
function MandaInfo()
{
var pageCliente = dialogArguments; //Obtenemos la pagina del cliente (window)
pageCliente.Info = Text1.value; //Asignamos la variable publica Info de Default.aspx el valor de Text1 de MiPopUp.aspx
pageCliente.ModificaControles(); //Ejecutamos la funcion ModificaControles() de Default.aspx
}
</script>
</head>
<body>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="Ok" onclick="MandaInfo(); window.close();" />
<form id="form1" runat="server">
<! --No tenemos ningun control del lado del servidor en el PopUp, todo corre en el cliente-->
</form>
</body>
</html>


CodeBehind (Default.aspx.cs):
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        //Creamos el script de JavaScript que lanza una ventana PopUp mandando como parametro window
        //de tal manera que desde el popUp podamos manipular objetos pertenecientes esta ventana
        string script = "showModalDialog(\"MiPopUp.aspx\",window,\"status:false;dialogWidth:300px;dialogHeight:300px\");";
        ClientScript.RegisterStartupScript(this.GetType(), "MiPopUp", "");
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        this.Label1.Text = "Mi PopUp con JavaScrip me dice que: " + this.TextBox1.Text;
    }
}

MiPopUp.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MiPopUp.aspx.cs" Inherits="MiPopUp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Mi PopUp</title>
<script type="text/javascript">
//Funcion que obtiene el Texto en la Text1 y lo coloca en la variable global info de Default.aspx 
function MandaInfo()
{
var pageCliente = dialogArguments; //Obtenemos la pagina del cliente (window)
pageCliente.Info = Text1.value; //Asignamos la variable publica Info de Default.aspx el valor de Text1 de MiPopUp.aspx
pageCliente.ModificaControles(); //Ejecutamos la funcion ModificaControles() de Default.aspx
}
</script> 
</head>
<body>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="Ok" onclick="MandaInfo(); window.close();" />
<form id="form1" runat="server">
<! --No tenemos ningun control del lado del servidor en el PopUp, todo corre en el cliente-->
</form>
</body>
</html>


Coloco unas imágenes de ejemplo:
Ventana de Default.aspx

Ventana PopUp

Modificaciones hechas desde el PopUp


No hay comentarios:

Publicar un comentario