4 – MVC 3 con Razor ~ Como insertar un tamplate

Hola que tal, hoy voy hablar de como insertar un template en nuestro proyecto MVC 3, bueno sin más preámbulo vamos a empezar.

Lo primero que vamos hacer es descargar un template para que se nos haga más fácil.
image


De esta web voy a descargar un template gratis, hay muchos otros sitios, pero a mi me gusto este.
image

Ahora lo vamos a descargar en la carpeta donde tenemos los estilos en nuestro proyecto MVC.
image

Ahora vamos a cambiar la extensión y el nombre al archivo index.html y lo vamos a nombrar _Layout.cshtml.
image

Si lo editan al archivo van a encontrar todo el html que propone el template.
image

Ahora vamos a reemplazar algunas partes para que podamos usar la template en todas las páginas de nuestro proyecto.
imageimageimageimage

Estas partes serian las más importantes, si se dan cuenta todas las partes que hemos reemplazado nuestro VS nos coloreo con una linea roja abajo, es porque menciona un error, sucede que la página esta en la carpeta Content/themes/browstone/ donde no esta configurado para usarce como template desde este lugar, para ser mas ordenados y para que reconozca nuestro código la tenemos que poner en la carpeta Views, en el lugar de la template original y a la anterior vamos a renombrarla para que quede por las dudas a _Layout2.cshtml.
image

Bien ahora ya podemos ejecutar nuestra aplicación y veremos nuestro template en funcionamiento con MVC 3.
image

Ahora algunos tips, si le cambiamos el nombre a nuestra template, solo tenemos que indicarlo en la page _ViewStart.cshtml que esta en la carpeta Views de nuestro proyecto MVC 3.
image

También podemos indicar que alguna página utilice otra template y que no utilice la que esta por default, esto lo logamos indicando n la vista el layout nuevo.

image
image
De esta forma podemos tener varios template en la misma aplicación y tan solo con una línea podemos cambiar todo el estilo de nuestra página.

Otro tip es que en WebMatrix sucede distinto cuando creamos una aplicación Web con el motor de vista Razor, esto nos crea una Page comun, ahi ya no tenemos la Page _ViewStart.cshtml de MVC 3, en su lugar tenemos una página que se llama _PageStart.cshtml, donde indicamos nuestro template por default.
image

Bueno espero que les allá gustado, ahora los invito a que sigan investigando sobre como usar los template, esto solo es una forma muy interesante y fácil de hacer las cosas con MVC 3, ahora el resumen, de lo que hemos aprendido hoy:

Descargar template de www.template.org.
A convertir un template html a un template cshtml.
Utilizar varios template en una misma aplicación.

Recomendaciones:
WebMatrix parte 8 – Creando una página de borrado de datos
WebMatrix parte 9–Publicando nuestro sitio

Hoy no hable de la palabra reservada @model, porque me pareció que seria muy largo el POST, pero prometo que para el próximo post hablo sobre esto y también le vamos a agregar algo de base de datos.
Para cualquier consulta pueden dejar sus mensajes aquí o mandar me un correo electrónico a moises.rivas@outlook.com.

Anuncios

4 Comentarios Agrega el tuyo

  1. Ezequiel dice:

    Muy bueno el articulo, por desgracia no es tan sencillo modificar un html para que actue como cshtml. Trate de hacerlo con un template de internet, el mismo tiene 395 lineas de codigo y ademas tengo que respetar las rutas de un template, el cual esta operativo, que tiene 55 lineas de codigo. Y para rematar cambiandole el nombre de html a cshtml no me toma bien las palabras clave como “@Scripts.Render…”.

    1. Buenas Ezequiel, la verdad que abría que ver cual es tu caso especifico, este es un ejemplo viejo con MVC 3, ya ahora estamos con versiones más nuevas.

  2. mauro dice:

    Tengo problemas para realizar el ejemplo. como se haria para MVC 2?

    1. En MVC 2 es igual, solo que la página de Layout.cshtml no existe, en su lugar existe un Site.master, donde podes poner todo el codigo html del template y despues agregas los respectivos encabezados:
      Donde va el Titulo de cada página:
      <asp:ContentPlaceHolder ID=”TitleContent” runat=”server”
      Donde va el login o lo que quieran:
      <% Html.RenderPartial("LogOnUserControl") %>
      Y esta es la más importante donde ira todo el contenido que pongan en sus web:
      <asp:ContentPlaceHolder ID="MainContent" runat="server" />

      Con que mantengas estas etiquetas en el Site.master, despues podes hacer lo que quieras con el codigo html.
      Espero haberte ayudado, abajo te dejo una lista de videos de como trabaja MVC 2

Responder

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