February 8, 2016

No Comments

PRIMEROS PASOS EN MVC Y SINTAXIS RAZOR

Para entender un poco más de cómo se utiliza la sintaxis del motor de vistas Razor en MVC vamos a crear un nuevo proyecto para eso abrimos Visual Studio. Nuevo proyecto.

 

Seleccionamos ASP.NET MVC 4 Web Application donde seleccionamos la ubicación y el nombre de nuestro proyecto en este caso el mio es ProjMVC

 

En las plantillas seleccionamos una plantilla Vacía esta plantilla no contiene ningún controlador ni vista. Pero no te preocupes aquí crearemos una.

En cuanto al motor de vista seleccionamos el motor Razor. En cuanto a la opción de pruebas unitarias en esta ocasión la dejamos sin seleccionar.

 

Una vez creado el proyecto podemos ver que ya están cargadas las carpetas con la estructura MVC en este caso son:

  1. Vistas
  2. Modelos
  3. Controladores

 

Para comenzar vamos agregar un nuevo controlador para eso nos colocamos en la carpeta Controller click derecho Add –> Controller. En Controller Name insertamos el nombre que deseamos tener en nuestro controlador en mi caso es Index y por norma se sugiere dejar enseguida de el nombre Controller como es mi caso.

Las plantillas apoyan al desarrollador creando una estructura en la cual pueda agregar, modificar y eliminar información de alguna base de datos. En nuestro caso la dejamos en Controlador MVC Vacío.

 

Al momento de agregar podemos observar que ya se creó el controlador dentro de la carpeta controllers

 

Al dar doble click sobre nuestro controlador tendremos la siguiente vista.

Donde nos creó un método que regresa un ActionResult el cual regresa a nuestra vista. En este caso no tenemos ninguna vista creada aun. Pero para crearla es muy sencillo. Tan solo es dar click derecho sobre el nombre del método y seleccionar Add View (Agregar Vista).

 

Donde nos abrirá una ventana donde nos indica el nombre de la nueva vista en mi caso es Index. El motor de Vistas que en este tutorial es Razor. También tenemos la opción de crear una vista fuertemente tipada a un modelo en este caso no tenemos un modelo creado que se vaya a comunicar con el controlador y la vista así que la dejamos en blanco al igual tenemos la opción de agregar una master page. En este caso igualmente dejamos en blanco a continuación damos click en Agregar.

Podemos observar que ya se creó la vista dentro de la carpeta Views (Vistas) y tenemos la siguiente pantalla al dar doble click.

Esta parte es la que nos interesa en este artículo para conocer un poco de la sintaxis de Razor.

En la parte superior podemos observar que se encuentra una sección declarada con un @{}

Dentro de esa sección nosotros podemos definir variables como comúnmente las manejábamos en el servidor con formularios en asp.net

En este caso declaremos dos inputs y un botón como en la siguiente imagen.

 

Estos input se van a comunicar con razor, ¿de qué manera? bueno como podemos observar en la parte inferior esta una variable llamada @totalMessage Esta variable es declarada en la sección antes mencionada del arroba y corchetes como veremos a continuación.


Dentro de esta sección podemos insertar la lógica como si fuera JavaScript teniendo la oportunidad de comunicarnos con los elementos que están declarados en nuestra página como veremos a continuación en donde obtendremos el valor de los dos textbox y por medio de un postback realizaremos una suma.


Como podemos apreciar con Request y el Id de nuestros controles podemos tener acceso a los mismos con la ventaja de también tener el intellinses para poderte ayudar a completar el código.

En este caso lo que realiza el código anterior es crear la variable de salida: totalMessage. Así como la la variable que alojara el resultado: total. Y dentro de las variables num1 y num2 obtenemos lo que el usuario ingrese en la página y realizamos el total indicándole que tanto num1 como num2 son enteros y guardando el resultado en totalMessage para mostrarlo en la página en esta sección


 

Debemos realizar un paso más antes de poder probar nuestros primeros pasos en MVC el cual es indicar la ruta la cual abrirá nuestra primera página para eso en el Explorado de soluciones buscamos la carpeta App_Start y dentro damos doble click sobre la clase RouteConfig.cs.


 

Este nos abrirá la siguiente página.


En donde nos indica que el controlador tiene por nombre Index que es el nombre que le indicamos al inicio al controlados que quedo como IndexController pero en este caso solo se utiliza index y la acción es el nombre del método que ejecutaremos en este caso el nombre del método es Index. En la parte de id se pueden enviar parámetros pero en esta ocasión no los usaremos.

Ahora si podemos probar nuestros primeros pasos en MVC al dar click en Ejecutar.


Resultado:

 


 

Happy Coding ;=)

Eduardo Sánchez Almazán

 

 


 

February 8, 2016

No Comments

Detectar campo faltante cuando Model State IsValid es false

 

Cuando se desarrolla en MVC tenemos el Modelo, Vista y el Controlador este último se encarga de toda lógica que se envía directo a la vista.

