Amigo mío Siempre estas Programando en .NET : ASP.NET MVC

[Evento] Mañana estaré en el Lanzamiento de Visual Studio 2012 con MadridDotNet

Luis Ruiz Pavón — Mon, 22 Oct 2012 14:36:00 GMT

Mañana estaré con el Grupo de Usuario de Madrid .NET en la Universidad Politécnica de Madrid (Avenida Complutense nº 30 Ciudad Universitaria Madrid Madrid España) en el evento de lanzamiento de Visual Studio 2012 que hemos preparado. La agenda es la siguiente: Un poco de Visual Studio 2012 + ALM 2012 - Bruno Capuano & Luis Fraile CodedUI Tests en Visual Studio 2012 – Juan Carlos Quijano Novedades en el IDE de VS2012 - Bruno Capuano & Luis Fraile Windows...(read more)

[ASP.NET MVC] Controladores con el mismo nombre con MVC y WebAPI en el mismo proyecto

Luis Ruiz Pavón — Thu, 11 Oct 2012 07:19:51 GMT

Si estas empezando a usar WebAPI y ASP.NET MVC , una pregunta que se suele hacer la gente es como poder usar el mismo nombre de controlador tanto para nuestra api como para nuestros controladores de mvc. La respuesta es sencilla y nos la da de base .NET: Namespaces Yo en mis desarrollos me creo una nueva carpeta dentro de Controllers llamada Api : Así puedo tener el 2 controladores con el mismo nombre pero en diferente espacio de nombres. namespace Company.Project.Web.Controllers { public class WeatherController...(read more)

[ASP.NET] Dale un toque Metro a tus aplicaciones ASP.NET con jQuery (II)

Luis Ruiz Pavón — Tue, 24 Apr 2012 08:27:46 GMT

Introducción Siguiendo con la serie de post sobre como darle un toque Metro a nuestras aplicaciones ASP.NET ( Aquí el primero de la saga si te lo perdiste ), en este post vamos a ver otro plugin de jQuery – jqMetro para simular un Pivot como el de Windows Phone 7. Aunque en este caso, no tendremos el problema del ancho de pantalla. Lo primero como viene siendo habitual, es descargar los archivos necesarios para hacer funcionar todo esto en nuestra aplicación ASP.NET MVC: El fichero JavaScript http...(read more)

[Evento] Resumen del evento de GuseNET sobre “Inyección de dependencias”

Luis Ruiz Pavón — Mon, 09 Apr 2012 07:04:23 GMT

El viernes 23 de Marzo tuve el placer de dar un evento sobre inyección de dependencias para el grupo de usuarios NET del Sureste , en el que vimos de principio a fin que es esto de la inyección de dependencias y como nos ayuda a crear software desacoplado, más mantenible y testeable. Luego con un sencilla demo sobre ASP.NET MVC lo llevamos a la práctica y al final del evento repartimos unos vouchers de un mes para Pluralsight y sorteamos un libro de patrones en ASP.NET que ganó Jonathan Quiero dar...(read more)

[ASP.NET] Dale un toque Metro a tus aplicaciones ASP.NET con jQuery (I)

Luis Ruiz Pavón — Fri, 16 Mar 2012 09:25:00 GMT

Ahora que está tanto de moda el tema Metro , tanto por la llegada de Windows Phone 7, como por la salida de la nueva versión de Windows 8 Consumer Preview, los desarrolladores que trabajamos con ASP.NET podemos dar un toque Metro a nuestras aplicaciones. Voy a empezar por jQUIT Builder , que es una herramienta que nos permite crear temas (Entre ellos Metro , Mango y Windows 8) para jQuery UI Por ejemplo, podemos ver en la siguiente imagen como quedaría un acordeón o las...(read more)

[Evento MSDN] Todo lo que te gustaría saber sobre la inyección de dependencias y como aplicarlo en ASP.NET MVC

Luis Ruiz Pavón — Wed, 14 Mar 2012 07:52:00 GMT

El día 23 de Marzo a las 18:00 (La semana que viene) estaré con los amigos del Grupo de Usurios NET del Sureste – GUSE.net dando una charla sobre inyección de dependencias, contendedores de dependecias, pruebas unitarias, pruebas de acoplamiento y como aplicarlo en una aplicación ASP.NET MVC. Sortearemos 1 libro y 5 suscripciones mensuales a Pluralsight El enlace para el registro y toda la información la tenéis disponible en el siguiente enlace: https...(read more)

[ASP.NET MVC 3] Por qué IDependencyResolver no cumple con la filosofía de los IoC

Luis Ruiz Pavón — Fri, 16 Sep 2011 10:39:00 GMT

No se si el título es muy adecuado, pero espero que leyendo esto y los artículos que menciono os quede más claro. Tengo pendiente escribir una serie de sobre DI (Qué es, patrones, antipatrones…), pero de momento voy a escribir sobre este tema ya que el otro día por twitter lo estuve hablando con @pablonete sobre como implementar DI en ASP.NET MVC, Yo conocía desde la versión 1.0 la implentación de DI usando un IControllerFactory pero...(read more)

Materiales del evento “Un paseo por ASP.NET MVC”

Luis Ruiz Pavón — Thu, 19 May 2011 06:29:00 GMT

Ya está disponible la grabación del evento de ayer, basta con acceder a la url de registro del mismo y pinchar el botón Ver en línea. Lo materiales del evento los podéis descargar más abajo. No me quería despedir sin dar las gracias de nuevo a Eduard por inaugurar el grupo de usuarios que nos deleitó con una muy buena introducción a este framework y que a más de unó le dejó un buen sabor de boca. Ayer recibimos feedback...(read more)

[ASP.NET MVC 3] Paginar información automáticamente con el scroll usando JQuery

Luis Ruiz Pavón — Fri, 15 Apr 2011 09:05:00 GMT

No sé sí el título será muy acertado pero lo que quiero mostrar es como cargar más información en nuestra página tal cual lo hace Facebook, Google Reader… cuando la barra de scroll llega al final. (Al final del artículo está el código de ejemplo) Para ello vamos a hacer uso de JQuery y del evento del scroll de la ventana. En este caso no necesitamos ninguna librería adicional de JQuery pues ya lo tenemos disponible...(read more)

[ASP.NET MVC3] Crear un Autocomplete TextBox

Luis Ruiz Pavón — Mon, 04 Apr 2011 11:20:00 GMT

Aunque normalmente trabajo con el hermano mayor (ASP.NET) he de reconocer que ASP:NET MVC me gusta mucho y de vez en cuando trasteo un poquillo y como resultado ha salido este artículo. Lo primero es crear una aplicación ASP.NET MVC 3 Seleccionamos que queremos una “Internet Application” y el motor de vistas “Razor” Lo primero que vamos a hacer, es descargar una librería JQuery que se llama Autocomplete . Una vez descargado, la descomprimimos y tenemos...(read more)

[ASP.NET] jQuery Templates

Luis Ruiz Pavón — Tue, 11 May 2010 11:48:00 GMT

En el blog de Scoot hay un extenso artículo sobre esta nueva contribución de Microsoft a esta fantástica librería como es jQuery.

Me voy a centrar en este artículo en las templates de cliente:

¿Que són?

Pues digamos que es como una mezcla de código javascript y HTML que nos permiten generar código HTML a través de un objeto o array de objetos javascript, algo como esto:

<script id="productTemplate" type="text/html">

    <div>

        Product Id: {{= id }} <br />

        Title: {{= title }} <br />

        Description: {{= description }} <br />

        Price: € {{= price }}

    </div>

</script>

En este caso el objeto que vamos a represnetar (Product) tiene 4 propiedades (id, title, description, price) que están representadas dentro de los corchetes.

En el ejemplo que os voy a mostrar, los datos se están consumiendo de un servicio REST desarrollado con WCF.

Lo primero es la página aspx:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

    <title>JQuery</title>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>How to use jQuery Templates</h2>

    <h1>List of Products</h1>

    <div id="productsContainer">

    </div>

<script id="productTemplate" type="text/html">   1:  

   2:     <div>

   3:         Product Id: {{= id }} <br />

   4:         Title: {{= title }} <br />

   5:         Description: {{= description }} <br />

   6:         Price: € {{= price }}

   7:     </div>
</script>

    <br/>

    <br/>

    <input id="btnGetProducts" type="button" value="Get Products from WCF Service!!!" />

</asp:Content>

Una vez que tenemos la página, añadimos en la master la referencia a los scripts:

<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript" />

<script src="../../Scripts/Common.js" type="text/javascript" />

<script src="../../Scripts/jquery.tmpl.js" type="text/javascript" />

La librería jquery.tmpl.js la podéis descargar de aquí: http://github.com/jquery/jquery-tmpl

Ahora vamos con el código del fichero Common.js:

var serviceUrl = 'http://localhost:49766/ProductService.svc';

var getAllMethod = '/products/json';

var postMethod   = '/products/json';

var deleteMethod = '/products/{id}/json';

$(document).ready(function() {

    $('#btnGetProducts').click(getProducts);

});

function getProducts() {

    var noCache = Date();

    $.getJSON(serviceUrl + getAllMethod, { 'noCache': noCache }, function process(details) {

        details.length = details.length ? details.length : 0;

        $('#opProducts').children().remove();

        if (details.length == 0) {

            alert('No Products!!!');

        else {

            alert(details);

            $("#productTemplate").render(details).appendTo("#productsContainer");

});

Lo interesante en este código es esta línea:

$("#productTemplate").render(details).appendTo("#productsContainer");

donde haciendo uso del método render al que le pasamos el array de objetos que nos devuelve el servicio REST, para que lo renderize con la template y lo añada al div productsContainer dando como resultado lo siguiente:

Y todo esto desde la parte cliente ¿No os parece acojonante?

Un saludo y atentos al siguiente ;)

[ASP.NET MVC] (Part II) Views

Luis Ruiz Pavón — Thu, 18 Jun 2009 12:19:00 GMT

Definición

En el anterior post hablabamos sobre los controladores y en este toca hablar de las vistas, que no son ni más ni menos que nuestra carta de presentación frente al usuario y es lo primero que entra por los ojos y por eso debemos prestarlas mucha atención.

Cuando salieron los primeros bytes de ASP.MVC y actualmente, mucha gente al ver las etiquetas <% %> en las vistas:

<%=Html.TextBox("username") 
%>

cree que ha vuelto el Spaghetti Code, os recomiendo leer este artículo:

http://blog.wekeroad.com/blog/asp-net-mvc-avoiding-tag-soup/

En el que precisamente se habla de como ASP.NET MVC se puede evitar todo esto, aunque por supuesto que con ASP.NET MVC, Ruby… se puede escribir Spaghetti Code, pero eso no es por la tecnología, sino por la calidad del programador.

Una de las cosas que tenemos que tener en bastante en cuenta es que la vista no de debe contener nada de lógica de negocio y que sólo debe ocuparse de la presentación de los datos del modelo.

A simple vista cuando creamos un proyecto de ASP.NET MVC podemos observar que existe una carpeta llamada Views:

y a parte, por cada controlador existe una carpeta que contiene vistas, que a su vez corresponden con los Action Methods del controlador:

public ActionResult LogOn(string userName, string password, bool rememberMe, string returnUrl)

public ActionResult Register()

public ActionResult ChangePassword()

Aunque no todas las vistas tienen porque corresponder a un Action Method, por ejemplo ChangePasswordSuccess.aspx será una vista a la que se redirigirá desde el método Register cuando se cambie la password correctamente.

if (MembershipService.ChangePassword(User.Identity.Name, currentPassword, newPassword))

    return RedirectToAction("ChangePasswordSuccess");

Para crear una vista basta con pulsar botón derecho sobre el Action Method que queremos crear su vista:

Por defecto el nombre de la vista se corresponde con el del Action Method.

Tipos de Vistas

Podemos crear 3 tipos de vistas:

Vista por defecto (aspx)
Vista parcial (ascx)
Vista fuertemente tipada, que nos permite seleccionar una entidad de nuestra solución sobre la se generará la vista y el template que queremos utilizar (Vacia (por defecto), Creación, Edición, Detalle y Listado)

La diferencia fundamental entre una vista fuertemente tipada y no está en la manera en la que accedemos al modelo de nuestra aplicación, que con una vista tipada es más claro y no tenemos que estar haciendo un cast del ViewData que retorna un object:

NO TIPADA

Directiva de página

Inherits="System.Web.Mvc.ViewPage"

Código

<% foreach (var item in (ViewData["Employee"] as IEnumerable<Employee>)) { %>

TIPADA

Directiva de página

Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcDemoApplication.Models.Employee>>

Código

<% foreach (var item in Model) { %>

Donde Model es del tipo TModel, es decir, en nuestro caso del tipo Employee

public class ViewPage<TModel> : ViewPage where TModel : class

    public ViewPage();

    public AjaxHelper<TModel> Ajax { get; set; }

    public HtmlHelper<TModel> Html { get; set; }

    public TModel Model { get; }

    public ViewDataDictionary<TModel> ViewData { get; set; }

    public override void InitHelpers();

    protected override void SetViewData(ViewDataDictionary viewData);

Dentro de la vista tenemos acceso a la clase Html, que es un helper que nos facilita un montón de métodos extensores para crear todo tipo de controles y atributos HTML. Además todos los métodos hacen uso de Encode para los datos que van a mostrar:

Html.ActionLink: Crear un hyperlink a otro Action Method

Html.TextBox: Crea un tag input con el atributo type establecido como text

…

Para ver todos los métodos de la clase Html: http://msdn.microsoft.com/en-us/library/system.web.mvc.html.aspx

ViewEngine

Otra cosa que podemos hacer en ASP.NET MVC es poder utilizar otro motor de vistas que no sea el propio de ASP.NET MVC, es decir podemos usar HHaml, NVelocity, Brail, Spark…

En el siguiente ejemplo vamos a ver como podemos añadir el motor de vistas de HNaml a un proyecto ASP.NET MVC:

Lo primero es descargar NHaml –> http://code.google.com/p/nhaml/

A continuación creamos un nuevo proyecto:

Una vez creado el proyecto, añadimos las siguientes referencias:

NHaml.dll
NHaml.Web.Mvc.dll
Microsoft.Web.Mvc.dll

A continuación, añadimos la siguiente línea de código a nuestro Global.asax:

protected void Application_Start()

    RegisterRoutes(RouteTable.Routes);

    ViewEngines.Engines.Add(new NHaml.Web.Mvc.NHamlMvcViewEngine());

para enchufar el motor de vistas de NHaml. Hecho esto, vamos a añadir al Web.Config la siguiente configuración:

Dentro del tag ConfigSections, añadimos una nueva sección para NHaml:

<section name="nhaml" type="NHaml.Configuration.NHamlConfigurationSection, NHaml"/>

Fuera del tag Configuration, ya podemos definir nuestro tag nhaml:

<nhaml autoRecompile="true" templateCompiler="CSharp3" encodeHtml="false" useTabs="false" indentSize="2">

    <assemblies>

        <add assembly="NHamlMvcApplication"/>

    </assemblies>

    <namespaces>

        <add namespace="NHamlMvcApplication"/>

        <add namespace="NHamlMvcApplication.Controllers"/>

    </namespaces>

</nhaml>

El assembly es el nombre de nuestro proyecto y en el namespace también y añadimos también el de los controladores.

A continuación vamos a añadir nuestra MasterPage de NHaml, para ello:

Botón derecho sobre la carpeta Views/Shared y añadir un nuevo item:

Ahora, vamos añadir marcado NHaml a nuestra página:

%html

%head

  %title = "Demo NHaml"

  %link{ href="../../Content/Site.css" rel="stylesheet" type="text/css" }

%body

  %div.page

Pudes ver la referencia de marcado en NHaml aquí –> http://andrewpeters.net/2007/12/19/introducing-nhaml-an-aspnet-mvc-view-engine/

A continuación, vamos a crear nuestro de modelo de datos, que en esta caso será algo sencillo y nos basaremos en el patrón Repositorio:

Entidad

public class User

    public int Id

        get;

        set;

    public string Name

        get;

        set;

    public int Age

        get;

        set;

Interfaz

interface IUsersRepository

    List<User> GetUsers();

Implementación

public class TestUserRepository : IUsersRepository

    #region IUsersRepository Members

    public List<User> GetUsers()

        List<User> users = new List<User>{

            new User(){ Id = 1, Name = "Tom", Age = 20},

            new User(){ Id = 2, Name = "Tom 2", Age = 21},

            new User(){ Id = 3, Name = "Tom 3", Age = 22}

};

        return users;

    #endregion

Añadimos un nuevo controlador al que denominaremos UserController:

public class UserController : Controller

    public ActionResult Index()

        TestUserRepository repository = new TestUserRepository();

        var users = repository.GetUsers();

        return View("List", users);

Y por último vamos a crear nuestra vista a la que llamaremos List.haml dentro de la carpeta Views/User:

Y la añadimos el siguiente código para mostrar un listado de los nombres de los usuarios:

%h2= "List of Users"

%ul

  - foreach (var user in Model)

%li

        = user.Name

Y ya solo queda probarlo:

Bueno, pues hasta aquí las vistas, espero que os haya resultado interesante y en la siguiente veremos como que son los Filters

Salu2

[ASP.NET MVC] (Part I) Controllers

Luis Ruiz Pavón — Fri, 29 May 2009 12:24:59 GMT

En el patrón Modelo Vista Controlador, la función principal del controlador es responder a los eventos, normalmente producidos por la interacción del usuario con la vista, que pueden o no causar modificaciones en el modelo.

IController Inteface

Para que una clase actue como controlador, como mínimo debe implementar la interfaz IController:

using System;

using System.Web.Routing;

namespace System.Web.Mvc

    public interface IController

        void Execute(RequestContext requestContext);

Vamos a crear nuestro primer controlador implementado esta interfaz, para ello añadimos una nueva clase (Class.cs no Controller) a la carpeta Controllers y sustituiremos por este código:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace Geeks.Controllers

    public class TestController : IController

        #region IController Members

        public void Execute(System.Web.Routing.RequestContext requestContext)

            requestContext.HttpContext.Response.Write("TestController");

        #endregion

Arrancamos la aplicación y probamos:

Una de las peculiaridades de ASP.NET MVC, es lo que se denomina Conventions over Configurations, es decir si aceptamos la norma de nomenclatura en la que todo controlador se identificará <Nombre>Controller, cuando queramos acceder al controlador bastará con utilizar solo el nombre y el Routing se encargará de hacer el resto del trabajo por nosotros, es decir, con esto nos evitamos mantener archivos de configuración, settings...

ControllerBase Class

Es la clase base para la clase Controller, que implementa IController y ademas nos provee de las propiedades TempData y ViewData, que como veremos más adelante nos servirá para enviar los datos a nuestra vista.

Controller Class

Es la clase base para nuestros controladores e implementa la clase ControllerBase

Action Methods

Tendremos que implementar nuestros Action Methods, que son métodos públicos que tienen una correspondencia 1 a 1 con las interacciones del usuario, por ejemplo, teniendo un controlador de productos, tendremos Action Methods para obtener un producto, alta, modificación, borrado…

namespace Geeks.Controllers

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.Mvc;

    using System.Web.Mvc.Ajax;

    public class ProductController : Controller

        public ActionResult Get()

            return View();

        public ActionResult Add()

            return View();

        public ActionResult Edit()

            return View();

        public ActionResult Delete()

            return View();

Sí ejecutamos http://localhost:1959/Products/Add, nos encontraremos con un error 404, porque cada Action Method de los anteriores debería tener una vista asociada (No siempre tienen porque tener asociada una vista, pero en este caso sí)

Los constructores, propiedades, eventos no pueden actuar cono Action Methods, ni los métodos definidos en la clase Object (Ej: ToString) ni Dispose()…

ActionResult

A simple vista nos puede llamar la atención que todos los Action Methods devuelven un tipo ActionResult:

using System;

namespace System.Web.Mvc

    // Summary:

    //     Encapsulates the result of an action method and is used to perform a framework

    //     level operation on the action method's behalf.

    public abstract class ActionResult

        protected ActionResult();

        // Summary:

        //     Enables processing of the result of an action method by a custom type that

        //     inherits from System.Web.Mvc.ActionResult.

//

        // Parameters:

        //   context:

        public abstract void ExecuteResult(ControllerContext context);

En el primer ejemplo que vimos cuando implementamos IController, directamente escribiamos un texto a través de Response, pero esto rompe con el término inglés “Separation on Concerns”, es decir, rompemos el concepto de separación por funcionalidad, metemos en el controlador código que debería estar en la vista, por eso está la clase ActionResult y un buen ejemplo es que podemos pasar un ViewResult (Que hereda de ActionResult) a la vista y ella ya tiene el código para formatear y mostrar los datos del producto al usuario, qué por otra parte es la función de la vista:

public ActionResult Get(string id)

    List<Products> products = SqlRepository.GetProductById(id);

    ViewData.Model = products;

    return new ViewResult { ViewData = this.ViewData };

Y para simplificar código, podemos usar los Helper Methods que nos brinda la clase Controller:

public ActionResult Get(string id)

    List<Products> products = SqlRepository.GetProductById(id);

    return View(products);

Existen varios tipos de ActionResult a parte de ViewResult:

Action Method	Helper Method	Descripción
ViewResult	View	Llama al motor de vistas para renderizar la vista
PartialViewReult	PartialView	Como ViewResult, pero renderiza una vista parcial. Se usa normalmente en peticiones Ajax
RedirectResult	Redirect	Redirigir a otro Action Method usando una Url
RedirectToRouteResult	RedirectToAction RedirectToRoute	Redirigir a otro Action Method
ContentResult	Content	Retonar un tipo de contenido definido por el usuario
JsonResult	Json	Retornar contenido Json
JavaScriptResult	JavaScript	Retornar código JavaScript
FileResult	File	Retornar el contenido de un fichero (Binary Output)
EmptyResult		No hace nada (Null Object Pattern)

ActionNameAttribute

Nos permite enmascarar los nombres de los Action Methods, así podemos tener nombres más significativos en nuestro código y más facilmente accesibles a través de Url, por ejemplo:

[ActionName("Get")]

public ActionResult GetProductById(string id)

    return View();

ActionVerbsAttribute

Establece el método HTTP al que responderá el Action Method:

namespace Geeks.Controllers

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.Mvc;

    using System.Web.Mvc.Ajax;

    public class ProductController : Controller

        [AcceptVerbs(HttpVerbs.Get)]

        public ActionResult Edit(string id)

            return View();

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Edit(string id, FormCollection form)

            /// Save and Redirect

En la siguiente entrega veremos las vistas.

Bibliografía: Professional ASP.NET MVC 1.0

Salu2