Escrito por: TiraCodigo
Etiquetas: asp.net, MVC, Tutorial, template
Este post es el tercer paso de nuestro tutorial para Utilizar un template en nuestro proyecto con asp.net mvc, en el cual explicaremos como cargar desde 0 un template a un nuevo proyecto de asp.net mvc, a continuación tocaremos el tema de:
Dividir template y crear vistas y acciones del controlador
En el paso anterior, vimos como cargar los archivos necesarios a nuestro proyecto de asp.net mvc, ahora veremos la parte substanciosa de este tutorial, que es el crear las acciones y las vistas, para mostrar en cada parte una sección, para esto primeramente debemos de identificar las secciones del template, el que elegimos seria mas o menos así:
Primero comenzaremos cargando todos los archivos necesarios, como las imágenes, scripts y fuentes que utiliza el template, para esto, necesitamos modificar la clase BundleConfig, ya que esta la que se encarga de la carga de nuestros recursos, para estro borraremos/modificaremos el contenido de la clase, para indicar la correcta carga de nuestros archivos, la cual nos deberá quedar similar a:
using System.Web;
using System.Web.Optimization;
namespace MiTemplate
{
public class BundleConfig
{
// Para obtener más información sobre Bundles, visite http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
// Cargamos todos los estilos del template
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/estilos/bootstrap.min.css",
"~/Content/estilos/font-awesome.min.css",
"~/Content/estilos/animate.min.css",
"~/Content/estilos/et-line-font.css",
"~/Content/estilos/nivo-lightbox.css",
"~/Content/estilos/nivo_themes/default/default.css",
"~/Content/estilos/style.css"));
// Cargamos todos los scripts
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/Scripts/jquery.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/smoothscroll.js",
"~/Scripts/isotope.js",
"~/Scripts/imagesloaded.min.js",
"~/Scripts/nivo-lightbox.min.js",
"~/Scripts/jquery.backstretch.min.js",
"~/Scripts/wow.min.js",
"~/Scripts/custom.js"));
}
}
}
Como sabemos, con los bundles, vamos agrupar el contenido de nuestros recursos, en este caso creamos uno para los estilos y otro para los script, pero podrian ir separados o si es necesario cargar archivo por archivo, al realizarlo de esta manera dejamos el manejo de la compresión, minimización y cache de estos archivos, por lo cual no tendremos que preocuparnos por estos detalles
Una vez identificadas las partes del template y cargados los archivos en bundles, tenemos que modificar la vista _Layout.cshtml (Views/Shared/_Layout.cshtml), ya que es en esta donde como su nombre lo dice, es donde esta el diseño de la pagina, aqui comenzaremos a montar nuestro template, para eso primero vamos a quitar el contenido de la pagina solo dejando las secciones básicas, y en estas vamos a hacer la invocación de los bundles, teniendo asl como esto:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Mi aplicación ASP.NET</title>
@*Carga de estilos*@
@Styles.Render("~/Content/css")
</head>
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
@*Carga de contenido*@
@RenderBody()
@*Carga de scripts*@
@Scripts.Render("~/bundles/js")
@RenderSection("scripts", required: false)
</body>
</html>
Hasta aqui, tenemos cargado completamente los archivos al layout, al tener un template de una sola pagina, solo necesitaremos la acción index, para esto debemos hacer el cambio correspondiente en el controlador del home, para esto tenemos que modificar la clase "HomeController", te deberá quedar así la clase:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MiTemplate.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Comenzaremos a crear las vistas de cada una de las secciones del template, comenzando por el menu y la home, para esto, crearemos la vista del menu, esta la pondremos dentro de la carpeta "Home", y le pondremos de nombre "Menu.cshtml", y como contenido pondremos la parte del menu que aparece en nuestro html del template (archivo index.html), el contenido debería quedar de la siguiente manera:
<!-- navigation section -->
<section class="navbar navbar-fixed-top custom-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Digital Team</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home" class="smoothScroll">HOME</a></li>
<li><a href="#work" class="smoothScroll">WORK</a></li>
<li><a href="#about" class="smoothScroll">ABOUT</a></li>
<li><a href="#team" class="smoothScroll">TEAM</a></li>
<li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
<li><a href="#pricing" class="smoothScroll">PRICING</a></li>
<li><a href="#contact" class="smoothScroll">CONTACT</a></li>
</ul>
</div>
</div>
</section>
Una vez teniendo nuestro menu, pasaremos a crear la vista de la home, para eso crearemos el archivo Home.cshtml y cargaremos en esta la seccion correspondiente del template, el resultado seria el siguiente:
<!-- home section -->
<section id="home">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<h3>WEB DESIGN / WEB DEVELOPMENT / SOCIAL MEDIA</h3>
<h1>DIGITAL TEAM</h1>
<hr>
<a href="#work" class="smoothScroll btn btn-danger">What we do</a>
<a href="#contact" class="smoothScroll btn btn-default">Talk to us</a>
</div>
</div>
</div>
</section>
ya que tenemos estas dos partes, vamos montarlas en nuestro archivo index (Index.cshtml ), esto lo realizamos utilizando la carga de vistas parciales (@html.partial), tendríamos el contenido del index de la siguiente manera:
@{
ViewBag.Title = "Mi Template";
}
@Html.Partial("Menu")
@Html.Partial("Home")
Ahora pasaremos al paso de las pruebas y correcciones, con lo cual ya tendriamos finalizado el montaje de nuestro template, da click aqui para ir al ultimo paso