Archivos Mensuales: marzo 2017

Programando con MVC y WebApi en C# (Parte 2)


En el apartado anterior se ha escrito sobre como vincular Bootstrap a nuestro proyecto de MVC, en este apartado veremos como se realizará la conexión entre el WebApi y nuestra vista web si no lo has leído puedes verlo aquí.

Comenzaremos creando los controllers para nuestro servicio de WebApi dentro de la carpeta Service.

Seleccionaremos Add > Controller y aparecerá una ventana como la que se muestra a continuación:

Despues de esto nos preguntará que nombre deseamos ponerle a nuestro controller, en nuestro caso crearemos StudentController, una vez creado nuestro controller daremos manos a la obra, creando los metodos GET, POST, PUT y DELETE.

Para esto debemos crear dos Entidades, una llamada Studen y otra llamada Result , Studen será la clase utilizada para poder enviar los datos de los estudiantes de nuestra vista a nuestro WebApi, y Result será una Clase informativa que nos dirá si las inserciones, las actualizaciones y borrados se han realizado de manera correcta o si ha habido algún tipo de error, en el caso de las inserciones nos devolverá el número identificador con el cual se ha agregado.

Clase Result:

namespace StudentsWeb.Models
{
    public class Result
    {
        public bool success { get; set; }
        public string Description { get; set; }
        public string AdditionalData { get; set; }
    }
}

Clase Student:

namespace StudentsWeb.Models
{
    public class Student
    {
        public long NoControl { get; set; }
        public string Name { get; set; }
        public string Paternal { get; set; }
        public string Maternal { get; set; }
        public string CURP { get; set; }
        public short Semestre { get; set; }
    }
}

Después de Crear las clases podemos dar vida a nuestro Controller “StudenController” como mencione antes en este controller vamos a manejar los métodos que necesitamos y para hacer un mock de manera rápida, utilizaremos la sesión.

Esto queda de la siguiente manera:

using System.Web;
using System.Web.Http;

namespace StudentsWeb.service
{
    public class StudentController : ApiController
    {
        public List<Student> Get()
        {
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            return ls;
        }

        public Student Get(long NoControl)
        {
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            Student s = new Student();
            s = ls.FirstOrDefault(S => S.NoControl == NoControl);
            return s;
        }

        [HttpPost]
        public Result post(Student s)
        {
            Result result = new Result();
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            try
            {
                s.NoControl = ls.Count() + 1;
                ls.Add(s);
                session["Sudent"] = ls;
                result.success = true;
                long NoControl = s.NoControl;
                result.AdditionalData = JsonConvert.SerializeObject(NoControl);
            }
            catch (Exception ex)
            {
                result.success = false;
                result.Description = ex.Message;
            }
            return result;
        }

        [HttpPut]
        public Result put(Student s)
        {
            Result result = new Result();
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            try
            {
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).CURP = s.CURP;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Maternal = s.Maternal;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Name = s.Name;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Paternal = s.Paternal;
                ls.FirstOrDefault(S => S.NoControl == s.NoControl).Semestre = s.Semestre;
                session["Sudent"] = ls;
                result.success = true;
            }
            catch (Exception ex)
            {
                result.success = false;
                result.Description = ex.Message;
            }
            return result;
        }

        [HttpDelete]
        public Result delete(long NoControl)
        {
            Result result = new Result();
            var session = HttpContext.Current.Session;
            List<Student> ls;
            ls = (List<Student>)session["Sudent"];
            if (ls == null)
            {
                ls = new List<Student>();
            }
            try
            {
                ls = ls.Where(S => S.NoControl != NoControl).ToList();
                session["Sudent"] = ls;
            }
            catch (Exception ex)
            {
                result.success = false;
                result.Description = ex.Message;
            }
            return result;
        }
    }
}

Ya tenemos listo el Controller, ahora nos faltan las vistas y el JavaScript pero estoy seguro que ya saben por donde va la idea.

Para que las sesiones puedan ser utilizadas dentro de los controllers de WebApi es necesario modificar los siguientes archivos:

WebApiConfig.cs

            var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
            config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);

En el código anterior, le estamos diciendo al método Register que solo permita el retorno de JSON

Global.asax

        protected void Application_PostAuthorizeRequest()
        {
            HttpContext.Current.SetSessionStateBehavior(SessionStateBehavior.Required);
        }

En el código anterior el método está obliga a usar las sesiones al inicio de la aplicación.

Por hoy lo dejaremos hasta aquí, la próxima entrega crearemos las vistas y conectaremos todo

 

Anuncios

Programando con MVC y WebApi en C# (Parte 1)


MVC (Modelo Vista Controlador) es un patrón de diseño que separa los datos de y la lógica de negocio de una Aplicación cualquiera que sea su contexto, para esto el lenguaje de .NET Ya tiene una solución que se encuentra en ASP.NET Web Application (.NET Application)

Después de seleccionar el nombre de nuestra solución nos aparecerá la siguiente ventana:

Una vez seleccionado el Web API y cambiado el modo de autenticación podemos proceder a ver nuestra solución creada, como la siguiente:

En lo personal el modo en que Microsoft Arreglo el modelo no es de mi completo agrado comenzaremos explicado los contenidos de nuestras carpetas:

Content: en la carpeta content se encuentran los contenidos de plantillas de Estilos y las imagenes
Controllers: es la carpeta que contiene los contenidos de las llamadas a servidor, en mi caso solo es utilizado para la seguridad Login, Registro y Recuperación de Usuarios
fonts: Las fuentes que serán usadas en nuestro template
Models: Las clases para serializar y hablar entre los controllers
Scripts: Los JavaScripts que serán utilizados
View: Finalmente las Vistas que serán utilizadas para presentar nuestra pagina

