Una característica muy importante y realmente útil son los bloques de código embebido en ASP.NET, los cuales te permiten además de configurar la página, insertar de manera dinámica html, javascript y css en la fase de procesamiento de la página, por lo cual son amigables para el SEO.
En general un bloque de código embebido se ve de la siguiente manera
Existen muchos tipos de usos como:
En estas especificamos nuestra configuración de la página y los controles asociados.
Algunos ejemplos son:
<%@ Page Title="" Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Donde podemos configurar el título de nuestra página, el Lenguaje de Programación, el archivo de nuestro código subyacente y el nombre de la Clase, si es una página de Contenido el nombre de la página Maestra, entre otras opciones.
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
Donde podemos registrar controles compilados en un proyecto aparte (DLL) para su posterior uso dentro de la página.
<%@ Register TagPrefix="jQuery" TagName="MultipleFileUpload" Src="~/blog/admin/controls/fileupload/MultipleFileUpload.ascx" %>
Donde podemos registrar controles .ascx creados en el mismo proyecto para su posterior uso dentro de la página.
<%@ MasterType VirtualPath="~/blog/admin/MasterPage.master" %>
Donde podemos agregar la referencia a nuestra página maestra por si necesitamos acceso a esta.
Y existen muchas más opciones por si queremos configurar cache, referencias y deseemos utilizar mediante otros bloques de código como los de renderizado.
Estos bloques te permiten escribir en la página contenido html, css y javascript cuando son renderizados. En donde el Contenido es código del lado del servidor en el lenguaje de programación que estemos utilizando.
El cual se renderiza después de ejecutarse el código del Page_Load y Eventos de Controles de Servidor que se hayan invocado. En este caso se esta retornando el valor de una variable example global protegida o publica de nuestro código Subyacente.
Estos bloques se renderizan cuando se renderiza el control que los contiene (Gridview, ListView, Repeater, etc).
<%# Eval("NombreColumna") %><%# Bind("NombreColumna") %><%# MethodInCodeBehind(Container.DataItem) %>
Mientras que el Eval solo evalúa las expresiones de datos enlazados (lectura), el Bind se emplea para utilizar controles de entrada en modo de edición (lectura/escritura). En la última parte podemos observar que podemos llamar métodos de nuestro código subyacente (solo si estos están públicos o protegidos), en este caso esta recibiendo el objeto Container.DataItem el cual representa la fila actual de la colección y por lo tanto el tipo de este se definirá según el origen de datos y estos métodos pueden retornar contenido html, css y javascript.
Estos permiten comentar código, el cual no se vera cuando la pagina haya sido procesada (renderizada).
<%-- Comentario de Servidor --%>
Cabe recalcar que existen muchos mas usos que pueden visualizar a fondo en los siguientes enlaces:
http://weblogs.asp.net/ahmedmoosa/archive/2010/10/06/embedded-code-and-inline-server-tags.aspx
http://support.microsoft.com/kb/307860/es
http://www.jstawski.com/archive/2007/11/13/container-dataitem-what-exactly-is-this.aspx
EJEMPLO PRÁTICO
Default.aspx
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <%= css %>
- </head>
- <body>
- <form id="form1" runat="server">
- <%= html %>
- </form>
- <%= js %>
- </body>
- </html>
Default.aspx.cs
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
-
- public partial class _Default : System.Web.UI.Page
- {
- protected string css, html, js;
- protected void Page_Load(object sender, EventArgs e)
- {
- css = "<style>p{ text-align:justify; }</style>";
- html = "<p>Hola Mundo</p>";
- js = "<script>alert('Increble!');</script>";
- }
- }
Podemos Observar que estamos escribiendo en la página contenido html, css y javascript. Perfectamente nosotros podemos traer información de nuestra Bases de Datos y formar la estructura html que deseemos, concatenando con nuestros datos.
Con respecto a enlazando datos, en la siguiente captura podemos ver un ejemplo sencillo de un GridView el cual se renderizará en una tabla con 2 columnas, la primera la estamos formando como nosotros deseemos, dentro del ItemTemplate podemos formar cualquier estructura html, en este caso serán enlaces que por ejemplo nos podrán llevar al detalle de un producto, podemos observar que al igual que el DataField del BoundField al Eval se le proporciona el nombre de una columna.
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- <asp:GridView ID="GridView_Example" runat="server" EnableModelValidation="True" AutoGenerateColumns="False">
- <Columns>
- <asp:TemplateField>
- <ItemTemplate>
- <a href="<%# Eval("ProductId","Product.aspx?productId={0}") %>">Visualizar</a>
- </ItemTemplate>
- </asp:TemplateField>
- <asp:BoundField DataField="ProductName" HeaderText="Producto" SortExpression="ProductName" />
- </Columns>
- </asp:GridView>
- </form>
- </body>
- </html>
Espero que les haya gustado y practiquen por ustedes mismos, debido a que como vimos los bloques de código embebido son muy útiles y fáciles de emplear. A nivel personal pienso que Razor se debe en gran parte a esto, permitiendo escribir contenido dinámico del lado del servidor con nuestro contenido html estático de nuestras paginas sin la necesidad de emplear controles de servidor.
Hasta la próxima ;)
79e90225-b53e-4e18-a16b-d2e94745dc09|0|.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04