TUT: AngularJS Parte 1 de 12: Introducción a AngularJS


Introducción
Recientemente comencé a aprender AngularJS, fue muy complicado para mí encontrar algún buen articulo detallado o un tutorial para principiantes de AngularJS. He tenido que leer de diferentes artículos, libros y tutoriales. Por eso decidí crear paso a paso ayuda para aprendices como yo, para que encuentren una ayuda completa de un singular canal. Angular es un rico framework por eso decidí escribir una serie de artículos que ayudaran a principiantes quienes quieran aprender a trabajar en SPA(Single Page Application) usando AngularJS. Estoy asumiendo que los lectores de este tutorial tienen noción de HTML y JavaScript/Jquery. Vamos a empezar con un corto pero detallado tutorial AngularJS donde serás capaz de entender rápidamente el poder de AngularJS en el mundo de la web.
Antecedentes

Habran oido a gente hablar de MVC/MVVM/MV*/MVW(Model View Whatever) o alguna vez han trabajado con estos, en algunos otros lenguajes de programación. Aunque MV*/MVW no son conceptos específicos de AngularJS, sino más bien un enfoque de arquitectura de programación el cual es implementado en variedades de lenguajes de programación y entornos de desarrollo. Esto depende del arquitecto de la arquitectura en como quiere la arquitectura del software y AngularJS provee facilidades para diseñar la aplicación en Model View and Whatever que quieres tener(vamos a decir MVC, MVVM etc.). Hay un montón de temas que vamos a estar cubriendo uno por uno en la parte posterior del presente tutorial, pero voy a tratar de hacer que estés familiarizado con al menos algunas de las terminologías que he utilizado aqui en esta parte del tutorial.
Bueno primero vamos a tratar de entender el concepto MV* relativo a AngularJS

Vista
La vista en una aplicación en realidad es una pieza que es representado en un navegador a través del usuario puede interactuar o ver cualquier dato que haya sido solicitada. en una aplicación AngularJS la vista esta compuesto por directivas, filtros y data-bindings. pero para hacer vistas simples y mantenibles nosotros no incluimos todo el código en la Vista. esto nos ayuda a separar el código de la vista y también hace que sea fácil escribir pruebas para la lógica de negocios.

Controlador
El controlador tiene toda la lógica de nuestra aplicación en AngularJS. El controlador controla y prepara lo datos en el formulario para que pueda ser presentado en la vista. Funcionalmente que controlador actualmente hace esto, que recoge todos los datos representados en el formulario y toma de la vista y lo asigna al modelo después de validarlo. El controlador es responsable de comunicar código de servidor para recuperar los datos desde un servidor utilizando peticiones Ajax y enviar los datos al servidor desde la vista.

Model/View Model/$Scope
Lo más importante y parte principal de la arquitectura MV* es el modelo o View Model o $Scope. $Scope es un término que es introducido en AngularJS y lo revisaremos en los posteriores artículos del presente tutorial. Model es el puente entre el Controlador y la Vista. Vamos a suponer que tenemos a un controlador asignado para el registro de usuarios, para este propósito se puede tener diferentes vistas para escritorio y otros vista para móviles.

En realidad el controlador esta en blanco acerca de las vistas y no tiene información acerca de las vistas y similarmente la Vista es independiente de la lógica implementada o presentación de datos en el controlador. $scope actúa como un tunel entre las vista y controladores.
La imagen de arriba está relacionada  al ejemplo de aplicación que vamos a crear en la parte posterior del artículo. Pero por ahora de la imagen puedes obtener una idea del patrón  MV*


¿Qué es exactamente AngularJS?
En mis términos AngularJS es nada diferente a HTML plano, sino simplemente una extensión para HTML con nuevos atributos. AngularJS es un framework estructurado JavaScript MV* o MVW para aplicaciones web dinámicas. Este es mantenido por Google para permitir desarrollar aplicaciones web con buena arquitectura y fácilmente mantenibles. AngularJS hace uso de programación declarativa para construir interfaces de usuario. AngularJS esta del lado del cliente y todas las cosas tienen suceso en los navegadores y se obtiene elegantes e independientes aplicaciones.
¿Por qué usar AngularJS?

Hay muchos framework front-end disponibles en el mundo web como Backbone, Knockout, Ember, Spline, etc. y todos de ellos tienen sus pro y contras. Pero como en este tutorial es acerca de AngularJS surge la pregunta ¿Que de peculiar hay en AngularJS? Aqui esta la respuesta a todas tus preguntas.

Con AngularJS necesitas escribir menos código, ya que este te permitirá reutilizar componentes. También este provee una manera fácil de dos vías bindings e inyección de dependencias. También AngularJS esta del lado del cliente todas las cosas suceden en el navegador, lo que da la sensación de aplicaciones independientes(Aplicación de escritorio).
Algunas de las razones porque preferir AngularJS es más bien porque AngularJS ha llegado con la opción con arquitectura para aplicaciones modernas que son descritas a continuación:


1. Se puede crear una plantilla y reutilizar en múltiples aplicaciones al mismo tiempo.
2. Puedes enlazar datos a cualquier elemento de dos formas, en ambos sentidos ya que significa se realiza el cambio de datos automáticamente cambiará elementos y cambio de elementos cambiara los datos.
3. Puedes directamente llamar al código code-behind en su HMTL.
4. Puedes validar formularios y campos de entradas antes de realizar el submit, sin escribir una sola línea de código.
5. Permite el control completo de la estructura DOM muestra/oculta cambios de todo con las propiedades de AngularJS.
6. AngularJS permite escribir flujo básico de testeo end-to-end, unit-testing y UI mocks.

En resumen, AngularJS provee todas las caracteristicas que necesitas para construir una aplicación CRUD como data-binding, validación de datos, ruteo de URL, componente HTML reutilizable y lo más importante inyección de dependencia.

Usando el Código

Vamos a comenzar con un plano HTML el cual no hay nada que hacer con AngularJS. primero creamos una página HTML Pargina1.html y agregamos una etiqueta DIV con un ID.



Nota: Para realizar los ejemplos puedes utilizar cualquier editor de texto en mi caso estoy usando SublimeText 3.0, el cual me permite instalar un paquete para la sintaxis de AngularJS(puedes revisar el TIP: Instalar paquete de Angular en SublimeText 3.0).

Ahora, vamos a seguir adelante y vamos a tratar de familiarizarnos con la terminología AngularJS que será usado en esta parte del tutorial. Vamos ahora a modificar nuestra página HTML y agregar referencia AngularJS para la página HTML el cual puedes o descargarlo de aquí(https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js) o usar como un script de referencia dentro de la secion HEAD de la pagina. En esta aplicación de ejemplo hemos descargado el archivo y referenciado de una ubicación física. También agregaremos algunas directivas más específicas para AngularJS.

Las Directivas no son mas que etiquetas y atributos HTML(Veremos mas esto en la siguiente parte del tutorial). Angular provee numerosas directivas ya definidas como ng-app, ng-controller, ng-class,ng-repeat y muchos más. puedes también crear directivas personalizadas el cual aprenderemos en la siguiente parte del tutorial. Aqui esta disponible la referencia al API(https://docs.angularjs.org/api/) para AngularJS, puedesbuscar y obtener mas informacion acerca de todas las directivas o descargar Angular Cheat Sheet(http://www.cheatography.com/proloser/cheat-sheets/angularjs/)



En el código anterior, hemos usado algunas directivas ng-app, ng-controller a un delimitador {{ }} para que AngularJS pueda evaluar la expresión. ahora la pregunta llega ¿Qué es exactamente ng-app y ng-controller? y ¿Qué importancia tiene en una aplicación AngularJS?.

ng-app es el importante de todas las directivas en AngularJS. define el alcance de nuestra aplicación que AngularJS puede entender y este puede ser usado dentro la etiqueta HTML o con la etiqueta DIV si se quiere definir el alcance para la extensión de un DIV. En nuestro caso queremos alcanzar la seccion DIV solamente, esto es porque tenemos un atributo ng-app asignado a DIV. Se puede asignar en la etiqueta HTML si se desea. en nuestro ejemplo hemos descrito que tiene un controlador llamado “MyController” y se quiere usar datos del controlador así que necesitamos proveer el valor ng-app tengo asignado con el nombre “MyApp”.

Otro atributo o se debería decir directiva porqu esta definido aqui es ng-controller. la directive ng-controller agrega una clase controlador a la vista. Esto dice a AngularJS que el controlador para el elemento DOM tiene el nombre “MyController” y los elemento hijos DOM tendrán el mismo controlador para ellos a menos que se especifique explícitamente a un nuevo controlador para ellos usando ng-controller. Es esta aplicación tenemos un controlador llamado “myController” el cual está agregado a ng-app=”MyApp”.

y aquí llega la tercera cosa {{ }} el cual nunca lo hemos vista en HTML plano o javascript(Jquery. {{ }} es el delimitador por defecto de AngularJS para límites de expresión. Esto tiene que ser usado cuidadosamente en directivas o atributos HTML y la razón es como AngularJs maneja internamente expresiones.

Vamos a proceder con la parte restante del ejemplo de aplicación y ver lo que tiene que hacer a continuación. tenemos creado un archivo llamado “app.js” esto se puede ver en el siguiente código:


Puedes ver que hay algunas cosas como angular.module. Module es como un contenedor para diferentes parte de nuestra aplicación como controladores, servicios, filtros, directivas, etc. Usando módulos podemos dividir nuestra aplicación en múltiples partes el cual trabaja de forma independiente. Nosotros tenemos asignado el módulo a una variable “app” el cual contendrá nuestro controlador dentro de ella.

ahora crearemos otro archivo llamado “mycontroller.js” el mismo que tiene el siguiente código.


Tenemos un nuevo término aquí “$scope”. scope mantiene la data Model que necesitamos para pasar a la vista. Esto usa AngularJs mecanismos Data Binding para enlazar datos del modelo a la vista.

finalmente la página HTML debería verse como el siguiente código:
Cuando abras en el navegador Pagina1.html verás lo siguiente:
Puntos de Interés


En esta parte del tutorial hemos visto una introducción acerca de AngularJS con una aplicación de ejemplo. Este tutorial debería ser de ayuda para iniciar o quienes estén interesados en trabajar con SPA.

¿Que hay para la siguiente parte?
AngularJS Parte 2 de 12: Data Binding en AngularJS

TIP: Instalando el Paquete de AngularJS en SublimeText 3.0

SublimeText es un editor que nos facilita el desarrollo de aplicaciones web, es gratuito( link de descarga: http://www.sublimetext.com/3) , y permite extender a mas funcionalidades a través de la instalación de paquetes, en la nueva versión de SublimeText 3.0 la manera como se realiza la instalación del paquete de AngularJS(permite el reconocimiento de la sintaxis de AngulasJS) es como sigue:


Paso 1: Primero instalamos el administrador de paquetes(realizado en pyton), yendo a View -> Show Console y pegar el siguiente código:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)


Paso 2: Después abrimos el administrador de paquetes presionando la tecla Ctrl +Shift+P y digitamos "Package Install" lo ubicamos y después digitamos "AngulasJS" y lo seleccionamos y listo ya esta instalado y podemos programar en Angular.

TUT: Aprender ASP .NET MVC Paso a Paso en 7 días(Día 6)


¿Que hicimos en los últimos 5 días?

Este artículo es la continuación de Aprender paso a paso ASP.NET MVC en 7 días y puedes revisarlo en los link siguientes:


¿Cuál es la agenda para este dia 6?
Para el día 6 tenemos 5 grandes laboratorios:.
  • Lab 22: Modos de Visualización(MVC para móviles).- Soporte móvil usando la característica “DisplayMode”
  • Lab 23: Proveedor MVC OAuth.- Integrar la aplicación usando Facebook, Twitter o cualquier otros sitios usando “OAuth”.
  • Lab 24: Enlazador de Modelo MVC: Uso de enlazadores de modelos para enlazar la interfaz de usuario y las clases del modelo, si los nombres de propiedad son diferentes.
  • Lab 25: Diseño Razor.- Sintaxis Razor
  • Lab 26: Métodos de ayuda Html Personalizado.- Creando tu propio motor de vista personalizado.
  • ¿Que hay para el último día?


Lab 22: Modos de Visualización(MVC para móviles)


Introducción
Este es un mundo de pequeños dispositivos es decir móviles. Como un desarrollador MVC se espera un gran apoyo de la plantilla MVC de Microsoft para el mismo. Ahora las pantallas de escritorio y pantallas de móviles tienen una alta variación en tamaño.
Si nos gustaría crear diferentes pantallas para escritorio y diferentes pantallas para móviles. Por ejemplo creariamos “Home.aspx” para escritorio normal y “Home.mobile.aspx” para móvil. Si MVC puede automáticamente detectar el tipo de dispositivo y redireccionar a la página apropiada esto salvaría mucho trabajo. Esto es automatizado usando “MVC Display Mode”.
Cuando cualquier solicitud HTTP llega a la aplicación web esta solicitud HTTP tiene un valor llamado “User Agent”. Este valor “User Agent” es usado por el modo de visualización MVC(MVC display mode) y la vista apropiada es recogido y redireccionado por el dispositivo. Vamos hacer una demo y ver en directo.


Paso 01: Crear Paginas apropiadas
Así que vamos a crear un proyecto de ejemplo MVC con el nombre MVCSextoDiay y de tipo Basico. Luego vamos agregar 2 vistas “index.aspx” para escritorio y “Index.Mobile.cshtml” para movil como se muestra en la siguiente figura.
Nota: El nombre de la vista “Index.Mobile” tiene que ser igual para que lo reconozca como una viasta para dispositivos móviles. Adicionalmente en esta vista se debe introducir un texto  identificativo por ejemplo:”Este es para Pantallas Pequeñas Móviles”.


También vamos agregar un controlador llamado ”Inicio” en cual invocará a la vista “index”.


Nota: Puedes  ver en el siguiente código que hemos creado un action result  como index. Porque nuestro nombre de vista y nombre de accion son los mismos, nosotros no necesitamos pasar el nombre de la vista dentro de “return view()”.

Paso 02: Eso es todo, así que vamos a probar
Y esto es todo lo que necesitamos hacer. Ahora vamos a ir y probar si el modo de visualización MVC hace honor a su promesa.
Ahora si vas e ingresar el controlador y la acción en el navegador verás como la imagen izquierda de abajo. Si ingresas el mismo controlador y acción usando el emulador de móviles android tu verás la pantalla de la imagen derecha.


Nota: Para probar simulación para móviles en este laboratorio hemos usado el simulador “Opera Mobile”. Tu puedes descargar el emulador de http://www.opera.com/es/developer/mobile-emulator


Paso 03: Más personalización y control
Pero que si queremos más personalización y control.
Si el escritorio muestra “Index.cshtml”
Si el móvil muestra “Index.mobile.cshtml”
Si el móvil Android muestra “Index.Android.cshtml”


Tenemos ya implementado las primeras dos condiciones. Ahora para la tercera condición necesitamos realizar algunos pasos extras. Relajate son absolutamente pequeños y fáciles pero con gran resultado final.
Primer paso es agregar una pagina mas “Index.Android.cshtml” especialmente para Android en la carpeta Vista como se muestra en la siguiente imagen.


El siguiente paso el hacer más cambios en el archivo “Global.asax.cs”.
a. El primer paso es agregar el espacio de nombre “System.Web.WebPages” como se muestra en la siguiente figura.


b. Segundo paso es usar la clase “DisplayModeProvider” y agregar una entrada “Android” dentro de la colección “Modes” como se muestra en el código  de abajo. El siguiente código busca para la cadena “Android” y si encuentra esto captura y redirecciona a la página “Index.Android.cshtml”.
Paso 04: Probar la personalizacion de Moviles
Ahora si ejecutas el simulador de Opera Mobile con Android como un usuario agente como se muestra en la siguiente imagen, veras la pagina Android(Index.Android.cshtml) redireccionado.


Lab 23: Proveedor MVC OAuth


Una de los más procesos aburridos para  un usuario final es registrase en un sitio. Algunas veces esos largos formularios y correos de validación sólo posterga el usuario. Entonces cómo hacer las cosas fáciles mediante la validación de los usuarios utilizando sus cuentas existentes de Facebook/Twitter/Google/LinkedIn/etc. Entonces el usuario usa algo que ya tiene mientras el sitio asegura que este usuario es un usuario propietario.
Esto es logrado usando MVC OAuth(Open Standard for Authorization).


Para implementar OAuth esto es en un proceso de tres pasos.
  • Registrar la aplicación y obtener el ID y Clave.
  • Realizar la autenticación con el sitio de terceros.
  • Una vez autenticado hace navegar el sitio.


Paso 1: Registrar la aplicación y obtener el ID y la Clave
Entonces el primer paso es registrar la aplicación con el sitio de terceros. Para este laboratorio usaremos Google para la autenticación abierta. Por favor nota este paso varía para Twitter, Facebook y otros sitios. Ir a https://console.developers.google.com/ , crear un proyecto
Seleccionar el proyecto y en la columna lateral izquierda la opcion Credentials
En el siguiente apartado especificamos el tipo de aplicación, en nuestro caso una aplicación web e indicamos que la URL es http://localhost.

Pulsamos el botón “Create Cliend ID”  y nos llevará al panel de control donde podremos ver el API Key generado que tendremos que configurar más adelante en nuestra aplicación.


Paso 2: Crear un sitio MVC para autenticación con OAuth
Ahora que tenemos el ID sigamos adelante y crear una Aplicación de Internet. Estamos creando una aplicación de internet para que podamos obtener algo ya hecho o se puede decir codigo plantilla para OAuth.
Una vez que el proyecto es creado abrir la clase “OAuthConfig.cs”  del folder “App_start”.
En este archivo de configuración encontrarás el método “RegisterAuth”, lo habilitamos para GoogleCliente.


Paso 3: Iniciar el navegador
Esto es todo lo que hay que hacer, ahora ejecutar la aplicación y dar click en “Iniciar Sesion”


La siguiente pantalla presenta dos opciones, en el lado izquierdo donde puedes loguearte de forma local usando la autenticación “Forms” y en la derecha dispones de proveedor de terceros. Clickear en el botón Google e ingresar las credenciales de la cuenta.


Lab 24: Enlazador de Modelo MVC
Introducción
El siguiente código es un simple formulario HTML hace un post a “SubmitCustomer”
La acción “SubmitCustomer” esta dentro de un objeto Customer. Este objeto “Customer” es producido automáticamente con los datos que son llenados en los cuadros de texto, sin ningún tipo de unión o asignaciones.


¿Conoces porque el objeto Customer llena automáticamente?. Esto es porque el nombre de los cuadros de textos y la propiedad nombre de la clase “Customer” son iguales.


Pero que si los nombres de los cuadros de texto no son iguales a los nombres de las propiedades de la clase “Customer”.
En otras palabras el nombre del textbox HTML es “txtCustomerCode” y el nombre de
la propiedad  de la clase es “CustomerCode”. Aquí es donde los enlazadores de modelo entran como se puede ver en la siguiente imagen.
Model binder mapea los elementos HTML del formulario al modelo. Este actúa como un puente entre la interfaz de usuario HTML y el modelo MVC. Así que vamos hacer algunos manejos para ejercicio con “ModelBinder”.


Paso 1: Crear “EnterCustomer.cshtml” y el controlador
El primer paso es crear una vista “EnterCustomer.cshtml” dentro de nuestro proyecto ya creado “MVCSextoDia”, el cual tomará datos de “Customer”
Para invocar este formulario necesitamos una acción en el controlador “Customer” porque no podemos invocar directamente a un vista en MVC, necesitamos hacerlo vía un controlador.


Paso 2: Crear el modelo Customer
El siguiente paso es crear un modelo “Customer”. Por favor nota la propiedad nombre  de la clase “Customer” y el nombre de los cuadros de texto de la UI HTML son diferentes.


Paso 3: Crear el enlace que hace el mapeo
Ahora debido que los nombres de los elementos de la UI y la clase “Customer” tienen diferentes nombres necesitamos crear el enlazador “Model”. Para crear la clase enlazador de modelo necesitamos implementar la interfaz “IModelBinder”. Pa lo cual agregamos una clase “CustomerBinder” dentro de la carpeta Controller. En el siguiente código puedes ver como hemos escrito el código de mapeo dentro del método “BindModel”.


Paso 4: Conectar el mapeador con la acción
Ahora que tenemos en conector, tenemos la UI HTML entonces es tiempo de conectarlos. miramos en la acción “SubmitCustomer” del siguiente código.
el atributo “ModelBinder”  conecta con el objeto “Customer”.




Paso 5: Disfruta la salida
Ahora al ingresar la acción “EnterCustomer” el cual incova formulario de entrada de Customer.
Cuando llenas los datos y haces click en el botón Enviar, veras que se llena el objeto “Customer” con un punto de interrupción, con en la siguiente imagen.


Lab 25: Diseño  Razor
Introducción
Layouts son como paginas maestras en ASP.NET web form. Páginas Maestras dan como un aspecto estándar para las vistas Web Form(ASPX) mientras que layout dan  una vista estándar para las vistas Razor(CSHTML). En caso seas nuevo en Razor ver el Lab 12: Vistas Razor MVC.
En este laboratorio veras como implementar  Diseño Razor.


Paso 1: Crear una página de diseño
Lo primero que nosotros necesitamos crear es una pagina de diseño. Dentro de nuestro proyecto web MVCSextoDia, vamos a la carpeta vista y hacemos click derecho , agregar nuevo elemento y seleccionar la plantilla “Página de Diseño de MVC 4” como se muestra en la siguiente imagen.


En la página de diseño MC necesitamos definir la estructura común el cual será aplicado a todas las páginas razor. Puedes ver en la siguiente diseño de página tenemos tres secciones Cabecera, cuerpo y pie. La cabecera y el pie son secciones personalizados mientras “RenderBody”  es algo que viene de MVC y muestra en el contenedor body.


Paso 2: Crear vista y aplicar el diseño
Ahora una vez que hemos creado el diseño los siguiente es aplicar esto a las vista.


Para aplicar el diseño de página, seleccione el botón “...” como se muestra en la anterior imagen, y seleccione el diseño de página como se muestra en la siguiente imagen.


Una vez que la vista es creada la primera línea de código indica que diseño de página esta usando. esto se ve como el siguiente código.
Ahora lo final es en la vista llenar todas las secciones. Las secciones Pie y cabecera son secciones personalizadas así que necesitamos usar el comando @section seguido por el nombre de la sección y despues lo que queramos asignar en esas secciones. Todos los otros textos  son parte del body(@RenderBody).
Paso 3: Crear un controlador y ver el diseño en acción
Ahora que tenemos todo asignado es tiempo de crear un controlador y método para invocar la vista.


Deberías ver una cosa como se ve en la siguiente imagen. puedes ver como la plantilla de diseño es aplicado a la vista.


Lab 26: Métodos Personalizados HTML Helper
Introducción
En el dia 1 hablamos acerca de clases MVC Helper. Esto nos ayuda a trabajar con controles de ingresos de una manera más eficiente. Cuando tipeas “@Html” en una vista  MVC Razor se consigue algo como esto en IntelliSense.
El método Html Helper nos crea controles de entrada Html como Textbox, Radio button, Checkbox, Text Area de una manera facil y rapido. En este laboratorio vamos a dar un paso adelante y crear métodos Helper personalizados.
Para crear método Html Helper Personalizados, necesitamos usar extensión de métodos. Extensión de métodos es un concepto que fue introducido en .NET 3.5.


Paso 1: Agregar una simple clase
Vamos a trabajar con nuestro proyecto proyecto MVCSextoDia. Agregar un controlador llamado EjemploHelper y un método llamado Index. Crear una nueva carpeta dentro del proyecto MVC llamado ExtensionClases.


Paso 2: Marcar la clase como estática y agregar métodos.
Para el método de extensión necesitamos agregar una clase como estática.
en este clase vamos a crear un nuevo método estático llamado “HolaMundoLabel” el cual retornará un valor de tipo MvcHtmlString y aceptando un parámetro HtmlHelper.


Nota: Asegurar agregar la palabra “this” antes de declarar el primer parámetro porque el objetivo es crear un método extensión para la clase HtmlHelper.




Paso 3: Usa la clase Helper
El paso final es importar el espacio de nombres “System.Web.Mvc.Html”. necesitamos importar este espacio de nombre, porque por defecto TextBoxFor, TextAreaFor y otros métodos de extensión de HTML Helper estén disponibles dentro de este espacio de nombres. Se requiere solo si vamos a usar uno de estos métodos de extension.
Simplemente escribimos el siguiente código en la vista y construir el proyecto.
Nota:Note que en la parte superior se asignó la sentencia using que referencia a la clase extensión creada previamente.


Construya la aplicación, presionando F5 y probar la aplicación.
¿Que hay para el último dia?

El último día será principalmente en cómo integrar los Framework JavaScript de Angular y KO con MVC.