Como ta habia escrito anteriormente no soy partidario de los nombres que microsoft le ha puesto a las carpetas por lo tanto procederé a borrar las siguientes carpetas y a crear unas nuevas

Carpetas a borrar:

  • Content
  • Scripts

Carpetas a crear:

  • css
  • js
  • img
  • service

Una vez realizado esto nuestro proyecto quedará así:

A partir de aquí buscaremos una plantilla Bootstrap, como muchos de los lectores de este blog saben no soy muy afecto a crear diseños web, podemos descargarlo de la siguiente ruta https://startbootstrap.com/template-overviews/sb-admin/ (Es de mis favoritos), ahora veremos como integrar nuestro diseño de bootstrap a nuestro desbalijado proyecto en .NET, analicemos las carpetas que tiene nuestra plantilla:

Bien, podemos encontrar dentro de las carpetas que nos interesan css, fonts-awesome, fonts, js, estas carpetas deben ser copiadas a nuestro proyecto de MVC lo haremos de la siguiente manera:

  1. Todo el contenido de la carpeta css será copiado a la carpeta css de nuestra solucion.
  2. Todo el contenido de la carpeta js será copiado a la carpeta js de nuestra solución.
  3. En cuanto a la carpeta fonts-awesome encontraremos las siguientes carpetas css, less, scss y fonts.
    1. Tomaremos el contenido de css que esta dentro de la carpeta fonts y será copiado a nuestra carpeta css.
    2. Tomaremos el contenido de la carpeta fonts y lo pasaremos a nuestra carpeta fonts
  4.  Regresaremos a visual studio.

En visual studio ya una vez copiados todos nuestros archivos es necesario dar click al icono Show All Files, para permitirnos ver todos los archivos e incluirlos en el código, si no hiciéramos esta operación, al momento de compilar no nos agregará los archivos en el modo de publicación. Para incluir a los archivos podemos dar click derecho en el archivo o los archivos que queremos incluir, y buscamos en el menú la sección incluir en proyecto:

Y así lo haremos con todos los archivos que hayamos copiado a nuestra solución.

Con esto tenemos nuestros archivos para usar listos, ahora hay que introducirnos en la carpeta App_Star esta carpeta contiene los siguientes Archivos:

  • BundleConfig.cs: Sirve para agrupar varios archivos JavaScript y en un mismo archivo. permitiendo un mejor performance.
  • FilterConfig.cs: Nos permite crear filtros de acción que son atributos que pueden asociarse a una acción de un controlador o al controlador en su totalidad.
  • RouteConfig.cs: Es la clase que se encarga de la configuración de las rutas de los controllers por defecto.
  • WebApiConfig.cs:  Esta clase es la encargada de configuración de las rutas de cualquier servicio expuesto en el webApi.

Ahora que sabemos esto vamos a reconstruir el BundleConfig, recordemos que hemos borrado todos los recursos css y javascript con los que venia nuestra solución por defecto, si abrimos el archivo nos mostrará algo como lo siguiente:

La información que nos interesa para el Registro de Bundles es ScriptBundle y StyleBundle que son las que tenemos que registrar para tener una idea de lo que tenemos que hacer, debemos abrir nuestro archivo index de nuestra plantilla de bootstrap que contiene algo como lo siguiente:

Así pues escribiremos nuestros Bundles de css de la siguiente manera:

Y del mismo modo cambiaremos crearemos nuestros Bundles de JavaScript que quedan del siguiente modo:

Esto nos permitirá obtener los js y css de una manera simple en .NET. ahora bien, vamos a incorporar la plantilla directamente a nuestras vistas, para esto nos dirigiremos a la carpeta View y dentro de la misma la carpeta Shared y dentro de ella un _Layout.cshtml en el cual encontraremos la vista principal de nuestro html el cual muestra algo como lo siguiente:

Bien borraremos algunas cosas para que queden de la siguiente manera:

Esta es la versión menor del archivo y es la manera en como yo lo ordeno cuando voy a pasar una plantilla nueva ahora abriremos nuevamente nuestro archivo index para ir copiando de poco en poco, primero copiaremos la información del head, desde el inicio del encabezado hasta la sección del title, y poniendo la información de nuestro bundle recién, creado quedando el código como el siguiente:

Después de esta parte la cosa se complica un poco, pero créanme que vale la pena verlo terminado, nos dirigiremos de nueva cuenta a nuestra plantilla de bootstrap y buscaremos la etiqueta div siguiente

, comenzaremos a copiar de ese div hasta el div

y esta información será copiada entre y la función @RenderBody() de nuestro archivo _Layout.cshtml  y después de @RenderBody() cerraremos tres etiquetas quedando como en la siguiente imagen:

En este caso la barra de Navegación se encuentra colapsada para no tener que poner una imagen tan grande, espero se entienda. A hora no dedicaremos a la sección que no hemos copiado, pero esta se encuentra en otro archivo, que esta en la carpeta raíz, View>Home el archivo se llama index.cshtml, primero borraremos todo respetando las siguientes lineas

@{
ViewBag.Title = “Home Page”;
}

después de esas lineas copiaremos toda la sección que no copiamos que se encontraba dentro de la etiqueta <div class=”container-fluid”> quedando el archivo de la siguiente manera:

La imagen no nos muestra todo para meter una imagen más pequeña pero para el caso es lo mismo.

Despues de haber hecho todas estas modificaciones tenemos un Layout en nuestra solución lista para trabajar corremos la aplicación y veremos que queda como la siguiente:

Por hoy terminamos con este apartado, también explicado en el libro que estoy haciendo que sera puesto a la venta en Amazon en un par de meses.

Descargar la Solucion

A %d blogueros les gusta esto: