Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

ASP.NET MVC Series–Qué es ASP.NET MVC?

Comenzamos esta serie bien desde el principio, contestando algunas grandes preguntas:

  • Qué es ASP.NET MVC y para qué sirve?
  • Es lo mismo que ASP?
  • Es lo mismo que ASP.NET?
  • Qué ventajas tengo si lo uso?
  • Qué desventajas tengo si lo uso?
  • A partir de ahora lo uso para todos los sitios web que voy a hacer?
  • Es gratis, open source, qué hace falta para usarlo?

Vamos a empezar a contestarlas de a una.

image

Qué es ASP.NET MVC?

ASP.NET MVC es un framework de desarrollo web desarrollado por Microsoft, está construido sobre ASP.NET y es una implementación del patrón Model View Controller, actualmente nos encontramos en la versión 4 de este producto.

Sirve para hacer aplicaciones Web de todo tipo y en su última versión permite hacer servicios REST de forma muy sencilla.

Es lo mismo que ASP?

No, ASP o ASP 3 o también conocido como ASP clásico es algo bien diferente y no tiene nada que ver con el mundo .net, si bien ASP.NET supone una evolución del otro.

Es lo mismo que ASP.NET?

No, en ASP.NET MVC no existen los webforms ni los componentes ni los eventos ni el viewstate como se conocen en ASP.NET, si bien está construido sobre ASP.NET y esto implica que tienen mucho en común la idea es bien distinta debido al patrón que utilizan.

Qué ventajas tengo si lo uso?

La principal ventaja es la utilización del patrón MVC que permite organizar la aplicación de un modo más claro, donde cada parte tiene su responsabilidad, esto permite además, utilizar pruebas unitarias sobre el modelo si aplicamos bien el patrón, y también trabajar casi sin pensar en la presentación, vuelvo a aclarar, siempre que se utilice bien el patrón.

Además tenemos total control de lo que ocurre, a diferencia de ASP.NET webforms en donde muchas cosas están fuera de nuestro control.

Por último es extremadamente extensible, lo que no hace el framework tal cual se ofrece podemos hacerlo con algún componente externo o hacerlo nosotros, esto incluye el manejo de rutas, los filtros, tipos de resultados, etc.

Qué desventajas tengo si lo uso?

La principal desventaja es que es más complejo lograr cosas que con ASP.NET con webforms son muy sencillas como por ejemplo conectar a una base de datos y mostrar en una grilla, la otra desventaja es que es necesario un mayor conocimiento de HTTP para lograr aprovechar el potencial de la herramienta.

A partir de ahora lo uso para todos los sitios web que voy a hacer?

Una gran pregunta, en mi opinión la respuesta es que no, sin embargo para la gran mayoría de las aplicaciones que vamos a hacer normalmente es lo más indicado, pero puede haber casos de armar un prototipo rápido o una herramienta para llenar datos en la que webforms o algo basado en componentes sería más rápido de implementar y más adecuado.

Es gratis, open source, qué hace falta para usarlo?

En principio es un framework construido sobre ASP.NET MVC que es open source, sin embargo hace falta .NET 2 o superior para correrlo (o Mono) por lo tanto es necesario por lo menos IIS 6 (se puede hacer funcionar MVC 1 en IIS 5 con un poco de configuración)

Si queremos utilizar el patrón MVC en .NET 1.1 tenemos que utilizar alguna otra implementación como por ejemplo Monorail

Por último

Según mi experiencia hoy por hoy la forma de hacer una aplicación web con el stack .NET es con MVC, si bien ASP.NET webforms ha ido evolucionando sigue teniendo lo que para mí son grandes contras, la cantidad de HTML que genera de más, problemas de compatibilidad con browsers de algunos componentes y la falta de control sobre el comportamiento de algunas cosas (el ciclo de vida de ciertos componentes no es igual que el del webforms, etc) ASP.NET MVC permite ir a una arquitectura más clara y escalable (no digo que no se pueda con ASP.NET webforms pero hay que poner mucho del lado de uno ya que el framework no está pensado así) y utilizar prácticas más profesionales como test unitarios en prácticamente todas las partes de la aplicación.

Además ASP.NET MVC es muy extensible y podemos controlar prácticamente todo el comportamiento, mi consejo es usarlo siempre que sea posible.

Hasta la próxima.

ASP.NET MVC Series-Empezando desde cero

Nota: ya escribí antes sobre ASP.NET MVC y no es un tema nuevo, el objetivo de esta serie de post es ayudar a la gente que no se ha introducido todavía en el tema.´

Presentación

Este post es el primero de una serie que pienso llevar adelante sobre ASP.NET MVC, la idea es cubrir la mayor parte de temas empezando bien desde cero para que quienes no conocen la tecnología, o escucharon y nunca se metieron en tema, o lo usan pero hay muchas cosas que no son claras, puedan tener mejores herramientas para abordar el desarrollo de aplicaciones web.

Qué vamos a cubrir

Con respecto a ASP.NET MVC, vamos a hablar sobre la herramientas, sobre el patrón de diseño, las ventajas, también sobre las versiones, diferentes motores de vista, pero no dejaremos de lado cosas importantes como librerías populares como jQuery, Modernizr.js, y por supuesto las técnicas asociadas a una aplicación web moderna, como CSS 3, HTML5, AJAX, CDN, etc.

