Lo primero es seleccionar el tipo de proyecto a crear, abrimos VS2017 y seleccionamos la platilla correcta.
Vamos al menú File, New, Project, esto nos abre una pantalla en la cual vamos a seleccionar el tipo de plantilla con la que vamos a trabajar.
En el panel izquierdo seleccionamos Visual C#, y luego Web, en el centro entonces nos mostrara las plantillas de la imagen anterior, seleccionaremos la plantilla de la imagen.
En la parte inferior colocaremos el nombre de nuestra solución y de nuestro proyecto, además seleccionaremos la ruta del disco duro de la PC en la cual estarán los archivos.
Colocaremos VentasMVC como nombre a nuestra solución. Luego seleccionamos el tipo de aplicacion web que vamos a desarrollar.
Seleccionamos la plantilla de MVC como aparece en la imagen, aqui los que sigue es dar clic al botón OK para que se cree una plantilla básica de nuestro sitio web.
El proceso toma uno o dos minutos en generar la aplicacion base, esto depende de las características de nuestro PC.
En el explorador de la solución, la ventana a la derecha de la pantalla, se observa la estructura de carpetas y los archivos en la raíz del sitio web.
El archivo web.config, es muy importante, pues aqui se colocaran los datos de conexión a la base de datos, o cadena de conexión, configuraciones necesarias para nuestro sitio en el appConfig, una sección del web.config, en al cual se pueden colocar valores necesarios de inicialización en nuestra aplicacion web.
Observamos en la siguiente imagen la estructura del sitio web.
Observamos la carpeta Models, en esta carpeta irán los modelos o estructuras de datos que utilizaremos en nuestro sitio web, estos modelos tambien son conocidos como entidades y se corresponden con la estructura de las tablas de la base de datos que utilizaremos.
tambien, observamos la carpeta Views, o de vistas, en esta carpeta por cada controlador que creemos se creara una carpeta con el nombre del controlador y dentro se incluirán las vistas que utilizan un framework llamado Razor, para el dibujado o creación de nuestras vistas.
Por ultimo tenemos la carpeta Controllers, en la cual se colocan los controladores que vamos utilizando, es importante respetar este orden pues el marco de trabajo o Framework MVC lo busca de manera automática en este orden.
Ahora vamos a crear los modelos para poder iniciar a crear nuestra pagina Web. esto nos abre una ventana como la siguiente en la cual colocamos el nombre del modelo a crear.
Le damos el nombre en la parte inferior Producto, y presionamos el botón Add.
Esto abrirá la ventana de código para C#, y en ella podremos crear nuestra clase modelo.
A partir de aqui iniciaremos con la creación de los modelos de nuestra aplicacion y veremos como se refleja en la base de datos SQL Server utilizando Entity Framework que nos facilitara todo el proceso de acceso y manejo de datos en las operaciones iniciales o CRUD.
Es importante tener presente que esta técnica se denomina "Code First", con esto las tablas de la base de datos se basan en la estructura de la clase modelo.
Ademas utilizaremos una librería de .NET llamada DataAnnotation esta librería nos permite configurar los campos de la tabla desde el código utilizando anotaciones en el nombre del campo para la tabla.
El código de nuestro modelo Producto queda así:
Ademas utilizaremos una librería de .NET llamada DataAnnotation esta librería nos permite configurar los campos de la tabla desde el código utilizando anotaciones en el nombre del campo para la tabla.
El código de nuestro modelo Producto queda así:
using System; using System.ComponentModel.DataAnnotations;
public class Producto { [Key] public int Id { get; set; } [Required] [Display(Name ="Nombre Producto")] [StringLength(200)] public string NombreProducto { get; set; } [Required] [DataType(DataType.Currency)] public Double ValorUnitario { get; set; } [Required] public int IdUnidad { get; set; } [Required] public int IdProveedor { get; set; } }
using System.ComponentModel.DataAnnotations; namespace WebMVC.Models { public class Unidad { [Key] public int Id { get; set; } [Required] [Display(Name ="Nombre Unidad")] [StringLength(20)] public string NombreUnidad { get; set; } } }
Luego el modelo Proveedor:
using System.ComponentModel.DataAnnotations; namespace WebMVC.Models { public class Proveedor { [Key] public int Id { get; set; } [Required] [StringLength(10)] [Display(Name ="Nit / CC")] public int Identificacion { get; set; } [Required] [Display(Name ="Razón Social")] [StringLength(200)] public string RazonSocial { get; set; } [Required] [Display(Name ="Telefonos")] [StringLength(30)] public string Telefono { get; set; } [StringLength(200)] [Display(Name ="Dirección")] public string Direccion { get; set; } } }
Ahora creamos el modelo de Factura:
using System; using System.ComponentModel.DataAnnotations; namespace WebMVC.Models { public class Factura { [Key] public int Id { get; set; } [Required] [DataType(DataType.Date)] public DateTime Fecha { get; set; } [Required] public int IdCliente { get; set; } [StringLength(200)] public string Observacion { get; set; } } }
Ahora el modelo para el detalle de la factura que llamaremos FacturaDetalle:
using System.ComponentModel.DataAnnotations; namespace WebMVC.Models { public class FacturaDetalle { [Key] public int Id { get; set; } [Required] public int IdFactura { get; set; } [Required] public int IdProducto { get; set; } [Required] [Display(Name ="Cantidad")] public int Cantidad { get; set; } [Required] [Display(Name ="Valor Unitario")] [DataType(DataType.Currency)] public double ValorUnitario { get; set; } public double SubTotal { get; set; } } }
Ya tenemos nuestros modelos, lo siguiente es compilar la aplicación para generar los Controladores y las vistas basadas en EntityFramework y ver como nos ayuda esto para crear aplicaciones muy rápidamente.
De esta manera compilamos la aplicación, damos clic derecho en la carpeta de Controllers, ubicamos Agregar o Add si estamos en ingles,
Esto nos abre la siguiente pantalla
Esta opción nos permitirá generar de manera automática el código de los controladores y las vistas relacionadas en cada acción del controlador.
Damos clic el el botón + la primera vez, y nos propone el nombre del contexto, damos clic al botón Add de la pantalla.
Seguiremos estos pasos para crear las vistas y los controladores de cada modelo.
Al realizar esto pasos VS realiza una serie de pasos y al terminar muetsra la siguiente:
Como se aprecia, crea el Controlador, el código queda en la ventana de código de VS, el el explorador de la solucion, en la carpeta de Controllers, se observa la clase creada UnidadsController, en la carpeta de Views, vemos que se crea una carpeta llamada Unidads y dentro de esta 5 archivos con la extensión cshtml, que son las vistas de nuestro modelo Unidad.
Volvemos y compilamos la solución y ejecutamos nuestra aplicacion, dando clic en el boton de mla barra de herramientas superior de Play, esto lanzara la aplicacion en el explorador de internet que tengamos por defecto.
Ahora para ejecutar la pagina que hemos creado cambiamos la url del explorador de internet que usemos de la siguiente manera:
Debe agregar /Unidads que es como se llama nuestro controlador, observe que no hay necesidad de colocar Controller, esta es una notación ya estándar para las aplicaciones MVC.
De clic en el link Create New, y cree varias unidades, modifique las , elimínelas y pruebe todas las opciones que genera ASP.NET MVC.Realice los pasos anteriores para generar los diferentes vistas para cada uno de los modelos que hemos creado.
En el próximo articulo aprenderemos mas.
Bendiciones!
