UNIVERSIDAD TECNICA DE AMBATO FACULTAD DE CIENCIAS HUMANAS Y DE LA EDUCACION CARRERA DE DOCENCIA EN INFORMATICA Lenguaje de programaci贸n II Manual de p谩ginas Web en .NET Aracelly Silva Sexto Semestre
Elaborar una aplicación con tres páginas: Inicio, Producto, Acerca de
La página inicio debe tener un título y un párrafo de introducción. La página Producto con al menos 5 productos y 5 campos o columnas que debe permitir añadir más. La página Acerca de debe contener información de productos de la empresa ficticia.
Paso 1: Crear una nueva aplicación web en Visual Studio Nos aseguramos que sea MVC3
Escogiendo siempre la opción Internet Application
Paso 2: Cambiamos el código “Layout.cshtml” creando aquí las pestañas que llevara nuestra página WEB
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Inicio", "Index", "Home")</li> <li>@Html.ActionLink("Productos", "Index", "Productos")</li> <li>@Html.ActionLink("Acerca_de", "About", "Home")</li> </ul> <section id="main"> @RenderBody() </section> </body> </html>
Paso 3: Cambiamos el c贸digo Site.cs
body { font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969; } h1 {
border-bottom: 3px solid #cc9900; font: Georgia, serif; color: #996600; } #main { padding: 20px; background-color: #ffffff; border-radius: 0 4px 4px 4px; } a { color: #034af3; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ table.data
{ background-color:#ffffff; border:1px solid #c3c3c3; border-collapse:collapse; width:100%; } table.data th { background-color:#e8eef4; border:1px solid #c3c3c3; padding:3px; } table.data td { border:1px solid #c3c3c3; padding:3px; }
Paso 4: Es importante recordar que debemos cambiar el c贸digo Homecontroller.cs
using using using using using
System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc;
namespace MvcDemo.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { return View(); } } }
Paso 5: Cambiamos el código Index.cshtml en donde vamos a añadir una imagen y el texto de introducción
@{ViewBag.Title = "Home Page";} <body style="background-color:Peru"> <h1 style="font-family:gabriola">CopuZone</h1> <p>COMPUZONE es una empresa que distribuye y comercializa componentes, partes, piezas y equipos de computación, además de toda la gama de equipos electrónicos y tecnológicos. Además, provee servicios de mantenimiento reparación y diagnóstico de computadoras y asesoría de sistemas. </p> <p> COMPUZONE fue fundada el 16 de Octubre del 2009 por un grupo de accionistas que cuentan con más de 15 años de vasta experiencia en el área de mercadeo y ventas de productos y servicios mediante planes estratégicos y de negocios bien elaborados.
Los mismos que permitirán posicionar a la empresa en el mercado ecuatoriano y así tener mayor participación de mercado.</p> <IMG><img src="http://compuzone-shop.com.ar/wp-content/uploads/2014/02/foto_01.jpg" style="margin-top: 0px;" id="irc_mi" height="519" width="584">
Paso 6: Cambiamos el código About.cshtml en donde añadimos el contenido que tendrá la pestaña Acerca de
@{ViewBag.Title = "About Us";} <body style="background-color:Peru"> <h1 style="text-align:center">Misión</h1> <p>Proveer productos de alta tecnología, comunicación, entretenimiento y soluciones informáticas, tanto a empresas como al consumidor final, buscando siempre la satisfacción del cliente mediante precios competitivos, variedad, disponibilidad y rapidez en la entrega, dando una excelente atención y asesoría personalizada, encontrando así soluciones a las necesidades de nuestros clientes. </p> <h1 style="text-align:center">Visión</h1> <p>Ser considerada como la mejor opción en tecnología para empresas y consumidor final, a nivel nacional y en la web, mediante un sistema de catalogo en línea que permita al cliente realizar fácilmente su pedido y proceder a enviarlo de forma rápida y segura a todo el territorio nacional. Asegurando un producto de calidad y con garantía. </p> <IMG style="text-align:center"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/ +SVzhfm2RnO3sdns0Hx4LzCskoD0xX8tGHildLE575bWbTljmvLuGZ1sob1m/ddecsXxB9RPJNKc0kri9x7X
G+nUBuA6gtS6wgP1gqXszZHObmaWOyuLczTva629psNFtYTij4JGuaXZQ9j3MDi0Sc24OAdbQ7uO660EQEg2 n2mmrJpXOfK2KWR0rYDK50bC430buvfsWxtZthNWSEtdLFE5kbHQCVxjcY2BuZzRYG+XqUXRAbYxKUFhEkgM YtGc7rxjqYb9EanclfiUs7s00skrgLB0j3PIHVdxOi1EQHQkxqodHzTp5jFu5oyvMY6ugTZdXGtrppY4I43S wsip46Z7WSuDZubv0nNFgb5jobqNIgN6hxeeEEQzTRB28RyvYHd4aRdZo8ZnhLjDPNGX6uMcr2Fx63ZTr4rQ RAbsGLTMLCyaVpjuIy2R4MebU5CD0b8bLMuLzuJLppnEhzSTI8ktf5bbk7ncRxWiiA6FPjlTGbx1E7DlEd2y vacjdzLg+SLnTdqV8QYrMzPkllYZLiQtkc0yXvcPsekNTvvvK0kQGSVhEQBERAf//Z" style="width:357px;height:89px;margin-left:-11px;margin-right:-10px;margin-top:0px" data-sz="f" name="PadNQlD2EZwwjM:" class="rg_i" jsaction="load:str.tbn">
Paso 7: Creamos la base de datos
Nos aseguramos que sea SQL Server Compact
Y ya nos aparece en la ventana del explorador la base de datos que en este caso se llamarรก productos
Paso 8: Creamos una tabla dentro de la base de datos que en este caso se llamarรก ProductosDBs
El Id debe ser la Clave Principal
Paso 9: Dentro de la Carpeta Models creamos la clase que se llamarรก ProductoBD
Nombre de la clase ProductoDB
Paso 10: Cambiamos el c贸digo de la clase que creamos para incluir los datos de la tabla
Paso 11: Creamos un controlador para la clase Productos
Dentro de la carpeta controller
Nombre del Controlador ProductosController
Paso 12: Por último cambiamos la dirección de conexión en la ventana de explorador en la opción Web.config
<configuration> <connectionStrings> <add name="ProductoContext" connectionString="Data Source=|DataDirectory|\Productos.sdf" providerName="System.Data.SqlServerCe.4.0"/> </connectionStrings>
Y nuestra página web tendrá la siguiente apariencia