\u00a1Bienvenido a esta gu\u00eda introductoria sobre Razor Syntax! Si est\u00e1s dando tus primeros pasos en el desarrollo web con ASP.NET o quieres aprender a crear p\u00e1ginas din\u00e1micas de manera sencilla, est\u00e1s en el lugar correcto. En este art\u00edculo, exploraremos qu\u00e9 es Razor, c\u00f3mo funciona, su historia y los conceptos b\u00e1sicos para que puedas empezar a usarlo con confianza. Todo esto con un enfoque claro y pr\u00e1ctico, ideal para quienes est\u00e1n comenzando. Empecemos en el mundo de Razor y descubramos c\u00f3mo construir aplicaciones web modernas.<\/p>\n\n\n\n
Razor es una herramienta creada por Microsoft que te permite mezclar c\u00f3digo HTML con c\u00f3digo del lado del servidor, como C#, de forma natural y fluida. Es un motor de plantillas de c\u00f3digo abierto que simplifica la creaci\u00f3n de p\u00e1ginas web din\u00e1micas dentro del ecosistema de ASP.NET. Con Razor, puedes incrustar l\u00f3gica directamente en tus archivos HTML, lo que hace que el contenido se genere din\u00e1micamente seg\u00fan las necesidades de tu aplicaci\u00f3n. Los archivos que usan Razor suelen tener la extensi\u00f3n .cshtml, que combina C# y HTML en un solo lugar.<\/p>\n\n\n\n
Piensa en Razor como un puente que conecta el dise\u00f1o de tu p\u00e1gina (HTML) con la l\u00f3gica de tu aplicaci\u00f3n (C#). En lugar de mantener el c\u00f3digo y el dise\u00f1o en archivos completamente separados, Razor te permite escribir expresiones de C# justo donde las necesitas dentro del HTML. Esto hace que el desarrollo sea m\u00e1s r\u00e1pido y el c\u00f3digo m\u00e1s f\u00e1cil de entender.<\/p>\n\n\n\n
Ejemplo b\u00e1sico:<\/p>\n\n\n\n
<h1>Bienvenido, @Usuario.Nombre!<\/h1>\n<p>La fecha actual es: @DateTime.Now.ToShortDateString()<\/p><\/code><\/pre>\n\n\n\nEn este ejemplo, @Usuario.Nombre<\/code> y @DateTime.Now.ToShortDateString()<\/code> son fragmentos de c\u00f3digo C# que el servidor eval\u00faa antes de enviar la p\u00e1gina al navegador. Cuando el usuario vea la p\u00e1gina, solo ver\u00e1 el resultado final, como \u00abBienvenido, Ana!\u00bb o \u00abLa fecha actual es: 26\/04\/2025\u00bb. \u00a1Es como magia, pero con c\u00f3digo!<\/p>\n\n\n\nHistoria y Evoluci\u00f3n<\/h3>\n\n\n\n
Razor naci\u00f3 con ASP.NET Web Pages, una parte de WebMatrix, como una forma m\u00e1s ligera y accesible de crear sitios web din\u00e1micos en comparaci\u00f3n con el modelo m\u00e1s r\u00edgido de Web Forms. Su simplicidad y potencia hicieron que r\u00e1pidamente se ganara un lugar en el coraz\u00f3n de los desarrolladores, y Microsoft decidi\u00f3 integrarlo en otras tecnolog\u00edas de ASP.NET. Aqu\u00ed tienes un repaso r\u00e1pido de c\u00f3mo ha evolucionado:<\/p>\n\n\n\n
\n- ASP.NET MVC<\/strong>: Razor se convirti\u00f3 en el motor de vistas predeterminado (aunque puedes usar otros si quieres). En MVC, Razor te permite crear vistas que trabajan con modelos de datos bien definidos, lo que hace que el c\u00f3digo sea m\u00e1s organizado y reutilizable.<\/li>\n\n\n\n
- Razor Pages<\/strong>: Este modelo simplifica el desarrollo web al permitirte trabajar con p\u00e1ginas individuales (archivos .cshtml) que combinan el dise\u00f1o y la l\u00f3gica en un solo lugar. Cada p\u00e1gina puede tener un archivo \u00abcode-behind\u00bb (llamado PageModel) para manejar la l\u00f3gica.<\/li>\n\n\n\n
- Blazor<\/strong>: Una tecnolog\u00eda m\u00e1s moderna que usa Razor para crear interfaces de usuario interactivas. Con Blazor, puedes escribir aplicaciones que corren en el navegador (usando WebAssembly) o en el servidor, todo con C# y la misma sintaxis de Razor.<\/li>\n<\/ul>\n\n\n\n
Esta evoluci\u00f3n muestra lo vers\u00e1til que es Razor. Ya sea que est\u00e9s construyendo una aplicaci\u00f3n web tradicional, una p\u00e1gina sencilla o una interfaz interactiva, Razor est\u00e1 ah\u00ed para ayudarte con una sintaxis clara y consistente.<\/p>\n\n\n\n
Ventajas de Razor<\/h3>\n\n\n\n
\u00bfPor qu\u00e9 elegir Razor para tus proyectos? Aqu\u00ed te dejo algunas razones que lo hacen destacar:<\/p>\n\n\n\n
\n- C\u00f3digo limpio y f\u00e1cil de leer<\/strong>: Razor reduce la cantidad de c\u00f3digo necesario para combinar HTML y C#. Comparado con tecnolog\u00edas m\u00e1s antiguas como Web Forms, el resultado es un c\u00f3digo m\u00e1s claro, con menos ruido visual, lo que facilita entender qu\u00e9 hace cada parte.<\/li>\n\n\n\n
- F\u00e1cil de mantener<\/strong>: Gracias a su sintaxis intuitiva, es m\u00e1s sencillo revisar y actualizar el c\u00f3digo, incluso meses despu\u00e9s de haberlo escrito. Esto es clave para proyectos a largo plazo.<\/li>\n\n\n\n
- Integraci\u00f3n con herramientas de Microsoft<\/strong>: Razor funciona de maravilla con Visual Studio y Visual Studio Code. Obtienes soporte completo con IntelliSense (sugerencias de c\u00f3digo autom\u00e1ticas), herramientas de depuraci\u00f3n y otras funcionalidades que hacen que programar sea m\u00e1s r\u00e1pido y agradable.<\/li>\n\n\n\n
- Flexibilidad total<\/strong>: Razor se adapta a distintos enfoques de desarrollo, como MVC, Razor Pages o Blazor. No importa el tipo de proyecto, Razor te ofrece una forma consistente de trabajar.<\/li>\n<\/ul>\n\n\n\n
2. Sintaxis B\u00e1sica de Razor<\/h2>\n\n\n\n
La magia de Razor est\u00e1 en su simplicidad: con unas pocas reglas y el s\u00edmbolo @<\/code>, puedes combinar HTML y C# sin complicaciones. En esta secci\u00f3n, te explicaremos los fundamentos de la sintaxis de Razor para que puedas empezar a escribir c\u00f3digo din\u00e1mico desde el primer momento. \u00a1Prep\u00e1rate para ver c\u00f3mo el @<\/code> se convierte en tu mejor amigo en el desarrollo web!<\/p>\n\n\n\nTransiciones con @<\/h3>\n\n\n\n
El coraz\u00f3n de Razor es el s\u00edmbolo @<\/code>. Este peque\u00f1o car\u00e1cter le dice al motor de Razor: \u00ab\u00a1Oye, aqu\u00ed viene c\u00f3digo C#!\u00bb. Con \u00e9l, puedes insertar expresiones o bloques de c\u00f3digo directamente en tu HTML, y Razor se encarga de evaluarlos en el servidor antes de enviar la p\u00e1gina al navegador.<\/p>\n\n\n\nEjemplo sencillo:<\/p>\n\n\n\n
<p>El a\u00f1o actual es: @DateTime.Now.Year<\/p><\/code><\/pre>\n\n\n\nEn este caso, @DateTime.Now.Year<\/code> se reemplaza por el a\u00f1o actual (por ejemplo, \u00ab2025\u00bb) cuando la p\u00e1gina se renderiza. Razor es lo suficientemente inteligente para entender qu\u00e9 es c\u00f3digo y qu\u00e9 es HTML, as\u00ed que no necesitas preocuparte por cerrar cada expresi\u00f3n manualmente en la mayor\u00eda de los casos.<\/p>\n\n\n\nExpresiones Impl\u00edcitas y Expl\u00edcitas<\/h3>\n\n\n\n
Razor te da dos formas de incrustar c\u00f3digo C#: expresiones impl\u00edcitas y expl\u00edcitas. Vamos a desglosarlas para que queden claras:<\/p>\n\n\n\n
Expresiones impl\u00edcitas<\/strong>: Son perfectas para mostrar valores simples, como una variable, una propiedad o el resultado de un m\u00e9todo corto. Solo usas @<\/code> seguido del c\u00f3digo, y Razor detecta autom\u00e1ticamente d\u00f3nde termina la expresi\u00f3n. Son ideales para mantener el c\u00f3digo limpio y directo.<\/p>\n\n\n\n<p>El nombre es: @variableNombre<\/p>\n<p>La fecha es: @ObtenerFecha()<\/p>\n<p>El t\u00edtulo es: @Model.Propiedad<\/p><\/code><\/pre>\n\n\n\nAqu\u00ed, Razor sabe que variableNombre<\/code>, ObtenerFecha()<\/code> o Model.Propiedad<\/code> son expresiones completas y las muestra directamente en el HTML.<\/p>\n\n\n\nExpresiones expl\u00edcitas<\/strong>: A veces, necesitas escribir expresiones m\u00e1s complejas, como c\u00e1lculos matem\u00e1ticos, y Razor podr\u00eda no adivinar correctamente d\u00f3nde termina el c\u00f3digo. En esos casos, usas @(...)<\/code> para definir exactamente qu\u00e9 evaluar. Tambi\u00e9n son \u00fatiles cuando quieres incluir una peque\u00f1a porci\u00f3n de c\u00f3digo C# dentro del HTML.<\/p>\n\n\n\n<p>El resultado es: @(miVariable + otraVariable * 2)<\/p>\n<p>@{ \/* Esto es un bloque de c\u00f3digo, no una expresi\u00f3n *\/ }<\/p><\/code><\/pre>\n\n\n\nNota la diferencia: las expresiones expl\u00edcitas con @(...)<\/code> siempre producen un valor que se muestra en la p\u00e1gina, mientras que los bloques de c\u00f3digo (con @{...}<\/code>), que veremos a continuaci\u00f3n, se usan para l\u00f3gica que no necesariamente aparece en el HTML.<\/p>\n\n\n\nBloques de C\u00f3digo<\/h3>\n\n\n\n
Cuando necesitas escribir m\u00e1s que una simple expresi\u00f3n, los bloques de c\u00f3digo entran en escena. Estos se definen con @{ ... }<\/code> y te permiten incluir l\u00f3gica C# completa, como variables, bucles o condiciones, dentro de tu vista. El c\u00f3digo dentro de un bloque no se muestra directamente en la p\u00e1gina, a menos que uses @<\/code> para renderizar algo espec\u00edfico.<\/p>\n\n\n\nCon los bloques, puedes usar estructuras de control como @if<\/code>, @foreach<\/code>, @for<\/code> o @while<\/code> para generar HTML din\u00e1mico seg\u00fan tus necesidades.<\/p>\n\n\n\nEjemplo pr\u00e1ctico:<\/p>\n\n\n\n
@{\n var mensaje = \"Hola desde el bloque de c\u00f3digo!\";\n var numeroItems = 5;\n}\n\n<h2>@mensaje<\/h2>\n\n@if (numeroItems > 0)\n{\n <p>Tenemos @numeroItems elementos:<\/p>\n <ul>\n @for (int i = 0; i < numeroItems; i++)\n {\n <li>Elemento @(i + 1)<\/li>\n }\n <\/ul>\n}\nelse\n{\n <p>No hay elementos disponibles.<\/p>\n}<\/code><\/pre>\n\n\n\nEn este ejemplo, declaramos variables en un bloque @{ ... }<\/code>, mostramos el mensaje con @mensaje<\/code>, y usamos @if<\/code> y @for<\/code> para generar una lista HTML din\u00e1micamente. F\u00edjate c\u00f3mo Razor alterna sin problemas entre C# (dentro de las llaves) y HTML (como las etiquetas <p><\/code> o <li><\/code>). Esto hace que escribir c\u00f3digo din\u00e1mico sea s\u00faper intuitivo.<\/p>\n\n\n\nComentarios en Razor<\/h3>\n\n\n\n
Los comentarios son esenciales para mantener tu c\u00f3digo organizado y explicarlo a otros (o a ti mismo en el futuro). Razor te ofrece varias formas de a\u00f1adirlos:<\/p>\n\n\n\n
Comentarios de Razor<\/strong>: Usa @* ... *@<\/code> para comentar c\u00f3digo o marcado que solo Razor procesar\u00e1. Estos comentarios no llegan al navegador, por lo que son perfectos para notas internas que no quieres que los usuarios vean en el c\u00f3digo fuente.<\/p>\n\n\n\n@* Este es un comentario de Razor, no aparecer\u00e1 en el HTML final *@\n<p>Contenido visible.<\/p>\n@*\n Este es un comentario de Razor multilinea.\n Muy \u00fatil para explicaciones m\u00e1s largas.\n*@<\/code><\/pre>\n\n\n\nComentarios de C#<\/strong>: Dentro de un bloque de c\u00f3digo @{ ... }<\/code>, puedes usar los comentarios est\u00e1ndar de C#: \/\/<\/code> para una l\u00ednea o \/* ... *\/<\/code> para varias l\u00edneas.<\/p>\n\n\n\n@{\n \/\/ Este es un comentario de C# de una sola l\u00ednea\n var dato = 123;\n \/*\n Este es un comentario\n de C# multilinea.\n *\/\n var otroDato = 456;\n}<\/code><\/pre>\n\n\n\nComentarios de HTML<\/strong>: Tambi\u00e9n puedes usar comentarios HTML est\u00e1ndar (`<!– … –>`), pero ten en cuenta que estos s\u00ed se env\u00edan al navegador y ser\u00e1n visibles si alguien inspecciona el c\u00f3digo fuente de la p\u00e1gina.<\/p>\n\n\n\n3. Elementos Adicionales de Razor<\/h2>\n\n\n\n
Adem\u00e1s de su sintaxis b\u00e1sica, Razor incluye herramientas y directivas que te ayudan a organizar y potenciar tus vistas. Estas caracter\u00edsticas son como los \u00abextras\u00bb que hacen que trabajar con Razor sea a\u00fan m\u00e1s pr\u00e1ctico. Vamos a explorarlas.<\/p>\n\n\n\n
Palabras Clave Reservadas (Directivas)<\/h3>\n\n\n\n
Las directivas de Razor son comandos especiales que comienzan con @<\/code> y te permiten configurar o estructurar tus vistas. Aqu\u00ed tienes las m\u00e1s comunes y c\u00f3mo usarlas:<\/p>\n\n\n\n@model <Tipo><\/code>: Define el tipo de datos que la vista espera recibir (por ejemplo, un objeto con informaci\u00f3n de un usuario). Esto te permite acceder a sus propiedades con @Model<\/code> y obtener sugerencias autom\u00e1ticas (IntelliSense) en tu editor.<\/p>\n\n\n\n@model MiProyecto.Models.Usuario\n\n<h2>Perfil de @Model.Nombre<\/h2>\n<p>Email: @Model.Email<\/p><\/code><\/pre>\n\n\n\nAqu\u00ed, la vista sabe que est\u00e1 trabajando con un objeto Usuario<\/code> y puede acceder a sus propiedades como Nombre<\/code> o Email<\/code>.<\/p>\n\n\n\n@layout <RutaDelLayout><\/code>: Indica qu\u00e9 plantilla maestra (o \u00ablayout\u00bb) usar para la vista. Los layouts son archivos que definen la estructura com\u00fan de tu sitio, como la cabecera, el pie de p\u00e1gina o la barra de navegaci\u00f3n, para que no tengas que repetirla en cada p\u00e1gina.<\/p>\n\n\n\n@layout \"~\/Views\/Shared\/_Layout.cshtml\"\n\n<h1>Contenido espec\u00edfico de la p\u00e1gina<\/h1><\/code><\/pre>\n\n\n\nEsto asegura que la p\u00e1gina use un dise\u00f1o consistente con el resto de tu aplicaci\u00f3n.<\/p>\n\n\n\n
@section <Nombre><\/code>: Te permite definir un bloque de contenido que se insertar\u00e1 en una secci\u00f3n espec\u00edfica del layout. Por ejemplo, puedes incluir scripts personalizados solo para una p\u00e1gina.<\/p>\n\n\n\n@section Scripts {\n <script src=\"~\/js\/pagina.js\"><\/script>\n}\n\n<h1>Mi P\u00e1gina con Script Espec\u00edfico<\/h1><\/code><\/pre>\n\n\n\n@functions { ... }<\/code>: Te permite definir funciones o propiedades C# directamente en la vista. Aunque es \u00fatil para l\u00f3gica sencilla, es mejor mover las funciones m\u00e1s complejas a un archivo separado (como un PageModel) para mantener el c\u00f3digo limpio.<\/p>\n\n\n\n@functions {\n public string ObtenerSaludo(string nombre)\n {\n return $\"\u00a1Hola, {nombre}!\";\n }\n}\n\n<p>@ObtenerSaludo(\"Visitante\")<\/p><\/code><\/pre>\n\n\n\n@page<\/code>: Marca un archivo .cshtml<\/code> como una Razor Page, lo que significa que puede manejar solicitudes directamente sin necesitar un controlador MVC. Es ideal para aplicaciones basadas en p\u00e1ginas.<\/p>\n\n\n\n@page\n@model IndexModel\n\n<h1>P\u00e1gina de Inicio de Razor Pages<\/h1>\n<p>@Model.Mensaje<\/p><\/code><\/pre>\n\n\n\nUso de @@<\/h3>\n\n\n\n
A veces, quieres mostrar el s\u00edmbolo @<\/code> literalmente en tu p\u00e1gina, como en una direcci\u00f3n de correo electr\u00f3nico o un texto. Si escribes solo @<\/code>, Razor pensar\u00e1 que es c\u00f3digo C#. La soluci\u00f3n es simple: usa @@<\/code>, y Razor lo interpretar\u00e1 como un solo @<\/code> en la salida.<\/p>\n\n\n\n<p>Mi direcci\u00f3n de correo es: usuario@@dominio.com<\/p>\n<p>El s\u00edmbolo de Razor es: @@<\/p><\/code><\/pre>\n\n\n\nEl navegador mostrar\u00e1: \u00abusuario@dominio.com\u00bb y \u00abEl s\u00edmbolo de Razor es: @\u00bb. \u00a1Problema resuelto!<\/p>\n\n\n\n
Contenido Incrustado (SVG, JavaScript, etc.)<\/h3>\n\n\n\n
Razor es muy vers\u00e1til y te permite incluir otros tipos de contenido, como gr\u00e1ficos SVG, scripts JavaScript o estilos CSS, sin complicaciones. Solo aseg\u00farate de no usar @<\/code> al inicio de estos bloques, a menos que quieras incrustar c\u00f3digo C# dentro de ellos.<\/p>\n\n\n\nEjemplo:<\/p>\n\n\n\n
<svg width=\"100\" height=\"100\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"blue\" \/>\n<\/svg>\n\n<script>\n \/\/ JavaScript dentro de una vista Razor\n console.log('Hola desde un script en Razor!');\n var userName = '@Model.Nombre'; \/\/ \u00a1Puedes incrustar C# aqu\u00ed!\n console.log('Usuario: ' + userName);\n<\/script><\/code><\/pre>\n\n\n\nAplicaciones y Uso en Proyectos<\/h2>\n\n\n\n
Razor Syntax es una pieza clave en el desarrollo web con ASP.NET, y su versatilidad lo hace ideal para diferentes tipos de proyectos. Ya sea que est\u00e9s construyendo una aplicaci\u00f3n web compleja, una p\u00e1gina sencilla o una interfaz interactiva, Razor te ofrece las herramientas para crear contenido din\u00e1mico de manera eficiente. En esta secci\u00f3n, exploraremos c\u00f3mo se usa Razor en tres enfoques populares: ASP.NET Core MVC, Razor Pages y Blazor. Esto te dar\u00e1 una idea de c\u00f3mo aplicar Razor seg\u00fan el tipo de aplicaci\u00f3n que quieras desarrollar.<\/p>\n\n\n\n
ASP.NET Core MVC<\/h3>\n\n\n\n
En el patr\u00f3n Model-View-Controller (MVC), Razor brilla en las vistas (archivos .cshtml). Las vistas son responsables de tomar los datos enviados por un controlador (a menudo a trav\u00e9s de un objeto llamado ViewModel) y transformarlos en HTML din\u00e1mico para el usuario. Con Razor, puedes generar p\u00e1ginas que se adaptan a los datos, como listas de productos, formularios o paneles de usuario.<\/p>\n\n\n\n
Ejemplo pr\u00e1ctico:<\/p>\n\n\n\n
@model List<MiProyecto.Models.Producto>\n@{\n ViewData[\"Title\"] = \"Lista de Productos\"; \/\/ Esto pasa el t\u00edtulo al layout\n}\n\n<h1>@ViewData[\"Title\"]<\/h1>\n\n@if (Model != null && Model.Any())\n{\n <ul>\n @foreach (var producto in Model)\n {\n <li>@producto.Nombre - @producto.Precio.ToString(\"C\")<\/li> @* Formato de moneda *@\n }\n <\/ul>\n}\nelse\n{\n <p>No hay productos disponibles.<\/p>\n}<\/code><\/pre>\n\n\n\nEn este ejemplo, la directiva @model indica que la vista espera una lista de objetos Producto. Usamos @ViewData para enviar un t\u00edtulo al layout (por ejemplo, para mostrarlo en la pesta\u00f1a del navegador). Luego, con @if y @foreach, generamos una lista HTML de productos con sus nombres y precios formateados como moneda (por ejemplo, \u00ab$19.99\u00bb). Si no hay productos, mostramos un mensaje alternativo. Este enfoque es perfecto para aplicaciones estructuradas donde quieres separar la l\u00f3gica (controladores) del dise\u00f1o (vistas).<\/p>\n\n\n\n
Razor Pages<\/h3>\n\n\n\n
Si buscas algo m\u00e1s simple, Razor Pages es una excelente opci\u00f3n. En este modelo, cada archivo .cshtml act\u00faa como una p\u00e1gina independiente que combina el dise\u00f1o (HTML) y la l\u00f3gica en un solo lugar. Cada p\u00e1gina suele estar vinculada a un archivo \u00abcode-behind\u00bb (.cshtml.cs) llamado PageModel, que maneja las solicitudes del usuario, como cargar datos (OnGet) o procesar formularios (OnPost). La directiva @page es lo que convierte un archivo .cshtml en una Razor Page.<\/p>\n\n\n\n
Ejemplo pr\u00e1ctico:<\/p>\n\n\n\n
@page\n@model MiProyecto.Pages.IndexModel\n@{\n ViewData[\"Title\"] = \"P\u00e1gina de Inicio\";\n}\n\n<h1>@ViewData[\"Title\"]<\/h1>\n\n<p>Bienvenido a la p\u00e1gina de inicio.<\/p>\n\n@if (!string.IsNullOrEmpty(Model.MensajeBienvenida))\n{\n <p>Mensaje: @Model.MensajeBienvenida<\/p>\n}<\/code><\/pre>\n\n\n\nAqu\u00ed, @page define que este archivo es una Razor Page, y @model lo conecta con su IndexModel, que contiene la l\u00f3gica de la p\u00e1gina. Usamos @ViewData para establecer el t\u00edtulo y mostramos un mensaje de bienvenida si existe (Model.MensajeBienvenida). Este modelo es ideal para proyectos m\u00e1s peque\u00f1os o aplicaciones basadas en p\u00e1ginas, como un blog o un sitio personal, donde no necesitas la estructura completa de MVC.<\/p>\n\n\n\n
Blazor<\/h3>\n\n\n\n
Para aplicaciones web m\u00e1s modernas e interactivas, Blazor lleva Razor a otro nivel. Blazor te permite construir interfaces de usuario din\u00e1micas usando C# y Razor, ya sea en el navegador (con WebAssembly) o en el servidor (con Blazor Server). En lugar de escribir JavaScript para la interactividad, usas Razor para definir componentes que combinan HTML, C# y l\u00f3gica de eventos, todo en un solo archivo .razor.<\/p>\n\n\n\n
Ejemplo pr\u00e1ctico:<\/p>\n\n\n\n
@page \"\/contador\"\n\n<h1>Contador<\/h1>\n\n<p>Valor actual: @contador<\/p>\n<button @onclick=\"Incrementar\">Aumentar<\/button>\n\n@code {\n private int contador = 0;\n\n private void Incrementar()\n {\n contador++;\n }\n}<\/code><\/pre>\n\n\n\nEn este ejemplo, la directiva @page \u00ab\/contador\u00bb define una ruta para el componente, accesible en la URL \/contador. El componente muestra un n\u00famero (contador) y un bot\u00f3n que, al hacer clic, ejecuta el m\u00e9todo Incrementar para aumentar el valor. La secci\u00f3n @code contiene la l\u00f3gica C# del componente. Razor en Blazor te permite crear interfaces reactivas sin salir de C#, lo que es ideal para aplicaciones de una sola p\u00e1gina (SPA) o paneles interactivos.<\/p>\n\n\n\n
Razor Syntax<\/h2>\n\n\n\n
Razor Syntax es una herramienta poderosa y f\u00e1cil de aprender que te permite crear p\u00e1ginas web din\u00e1micas con ASP.NET. Su sintaxis clara, basada en el s\u00edmbolo @, te ayuda a combinar HTML y C# de forma natural, mientras que sus directivas (como @model o @page) te dan el control para estructurar tus proyectos. Ya sea que est\u00e9s trabajando con MVC, Razor Pages o incluso explorando Blazor para aplicaciones interactivas, entender los fundamentos de Razor es el primer paso para construir aplicaciones web modernas y robustas.<\/p>\n\n\n\n
Espero que esta gu\u00eda te ha de una base para empezar. Con pr\u00e1ctica, descubrir\u00e1s c\u00f3mo Razor puede adaptarse a tus necesidades, desde sitios web simples hasta aplicaciones complejas. \u00a1Y esto es solo el comienzo! En un pr\u00f3ximo art\u00edculo, exploraremos Razor Syntax de manera m\u00e1s avanzada y aplicada, profundizando en ejemplos pr\u00e1cticos y t\u00e9cnicas que llevar\u00e1n tus proyectos con Razor Pages al siguiente nivel. \u00a1Sigue experimentando, escribiendo c\u00f3digo y explorando las posibilidades de Razor en tus proyectos!<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00a1Bienvenido a esta gu\u00eda introductoria sobre Razor Syntax! Si est\u00e1s dando tus primeros pasos en el desarrollo web con ASP.NET o quieres aprender a crear p\u00e1ginas din\u00e1micas de manera sencilla, est\u00e1s en el lugar correcto. En este art\u00edculo, exploraremos qu\u00e9 es Razor, c\u00f3mo funciona, su historia y los conceptos b\u00e1sicos para que puedas empezar a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[26],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-desarrollo","tag-net"],"_links":{"self":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":0,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"wp:attachment":[{"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/juredev.com\/blog\/wp-json\/wp\/v2\/tags?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}