Tal vez algunas cosas sean redundantes con otros post, pero la idea es poder seguir un aparente order Guiño

Invitación

Entonces, estaré iniciando los post sobre ASP.NET MVC esta misma semana, así que manténganse atentos, si quieren que se toque algún tema en particular no tienen más que enviarme un mail, un tweet un DM o utilizar el formulario de contacto del blog.

Nos leemos.

Cómo devolver imágenes en ASP.NET MVC, o qué es un ActionResult?

En general cuando trabajamos con ASP.NET MVC la mayor parte de las veces nuestros Controllers devuelve un tipo derivado de ActionResult usando un método de la clase base Controller, por ejemplo así:

[HandleError]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewData["Message"] = "Welcome to ASP.NET MVC!";

        return View();
    }
}

En este caso estamos devolviendo una vista, es decir, un HTML.

Todo es HTTP

En definitiva, todo lo que retorna un Controller es una respuesta HTTP, los ActionResult no son más que representaciones de diferentes tipos de respuestas HTTP, que en principio son casi iguales (remarco el casi) pero ASP.NET MVC modifica el header Content-type de la respuesta para que el navegador la interprete de una u otra forma, en el caso de una Vista pasa esto (con Fiddler):

image

 

Como se ve en la imagen el header Content-type indica que la respuesta tiene que ser interpretada como text/html, es decir un HTML.

Qué pasa si retornamos un Redirect?

Entre los métodos de la case base Controller tenemos uno que se llama Redirect, que no hace más que retornar una respuesta HTTP con el status code que indica al navegador que debe redireccionar y además agrega la URL de destino

public ActionResult Index()
{
    return base.Redirect("http://www.bing.com");
}

image

En el caso que devolvamos el método Script tenemos un status code 200 y el Content-type correspondiente a un Script

public ActionResult Index()
{
    return base.JavaScript("alert('este código javascript 
es devuelto por el controller')");
}

image

Entonces, cómo devolvemos una imagen desde ASP.NET MVC?

Entonces para devolver una imagen desde un Controller tenemos que escribir su contenido (el Stream de la imagen) en el cuerpo de la respuesta y el Content-type adecuado para el tipo de imagen, por ejemplo image/png

public ActionResult Index()
{
    var content = System.IO.File.ReadAllBytes(Server.MapPath("~/images/facebook.png"));
    return base.File(content, "image/png");
}

image

Y listo!

image

Nos leemos!

101 Javascript Samples, nuevo Open Source de Kinetica

Junto con Matías Iácono y Fernando Claverino estábamos pensando en alguna manera de compartir la experiencia con Javascript con nuestros compañeros de Kinetica y, por qué no, con el mundo.

Un proyecto, muchos colaboradores

Entonces se nos ocurrió generar una base de conocimientos para todo el mundo en un repositorio de acceso público, que abarque lo que nosotros sabemos y lo que todos puedan aporta con pequeños ejemplos, de a poco, pero tratando de cubrirlo todo.

101 Javascripts samples en Github

Es por eso que empezamos esta semana a reunirnos en grupos y abordar diferentes temas de Javascript como:

  • Creación de objetos
  • TDD
  • Modularización

Y de esta manera comenzar a generar el material, pero más que nada, generar conocimiento colectivo de todos y para todos, estos temas son los iniciales, vamos a tratar de tocar todos.

Invitación

De momento quien quiera puede abrir un fork o hacer pull request, el repositorio está en

https://github.com/leomicheloni/101-javascript-samples

Más adelante iremos pensando cómo integrar a más gente y cómo ir haciendo de esto algo bien útil para todos.

Nos leemos.

jQuery .end() ese oculto incomprendido

Es verdad, jQuery es muy grande y tiene muchas funciones y muchas medio “ocultas” que salen un poco de lo común pero no por eso menos útiles o mágicas como yo digo a veces, entre ellas está la función end() extrañamente muy poca gente la conoce y muy poca la usa, sin embargo vamos a ver que nos puede ser de mucha ayuda.

Volver un paso atrás en la cadena de filtro con end()

Bien, es eso, jQuery.end() vuelve al punto anterior dentro de la cadena de filtros, por ejemplo:

<div>
    <span class="mensaje">hola</span>
    <span class="despedida">chau</span>    
</div>

Tenemos ese HTML y queremos modificar ambos elemento del tipo span en un único selector pero hacer cosas distintas, por ejemplo, cambiarles el texto, entonces gracias a end() podemos a partir del padre de ambos (en este caso el div) hacer un filtro, manipular el elemento, volver para atrás, hacer otro filtro y volver a manipular, en este caso sería así:

$("div").find(".mensaje").text("hola mundo").end()
.find(".despedida").text("adiós mundo")

En resumen primero buscamos el div

$("div")

después filtramos por el primer span y lo modificamos

$("div").find(".mensaje").text("hola mundo")

hacemos end() para volver antes del filtro

$("div").find(".mensaje").text("hola mundo").end()

y de nuevo filtramos por el segundo span y modificamos

$("div").find(".mensaje").text("hola mundo").end()
.find(".despedida").text("adiós mundo");

jsfiddle con el ejemplo.

Mágico, nos leemos.