En algunas ocasiones necesitamos actualizar ciertos campos dentro de alguna tabla de nuestra base de datos y nos encontramos con ciertos problemas en los cuales se ve involucrado el ModelState

Como lo veremos en el siguiente ejemplo:

Aquí tenemos el Model del ejemplo:

 

Donde se puede observar que la columna FileName es Requerida

public class Document

{

public int Id { get; set; }

 

[Required(ErrorMessageResourceType = typeof(DocumentResource),

ErrorMessageResourceName = “FileNameError”)]

[Display(Name = “FileName”, ResourceType = typeof(DocumentResource))]

public string FileName { get; set; }

 

public DateTime DateCreated { get; set; }

 

public string CreatedBy { get; set; }

 

}

 

Aqui tenemos el Controller.

public ActionResult Create([Bind(Include = “FileName,DateCreated,CreatedBy”)] Document document)

{

if (ModelState.IsValid)

{

document.DateCreated = DateTime.Now;

document.CreatedBy = “juan perez”;

 

db.Documents.Add(document);

db.SaveChanges();

return RedirectToAction(“Index”);

}

 

return View(document);

}

En este método tenemos que recibe los campos de Id, Name, UserId, DateCreated y CreatedBy

El problema viene aquí en la vista cuando consume el controller de Create. Y está esperando recibir todas las columnas que sean requeridas y si hace falta alguna y el ModelState será False (Para este ejemplo no se está enviando la columna FileName que es requerida)

 

Si deseamos saber el por qué el Model State es False tan solo debemos colocar la siguiente consulta y nos detallara el problema por el cual el ModelState es false.

     var errors = ModelState.Where(x => x.Value.Errors.Count > 0)

              .Select(x => new { x.Key, x.Value.Errors })

              .ToArray();

 

Aquí podemos ver con la consulta el campo que ocasiona la excepción por la cual el ModelState es False

 

Y aquí el detalle con el campo.

December 15, 2015

No Comments

Tendencias del desarrollo web para el 2016

 

Cierre de año, cierra de cuentas y ¿qué sigue? Bueno en este aporte trataremos de explicar las nuevas tendencias del desarrollo web, cuales son las innovaciones, que pide los navegantes de la red para satisfacer sus necesidades y sentirse más cómodos.

 

Material Design

Son directrices, interfaces con la página web. Es desarrollado por google y están inspirados en papel y tinta, así nada más. Su objetivo está basado en el estilo y la tecnología conjuntar estos temas

Google pensó en la interacción desde la luz, los colores todo un arte minimalista

Tipografía

Si se pensaba que el texto era únicamente para informar, ser leído, etc. Pues ya deja de serlo para ser una forma vistosa de presentar una página, que sea más vistosa y atractiva

Animaciones

No han dejado de ser una herramienta en página, pero se perfecciona y muestra nuevas tendencias de vistas, interacciones y efectos.

Esta mencionada Paralax, lo que realiza es una interacción con imágenes de forma dinámica, conforme te desplazas en la página muy atractiva y llamativa

Animaciones bastante extravagantes dejan de lado lo clásico, lo rutinario.

Ejemplo de animación loaders

Patrones UI

Los patrones UI le dicen adiós al scroll, lluvia de información con tal solo dar un click, bastante intuitiva se vuelve la web con esta innovación

 

Lo que está por venir es una web mucho más intuitiva, mas enriquecida y vistosa al usuario más dinámica aunque con bombardeos de gráficos y un poco de desorden.

 

Referencias

http://www.40defiebre.com/tendencias-diseno-web-2016/

http://www.vintagehope.co.uk/

http://blog.dashaft.net/que-es-material-design-de-google/

July 15, 2015

No Comments

¿Qué es SPOON?

 

Muchas de las veces como desarrollador web tienes la necesidad de probar el diseño de tu página en distintos navegadores a diferentes resoluciones para evitar que algo no se vea de la manera en que estabas pensando.

SPOON es una herramienta que ayuda a ese tipo de problemas es una aplicación que emula los distintos navegadores que existen para que se puedan realizar las pruebas necesarias, no solo páginas web si no también probar videojuegos, IDE y herramientas de desarrollo.

El servicio de SPOON funciona de la siguiente manera.

  • Registro de cuenta en la página oficial Spoon.net
  • Descargar la aplicación
  • Seleccionar el tipo de plataforma que queremos probar FireFox, Chrome, …..

Este tipo de servicio tiene como objetivo principal el centrar todos los navegadores y sus herramientas en una sola aplicación dejando atrás el tener que estar instalando los distintos navegadores en nuestros PC, una de las ventajas es que también nos permite tener a la mano los navegadores que son para mobile para que podamos interactuar con nuestra aplicación en la que estamos trabajando de manera rápida sin tener que pasar nuestra SDK a la aplicación y probarla desde la misma.

SPOON tiene dos servicios en el cual el gratuito nos permite navegar en las últimas versiones de los navegadores con sus características incluidas, y esta la versión de paga esta versión nos permite emular las versiones más antiguas de los navegadores teniendo como ventaja el si un cliente maneja una versión en específico poder realizar las pruebas necesarias en esa versión

