Post on 06-Apr-2016
description
Gabriel Flores
UNIVERSIDAD TÉCNICA DE AMBATO
FACULTAD DE CIENCIAS HUMANAS Y DE LA EDUCACIÓN
CARRERA DE DOCENCIA EN INFORMÁTICA
Aplicación Web
Sexto Semestre Docencia en Informática
Lenguaje de Programación II
Gabriel Flores
Gabriel Flores
CREANDO LA APLICACIÓN WEB
Ingrese a Visual Basic le damos clic en archivo y seleccione Nuevo proyecto.
Caso contrario sola mente le damos clic en nuevo proyecto en la presentación principal de Visual
Basic:
Gabriel Flores
De esa forma aparecerá una pantalla en la que vamos a crear el proyecto, colocándole nombre, la
ubicación y el tipo de aplicación que vamos a crear.
En el cuadro de diálogo Nuevo proyecto:
• Abra las plantillas de Visual C #
• Seleccione la plantilla ASP.NET MVC 3 de Aplicaciones Web
• Establezca el nombre del proyecto en nuestro caso sería MvcDemo3
• Ajuste la ubicación del disco a algo como c: \ w3schools_demo
• Haga clic en Aceptar
Cuando el cuadro de diálogo Nuevo proyecto se abre:
• Seleccione la plantilla de aplicación de Internet
• Seleccione HTML5 marcado
• Haga clic en Aceptar
Gabriel Flores
Visual Studio creará un proyecto muy parecido a esto:
Ahora vamos a explorar el contenido y a modificar los archivos y carpetas en la siguiente parte de
de éste tutorial.
Gabriel Flores
MVC Layout Agregar un Layout
El archivo _Layout.cshtml representan el diseño de cada página de la aplicación. Se encuentra en
la carpeta Shared dentro de la carpeta Views.
Ahora abra el archivo y cambie el contenido con esto:
<!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("Listas", "Index", "Listas")</li> <li>@Html.ActionLink("Acerca de:", "About", "Home")</li> </ul> <section id="main"> @RenderBody() <p>Nadie supera nuestra calidad y nuestra atención</p> </section> </body> </html>
Gabriel Flores
Agregar Site.css
La hoja de estilo para la aplicación se llama Site.css. Se encuentra en la carpeta de contenido.
Abra el archivo Site.css y cambie el contenido con esto: body { font: Comic Sans MS, Arial, ; background-color: #165670; color: #000000; } h1 { border-bottom: 3px solid #17097D; font: Arial, serif; color: #0B156A; } #main { padding: 20px; background-color: #BBECFE; border-radius: 0 4px 4px 4px; } a { color: #F09732; } /* Menu Styles ------------------------------*/ ul#menu { padding: 0px; position: relative; margin: 0; } ul#menu li
Gabriel Flores
{ display: inline; } ul#menu li a { background-color: #e8eef4; padding: 10px 20px; text-decoration: none; line-height: 3.8em; /*CSS3 properties*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #0D5E7C; } /* 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 #000000; 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; }
Gabriel Flores
Home Controller
La carpeta de Controller contiene las clases de controladores encargados de la tramitación de entrada del usuario y respuestas. MVC requiere el nombre de todos los controladores para acabar con "Controller". En nuestro ejemplo, Visual Web ha creado los siguientes archivos:
"HomeController.cs" (para el hogar y sobre las páginas)
"AccountController.cs" (para el registro en páginas)
El archivo de controlador en nuestros "HomeController.cs" de aplicación, define los dos controles "Índice" y "Acerca de". Cambie el contenido del archivo de HomeController.cs con esto: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcDemo3.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Bienvenidos"; return View(); } public ActionResult About() { return View(); } } }
Gabriel Flores
Index. Cshtml
El archivo Index.cshtml representa la página de inicio de la aplicación. Es de archivos por defecto de la aplicación. Se encuentra en la carpeta Views dentro de Home, le da doble clic en el archivo
Coloque el siguiente contenido en el archivo: @{ViewBag.Title = "Home Page";} <font size=40 color="#ff9933" >Produ OnLine</font> <br></br> <img id="irc_mi" src="http://mec-s2-p.mlstatic.com/8418-MEC20004071529_112013-O.jpg" width="300" height="175" style="margin-top: 10px;"> <p>Compre productos para uso doméstico y oficina en casa online <p>Dirección: Av. El Ejercito y La A</p> <h1> </h1> <p>-Mantenimiento de electrodomesticos </p> <p>-Seguridad para dispositivos moviles</p> <p>-Almacenamiento online</p> <p>-Pagos de servicios</p> <p>-Recargas moviles</p> <p>-Simert</p>
Gabriel Flores
About.cshtml
El archivo About.cshtml representa la página “Acerca de:” de la aplicación. El archivo lo encontramos en la carpeta Views dentro de Home.
Coloque el siguiente contenido en el archivo: @{ViewBag.Title = "About Us";} <font size=40 color="#ff9933" >Hacerca de:</font> <p> </p1> <img id="irc_mi" src="http://cdn1.clasificados.com/co/pictures/photos/000/090/947/original_DSC01359.JPG" width="220" height="165" style="margin-top: 10px;"> <p>Somos una empresa destinada a la venta de productos importados, entregamos sus compras en su hogar con un pequeño pequeño pago extra por transporte. </p> <p>Nuestros precios superan a los de la competencia, con una buena atención y con productos de calidad. Gabriel Flores </p>
Gabriel Flores
Creando la Base de Datos
Visual Web viene con una base de datos gratuita de SQL denominado SQL Server Compact. La base de datos necesaria para este tutorial se puede crear con estos sencillos pasos: • Haga clic derecho en la carpeta App_Data en la ventana Explorador de soluciones • Seleccione Añadir, Nuevo elemento • Seleccionar base de datos de SQL Server Compact Local * • Nombrar la base de datos MvcDemo3.sdf. • Haga clic en el botón Agregar
Aparecerá la siguiente ventana, seleccionamos la opción de Base de Daros local SQL Server Compact 4.0.
Gabriel Flores
Colocamos el nombre de nuestra base de datos y clic en aceptar. Ahora aparecerá algo así:
Dándole doble clic en la Base de Datos creada, podemos acceder a otro lugar que se ve algo así:
Ahora abrimos la carpeta tablas y en el archivo ListasDBs le damos clic derecho y después en la opción editar esquema de tabla:
Gabriel Flores
El modelo de base de datos necesaria para este tutorial se puede crear con estos sencillos pasos: • En el Explorador de soluciones, haga clic en la carpeta Models y seleccione Agregar y Clase. • Nombrar los ListaDB.cs clase, y haga clic en Agregar.
Editar la clase con el siguiente codigo: using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; using MvcDemo3.Models; namespace MvcDemo3.Models { public class ListaDB { public int ID { get; set; } public string Producto { get; set; } public string Calidad { get; set; } public string Procedencia { get; set; } public string Precio { get; set; } public string Observaciones { get; set; } } public class ListaDBContext : DbContext { public DbSet<ListaDB> Listas { get; set; } } }
Gabriel Flores
Agregar Controller
El controlador de base de datos necesaria para este tutorial se puede crear con estos sencillos pasos: • En el Explorador de soluciones, haga clic en la carpeta Controller y seleccione Agregar y Controller • Establecer nombre del controlador de ListaController • Seleccionar plantilla: Controlador con lectura / escritura acciones y opiniones, utilizando Entity Framework • Seleccione la clase del modelo: ListaDB (MvcDemo3.Models) • Seleccione clase de contexto de datos: ListaDBContext (MvcDemo3.Models) • Seleccione vistas Razor (CSHTML) • Haga clic en Agregar Colocamos el código siguiente en el archivo: using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; using MvcDemo3.Models; namespace MvcDemo3.Controllers { public class ListasController : Controller { private ListaDBContext db = new ListaDBContext(); // // GET: /Listas/ public ViewResult Index() { return View(db.Listas.ToList()); } // // GET: /Listas/Details/5 public ViewResult Details(int id) { ListaDB listadb = db.Listas.Find(id); return View(listadb); } // // GET: /Listas/Create public ActionResult Create() { return View();
Gabriel Flores
} // // POST: /Listas/Create [HttpPost] public ActionResult Create(ListaDB listadb) { if (ModelState.IsValid) { db.Listas.Add(listadb); db.SaveChanges(); return RedirectToAction("Index"); } return View(listadb); } // // GET: /Listas/Edit/5 public ActionResult Edit(int id) { ListaDB listadb = db.Listas.Find(id); return View(listadb); } // // POST: /Listas/Edit/5 [HttpPost] public ActionResult Edit(ListaDB listadb) { if (ModelState.IsValid) { db.Entry(listadb).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(listadb); } // // GET: /Listas/Delete/5 public ActionResult Delete(int id) { ListaDB listadb = db.Listas.Find(id); return View(listadb); } // // POST: /Listas/Delete/5 [HttpPost, ActionName("Delete")] public ActionResult DeleteConfirmed(int id) { ListaDB listadb = db.Listas.Find(id);
Gabriel Flores
db.Listas.Remove(listadb); db.SaveChanges(); return RedirectToAction("Index"); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } }
Agregamos la configuración para la Conexión de la base de Datos
En el Explorador de soluciones dan doble clic en web para colocar el código que viene a continuación:
<?xml version="1.0"?> <!-- For more information on how to configure your ASP.NET application, please visit http://go.microsoft.com/fwlink/?LinkId=152368 --> <configuration> <connectionStrings> <add name="ListaDBContext" connectionString="Data Source=|DataDirectory|\Listas.sdf" providerName="System.Data.SqlServerCe.4.0"/> </connectionStrings> <appSettings> <add key="webpages:Version" value="1.0.0.0"/> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings>
Gabriel Flores
<system.web> <compilation debug="true" targetFramework="4.0"> <assemblies> <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> </assemblies> </compilation> <authentication mode="Forms"> <forms loginUrl="~/Account/LogOn" timeout="2880" /> </authentication> <membership> <providers> <clear/> <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" applicationName="/" /> </providers> </membership> <profile> <providers> <clear/> <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/" /> </providers> </profile> <roleManager enabled="false"> <providers> <clear/> <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" /> <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" /> </providers> </roleManager> <pages> <namespaces> <add namespace="System.Web.Helpers" /> <add namespace="System.Web.Mvc" />
Gabriel Flores
<add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="System.Web.WebPages"/> </namespaces> </pages> </system.web> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <modules runAllManagedModulesForAllRequests="true"/> </system.webServer> <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" /> <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0" /> </dependentAssembly> </assemblyBinding> </runtime> </configuration>
Listo, la configuración está completa ahora vamos a mirar como quedo nuestro proyecto: Pantalla Inicio
Gabriel Flores
Podemos colocar imágenes gifs y cualquier gadget siempre y cuando sea en HTML obviamente en el lugar donde queremos que aparezca el elemento u objeto que queremos tener en nuestra página.
La creación y visualización de tablas la tenemos en la segunda pestaña de nuestra página Web Eso es todo, espero que les sirva este documento.