Una sinfonía en C#

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

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.

Portapapeles circular en Visual Studio

 

Este es un truco muy simple pero que a mí me ayuda día a día y a mucha gente que le comenté le sorprendió y le pareció muy útil, sencillamente:

Queremos pegar el contenido del portapapeles como muchas veces, pero no el último que copiamos sino uno anterior, es esto posible? respuesta simple: si!

Cómo usar el portapapeles de visual studio de manera circular, es decir, acceder a cosas copiadas antes?

Simplemente en lugar de usar Ctrl + V usamos Shift + Ctrl + V

Magia, espero sea útil