Interpretar código HTML en Vistas
¿Cómo conseguimos que en nuestra vista se vea algo escrito en HTML?
Ante todo debemos de saber que podemos hacer que nuestro HTML se vea en la vista integrando este en un controlador. Con esto nos referimos a no escribir HTML en la vista, si no simplemente invocarlo, creando así una página mucho más limpia.
Para ello tenemos que seguir los siguientes pasos:
- Creamos un nuevo proyecto, y en siguiente elegimos que sea MVC (Sin host en la nube)
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/imagen1_zpszy2ygf5m.png
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/imagen2_zpstrws2wlm.png - Como podemos ver, al crear así el proyecto se nos crean unas carpetas por defecto. Las que nos interesan en estos momentos es la de Views y Controllers. Dentro de ellas, podemos ver, en Views una Carpeta llamada Home, en la cual dentro tenemos el Index principal de la página. Para probar la interpretación de HTML lo haremos aquí, pero si no, siempre podemos añadir una nueva dando click derecho sobre la carpeta de Home. Por otro lado, en la carpeta Controllers, la que nos interesa es la de Home ya que es la que vamos a utilizar.
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/imagen3_zpseeu6ydos.png - Le damos doble click en el controlador para que se nos abra, y nos fijamos que ya tenemos creado un ActionResult para el Index, ya que venía por defecto. En caso de crear una nueva vista, deberíamos crear uno nuevo justo debajo de los que ya están. Pero como usamos ese, es en ese dónde vamos a colocar nuestro código HTML.
Aquí vemos cómo está vacío y el lugar dónde vamos a colocarlo
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/Imagen4_zpsxnlzrfed.png
En este caso ya vemos cómo tenemos el código puesto.
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/Imagen5_zpsqmbuoodq.png - Creamos una variable String a la que llamamos título, y le damos el valor de un código HTML básico. Un h2 con un estilo de color y una frase.
- Luego creamos el ViewBag que es dónde se va a guardar nuestro título.
- Tras eso nos vamos a nuestra vista
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/imagen6_zpsuuerj23d.png - Y lo que tenemos que añadir es nuestro ViewBag. Pero no podemos añadirlo sin más así.
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/Imagen7_zpsdkqvhdmw.pngPorque se nos quedaría de este modo, en el cual podemos ver que no se interpreta el código, si no que simplemente nos lo muestra
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/Imagen8_zps7kg6hdat.png - Para ello tenemos que usar una función específica que nos hará mucho más fácil interpretar código HTML en nuestra página sin llenar esta de código HTML, al igual que lo podemos utilizar para agregar algo puntual. La función es @Html.Raw
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/Imagen9_zpsotbvciqa.png
En la cual ponemos entre paréntesis lo que queremos que interprete, en este caso, nuestro ViewBag.Titulo. - Al cargar la página, ya no veremos el código escrito en sí, si no el código interpretado, es decir, veremos el texto escrito anteriormente, con un estilo de h2 y en color rojo.
http://i1376.photobucket.com/albums/ah15/CarlaTajamar/Imagen10_zpsfwh3wlrd.png
Y ya está, tendríamos en nuestro controlador un código HTML que sería visible con todo lo que le hayamos puesto de propiedades en nuestra Vista.
Descripción: Cómo hacer que en una vista en MVC, se interprete HTML desde un controlador. Qué función utilizar para conseguir esto.
Autor/a: Carla Gradillas
Curso: Microsoft MCSD Web Applications + SharePoint Apps
Centro: Tajamar
Año académico: 2016-2017
LinkedIn: www.linkedin.com/in/CarlaGradillas