NAVEGADORES MOBILE

Realmente un navegador mobile dentro de SPOON es idéntico al de un Android o IOS la forma en que se interactúa es muy similar a la que se descarga en la google play o en el app store , para poder obtener esta plataforma solo tenemos que tener la aplicación y estar registrados dentro de SPOON y listo

Opera mobile nos permite elegir la configuración de distintos dispositivos o elegir la resolución de la pantalla como la densidad del pixel y el tipo de entrada táctil o del teclado la forma de ejecutarlo es igual a la anterior

Ventajas

  • Permite la emulación de navegadores como lo son
    • Chome
    • FireFox
    • Opera
    • Opera Mobile
    • Safari
    • FireFox
    • Internet Explorer
  • Cada navegador tiene sus configuraciones
  • Permite tener distintas resoluciones
  • La versión de paga permite tener distintas versiones del navegador
  • Todo está centralizado en una misma aplicación
  • La versión gratuita nos permite tener todos los navegadores (Solo ultima versiones)
  • El registro es gratuito

Desventajas

  • La velocidad en que abre el navegador es lenta

     

July 15, 2015

No Comments

SOA (Arquitectura Orientada a Servicios)

 

La Arquitectura Orientada a Servicios es un concepto de arquitectura de software que define la utilización de servicios para dar mantenimiento a las necesidades del negocio para lo cual fue realizado.

Esta arquitectura permite crear sistemas altamente escalables, que pueden ayudar a las organizaciones a impulsar el rendimiento y al mismo tiempo, reducir costos en las implementaciones que se requieran en cuestión tecnológica y mejora la flexibilidad en los procesos del negocio.

SOA proporciona una metodología y un marco de trabajo para documentar las capacidades de negocio y da soporte a las actividades de integración y consolidación de los datos de cualquier organización mediante servicios.

Cada servicio provee funcionalidades para poder ser adecuado a las necesidades de la empresa y facilita la complejidad, inflexibilidad y debilidades de los enfoques existentes en los diseños de procesos, flujos de trabajo e integración de aplicaciones, es por eso que es adaptable para casi todos los requerimientos tecnológicos.

 


 

Un beneficio adicional del SOA es que provee la habilidad de modernizar los procesos de negocios, que a su vez promueve una administración de procesos de negocios ágil.

SOA provee una forma de hacer que los procesos de negocios sean más fáciles de comprender para los cliente o usuario que no tienen alguna preparación tecnológica, de forma que puedan ser personalizados y optimizados para cubrir mejor las crecientes exigencias de los clientes sobre tiempos de respuesta reducidos, mientras se mantiene alta calidad y rentabilidad.

Para aplicar SOA es necesario disminuir la complejidad de los procesos de negocio mediante un análisis lo que facilita la integración entre la aplicación y el negocio, reduciendo costos significativamente y haciendo más eficientes cada uno de los procesos

Entre las diferentes características las que definen a SOA, se encuentran las siguientes:

 

  • Servicios de infraestructura para autenticación y acceso a la información

 

  • Servicios CRUD para leer y actualizar datos

 

  • Servicios de integración para la transformación y la calidad de la información que será entregada una vez procesada por el servicio

 

  • Ofrece y garantiza la validación y calidad de la información

 

  • Proporciona herramientas basadas en funciones con metadatos que permiten analizar y solucionar problemas de manera rápida

 

June 8, 2015

No Comments

Que es Angular JS

 

AngularJS es un proyecto de código abierto que está desarrollado en javascript donde se encuentran librerías que nos son de utilidad para el desarrollo de las aplicaciones web.


Lo que pretende AngularJS es producir un HTML que genere aplicaciones fáciles de entender incluso para personas que no tengan los conocimientos muy avanzados en la programación, el objetivo principal de AngularJS es llevar un lenguaje muy fácil de entender por cada etiqueta que se encuentra en el código.

AngularJS promueve los patrones de diseño adecuados para el desarrollo de aplicaciones web, lo que se implementa es lo que se conoce como MVC separando el código por capas adecuado para las aplicaciones de negocio

AngularJS tiene las siguientes Características:

Vistas: Se representa en HTML todo lo que se refiere a los datos

Controladores: se encarga de llevar la lógica de la aplicación sobre lo que se nombra “Servicios” para mover datos contra servidores o memoria locales

Modelo: en AngularJs es algo más que el modelo de los datos en este caso también se otorgan permiso a los usuarios

Ejemplo de AngularJS

Tenemos este ejemplo

  • en el cual se escribe un div con la propiedad ng-app=”” que este define que se va iniciar una aplicación AngularJS
  • Tenemos las etiquetas de párrafo <P> donde se está escribiendo un texto
  • Dentro del segundo párrafo podemos notar que se encuentra un input en el cual se está ingresando una propiedad ng-model=”name” esto se refiere a se declara el valor para los datos de la aplicación en este caso se refiere al modelo
  • En la etiqueta H1 se está concatenando el valor que se está escribiendo dentro del input

 

Resultado