GridView con Columnas Hipervnculo

GridView con Columnas Hipervnculo

1.- Nos aseguraremos de tener la base de datos Neptuno, en nuestro servidor SQL Server y
luego de esta comprobacin, digitaremos las siguientes lneas de cdigo que crearan el
procedimiento almacenado, que lista los datos de los empleados.

use Neptuno
go
create proc usp_listar_empleados
as
select codigo=dempleado, nombre=apellidos+',
'+nombre, fecha_nac=fechanacimiento,
aos_serv=year(getdate())-year(fechacontratacion),
region=ISNULL(region,'Sin Region')
from empleados
go
create proc usp_listar_ordenes_empleado
@codemp int
as
select o.IdPedido, o.FechaPedido,
Total=SUM(od.PrecioUnidad*od.Cantidad)
from Pedidos o inner join [Detalle de Pedidoss] od
on o.PedidoID=od.PedidoID
where o.EmpleadoID=@codemp
group by o.PedidoID, o.FechaPedido
go
2.- Luego crearemos una aplicacin Web con el lenguaje Visual C#, y sobre el formulario
predeterminado (Default.aspx) agregaremos un control GridView.
3.- En su tarjeta inteligente del GridView, seleccionaremos Editar Columnas (Edit column) y
adicionaremos 3 columnas o campos enlazados (BoundField) y una columna HyperLinkField.

4.- A cada uno de los campos enlazados, estableceremos 2 propiedades

principales:
DataField = Nombre de la columna que se va a mostrar del origen de datos
HeaderText = Texto del Ttulo de la columna
NullDisplayText = Texto a visualizar si es que la columna tiene un valor null.
1er BoundField
DataField:
HeaderText:

codigo
Codigo

2do BoundField
DataField:
HeaderText:

Nombre
Nombre del Empleado

3er BoundField
HeaderText: Fecha Nac.
DataField:
fecha_nac
DataFormatString: {0:d}

Prof.: LIN RODRGUEZ, Julio Csar

Pgina 1

GridView con Columnas Hipervnculo

4to BoundField
DataField:
Region
HeaderText: Region
NullDisplayText:[Sin Region]
Para la columna de tipo HyperLinkField deberemos establecer tambin 4 propiedades
aparte del HeaderText:

DataNavigateUrlFields = Nombre columnas que sern utilizadas como argumentos en la

cadena DataNavigateUrlFormatString.
DataNavigateUrlFormatString = Cadena de texto que permite indicar la pgina a la cual
se cargara y se enviara los argumentos indicados en DataNavigateUrlFields.
Ejemplo:
DataNavigateUrlFields: Codigo, Nombre
DataNavigateUrlFormatString=PaginaWeb.aspx?cod={0} & nom={1}
Aqu {0} corresponde al primer argumento de la lista indicada en DataNavigateUrlFields, en
este caso a Cdigo, y {1} corresponder al segundo elemento de DataNavigateUrlFields, en
este caso a Nombre.

DataTextField = Nombre del campo (generalmente la clave) que se enviar. Se

muestra como Hipervnculo.
DataTextFormatString = Texto que se visualizara en lugar del nombre del campo
indicado en DataTextField
Ejemplo:
DataTextField: Codigo
DataTextFormatString=Ver Ordenes
Columna HyperLinkField
HeaderText
DataNavigateUrlFields
DataNavigateUrlFormatString
DataTextField
DataTextFormatString

:
:
:
:
:

Ordenes
Codigo, Nombre
Default2.aspx?cod={0},nom={1}
codigo
Ver

Al final la Grilla se mostrara de la siguiente manera:

Prof.: LIN RODRGUEZ, Julio Csar

Pgina 2

GridView con Columnas Hipervnculo

Despus de haber establecido las propiedades correspondientes, comenzaremos con el
cdigo de nuestra aplicacin Web.

using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
string cad_cn =
"Server=localhost;Database=Neptuno;Integrated Security=true";
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack) return;
GridView1.DataSource =
DevuelveTabla("usp_listar_empleados");
GridView1.DataBind();
}
DataTable DevuelveTabla(string cadena)
{
SqlDataAdapter odap = new SqlDataAdapter(cadena, cad_cn);
odap.SelectCommand.CommandType=
CommandType.StoredProcedure;
DataTable tabla1=new DataTable();
odap.Fill(tabla1);
return tabla1;
}

DataList

Prof.: LIN RODRGUEZ, Julio Csar

Agregamos dos tablas de 3

columnas por una fila en las
plantillas HeaderTemplate e
ItemTemplate, escribimos en
cada celda de la plantilla
HeaderTemplate: Nro de Orden,
Fecha y Total, luego arrastramos
en cada celda de la tabla de la
plantilla ItemTemplate una
etiqueta y finalmente las
enlazamos con el nombre de los
campos provenientes del SP.
Eval("IdProducto"),
Eval("FechaPedido") y
Eval("Total")

Pgina 3

GridView con Columnas Hipervnculo

Ejemplo de enlace del label1 de la plantilla ItemTemplate en donde mostraremos el nmero de
la orden, esto se debe realizar para los otros labels de esta tabla.

using System.Data;
using System.Data.SqlClient;
public partial class Default2 : System.Web.UI.Page
{
string cad_cn =
"Server=localhost;Database=Neptuno;Integrated Security=true";
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack) return;
int codemp =
Convert.ToInt32(Request.QueryString["cod_emp"]);
string nomemp = Request.QueryString["nom_emp"];
lblNombre.Text = nomemp;
DataList1.DataSource = DevuelveTabla2(
"usp_listar_ordenes_empleado", codemp);
DataList1.DataBind();
}

Prof.: LIN RODRGUEZ, Julio Csar

Pgina 4

GridView con Columnas Hipervnculo

DataTable DevuelveTabla2(string cadena, params object[]
parametros)
{
SqlDataAdapter odap = new SqlDataAdapter(cadena, cad_cn);
odap.SelectCommand.CommandType = CommandType.StoredProcedure;
if (parametros.Length > 0)
{
odap.SelectCommand.Connection.Open();
SqlCommandBuilder.DeriveParameters(odap.SelectCommand);
int i = 0;
foreach (SqlParameter oprm in
odap.SelectCommand.Parameters)
{
if (oprm.ParameterName != "@RETURN_VALUE")
{
oprm.Value = parametros[i];
i++;
}
}
}
DataTable tabla1 = new DataTable();
odap.Fill(tabla1);
return tabla1;
}

Prof.: LIN RODRGUEZ, Julio Csar

Pgina 5