[ASP.NET] Controles enlazados a datos en ASP.NET 4.5

Posted on Actualizado enn


Hola a todos, hoy quiero mostrarles una nueva características que trae ASP.NET 4.5 y es la de realizar binding directamente desde la definición (HTML) del control, en mi opinión una característica bastante cool y que se asemeja a utilizar el patrón MVVM (claro una pequeña aproximación), los que ya han trabajado con WPF o Windows 8 ya les será tema conocido.

Entonces en primer lugar vamos a crear una clase Cliente, con 4 propiedades:

   1:  public class Cliente
   2:  {
   3:      public int ClienteId { get; set; }
   4:      public string Nombre { get; set; }
   5:      public string Apellido { get; set; }
   6:      public string Email { get; set; }
   7:  }

Ahora, para el ejemplos utilizaremos un GridView, y acá viene la primera propiedad nueva, en la definición del Grid vamos a utilizar ItemType, y allí definimos en esta caso la clase Cliente creada…y gracias al querido Visual Studio y su intellisense será muy sencillo:

image

Y ahora vamos para las columnas, en este caso para seguir aprovechando lo nuevo en ASP.NET 4.5 las vamos a definir utilizando TemplateField, y de nuevo tenemos la gran ayuda del intellisense:

image

Bueno y finalmente para el enlace a datos vamos a usar la propiedad SelectMethod, allí debemos colocar el nombre de un método que se encuentre en el code behind de la página, ese método debe ser público, entonces el HTML de GridView finalmente sería:

   1:  <asp:GridView ID="grvClientes" runat="server" AutoGenerateColumns="false" 
   2:      ItemType="Controles_Tipados.model.Cliente" SelectMethod="ObtenerClientes">
   3:      <Columns>
   4:          <asp:TemplateField HeaderText="Cliente Id">
   5:              <ItemTemplate><%# Item.ClienteId %></ItemTemplate>
   6:          </asp:TemplateField>
   7:          <asp:TemplateField HeaderText="Nombre">
   8:              <ItemTemplate><%# Item.Nombre %></ItemTemplate>
   9:          </asp:TemplateField>
  10:          <asp:TemplateField HeaderText="Apellido">
  11:              <ItemTemplate><%# Item.Apellido %></ItemTemplate>
  12:          </asp:TemplateField>
  13:          <asp:TemplateField HeaderText="Email">
  14:              <ItemTemplate><%# Item.Email %></ItemTemplate>
  15:          </asp:TemplateField>
  16:      </Columns>
  17:  </asp:GridView>

Y el code behind de la página:

   1:  private static readonly List<Cliente> clientes = new List<Cliente>(){
   2:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   3:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   4:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   5:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   6:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   7:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   8:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" }
   9:  };
  10:   
  11:  public List<Cliente> ObtenerClientes()
  12:  {
  13:      return clientes;
  14:  }

En este caso tenemos una lista con datos fijos, pero si se quiere más dinamismo podríamos tener una consulta a base de datos.

Y para profundizar más en el tema: Strongly Typed Data Controls

Espero les haya gustado el post… saludos!

About these ads

3 comentarios en “[ASP.NET] Controles enlazados a datos en ASP.NET 4.5

    [...] [ASP.NET] Controles enlazados a datos en ASP.NET 4.5 [...]

    [...] [ASP.NET] Controles enlazados a datos en ASP.NET 4.5 [...]

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:06

    [...] [ASP.NET] Controles enlazados a datos en ASP.NET 4.5 [...]

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s