Archivo de la categoría: ASP.NET MVC

Release Candidates para ASP.NET MVC 5.2, Web API 2.2 y Web Pages 3.2.

Ya puedes descargar los RC de ASP.NET MVC 5.2, Web API 2.2 y Web Pages 3.2 usando la galería de NuGet.

Puedes instalar o actualizar los paquetes usando el NuGet Package Manager así:

Install-Package Microsoft.AspNet.Mvc -Version 5.2.0-rc.Pre
Install-Package Microsoft.AspNet.WebApi -Version 2.2.0-rc.Pre
Install-Package Microsoft.AspNet.WebPages -Version 3.2.0-rc.Pre

Pre-requisitos para esta versión.

  • Si estás usando Visual Studio 2012, descarga ASP.NET y Web Tools 2013.1 para Visual Studio 2012.
  • Si estás usando Visual Studio 2013, descarga Visual Studio Update 1 o superior. Esta actualización es necesaria para editar vistas Razor en ASP.NET MVC 5.2.

¿Qué hay de nuevo?

Nuevas características para Web API OData v4 y correcciones menores de error.

ASP.NET MVC 5.2 Release Candidate.

  • Mejoras en Attribute Routing.
  • Actualización de «features».
  • Correcciones de error.

ASP.NET Web API 2.2 Release Candidate.

  • Soporte para OData v4.
  • Mejoras en Attribute Routing.
  • Soporte de Web API Client para Windows Phone 8.1.
  • Actualización de «features».
  • Correcciones de error.

ASP.NET Web Pages 3.2 Release Candidate.

  • Actualización menor de características.
  • Corrección de error.

Extraído de .NET Web Development and Tools Blog.

ASP.NET Web API Entrevista: Preguntas y Respuestas.

¿Qué es ASP.NET Web API?

Es un marco de trabajo (framework) encima del .NET framework, que simplifica la construcción de servicios HTTP para un amplio rango de clientes (incluyendo navegadores móviles).

Usando ASP.NET Web API podemos crear servicios que no están basados en SOAP como XML simple o cadenas JSON, etc. con muchas ventajas incluyendo

  • Crear servicios orientados a recursos usando las características completas de HTTP.
  • Exponer servicios a una variedad de clietnes fácilmente como navegadores o dispositivos móviles, etc.

¿Cuáles son las ventajas de usar ASP.NET Web API?

Usarlo tiene un gran número de ventajas pero las ventajas importantes son:

  • Funciona de la manera de HTTP usando verbos estándares como GET, POST, PUT, DELETE para operaciones CRUD (crear, reportar, actualizar, eliminar).
  • Soporte completo para enrutamiento.
  • Respuesta generada en formato JSON o XML usando MediaTypeFormatter.
  • Tiene la habilidad de ser hospedado en IIS (Internet Information Services) y fuera de IIS.
  • Soporta enlace de modelos y validación.
  • Soporte para OData.

¿Qué nuevas características son introducidas en ASP.NET Web API 2.0?

Las siguientes:

  • Enrutamiento de atributos.
  • Autenticación externa.
  • CORS (Cross-Origin Resource Sharing)
  • OWIN (Open Web Interface para .NET) auto hospedaje.
  • IHttpActionResult.
  • Web API OData.

¿WFC versus ASP.NET Web API?

WFC (Windows Communication Foundation) está diseñado para intercambiar mensajes estándares basados en SOAP usando una variedad de protocolos de transporte como HTTP, TCP, Named Pipes, MSMQ, etc.

Por otro lado, ASP.NET Web API es un marco de trabajo para construir servicios que no están basados en SOAP, solamente sobre HTTP.

¿Es verdad que ASP.NET Web API ha reemplazado WCF?

Es un concepto erróneo. Es sólo otra forma de construir servicios que no están basados en SOAP.

Tiene algunas ventajas añadidas pero WCF es aún la mejor opción para los siguientes escenarios:

  • Si vamos a usar un transporte diferente a HTTP como por ejemplo TCP, UDP o Named Pipes.
  • Escenario de encolamiento de mensajes usando MSMQ.
  • Comunicación de una sola vía o comunicación dúplex.

¿MVC versus ASP.NET Web API?

ASP.NET Web API crea simples servicios HTTP que devuelven datos crudos (RAW).

Por otro lado, ASP.NET MVC es utilizado para desarrollar aplicaciones web que generan Vistas así como datos. ASP.NET MVC facilita la generación de HTML fácilmente.

¿Cómo devolver una Vista desde un método ASP.NET Web API?

(Una pregunta difícil) No, no podemos devolver una Vista desde un método ASP.NET Web API.

¿Cómo restringir el acceso a un método Web API para un verbo específico HTTP?

Los atributos juegan un rol aquí. Fácilmente podemos restringir acceso a un método ASP.NET Web API usando un específico método HTTP. Por ejemplo podríamos tener que restringir un método Web API a través del verbo HTTP POST así:

[HttpPost]
public void UpdateStudent(Student aStudent)
{
   StudentRepository.AddStudent(aStudent);
}

¿Podemos utilizar Web API con un formulario web ASP.NET?

Sí, ASP.NET Web API está enlazado con el marco de trabajo ASP.NET MVC pero todavía puede ser utilizado con un formulario web ASP.NET.
Puede ser hecho en 3 simples pasos:

  1. Crear un controlador Web API.
  2. Agregar una tabla de ruteo al método Application_Start del Global.asax.
  3. Hacer una llamada jQuery AJAX al método Web API y obtener los datos.

¿Cómo podemos proveer de un nombre alias para una acción ASP.NET Web API?

Usando un atributo «ActionName».

[HttpPost]
[ActionName("SaveStudentInfo")]
public void UpdateStudent(Student aStudent)
{
   StudentRepository.AddStudent(aStudent);
}

ViewData y ViewBag en ASP.NET MVC 4.

Se pueden pasar datos desde el controlador a la vista a través de una clase diccionario especializada «ViewDataDictionary«. Se le llama ViewData. Ejemplo:

ViewData[Mensaje] = Hola;

El ViewBag es una envoltura (wrapper) dinámica alrededor de ViewData. Permite una sintáxis más simple. Ejemplo:

ViewBag.Mensaje = Hola;

Ambas son equivalentes.

Tener en cuenta que no se puede usar ViewBag si el índice no es un identificador válido en C#. Por ejemplo no puede tener espacios:

ViewData["El Mensaje"] no puede ser accedido usando ViewBag porque el código no compilará.

Adicionalmente los valores dinámicos no pueden ser pasados como parámetros a métodos de extensión. El compilador de C# debe conocer el tipo real de cada parámetro en tiempo de compilación para escoger el método de extensión correcto.

Por ejemplo este código fallará:
@Html.TextBox(«mensaje», ViewBag.Mensaje)

Hay 2 opciones:

@Html.TextBox("mensaje", ViewData["Mensaje"]

o

@Html.TextBox("mensaje", (string)ViewBag.Mensaje)

Diseñando sitios web fáciles de usar con dispositivos móviles (Mobile-Friendly).

Existen 2 estrategias comúnmente utilizadas:

Diseñar un sitio para móviles y uno separado para escritorio. A esta estrategia se le llama comúnmente «mdot» (m punto), normalmente porque muchos sitios ponen «m.» delante de la URL para móviles. Esta estrategia causa el problema de tener que mantener 2 o más sitios diferentes, cada uno con contenido duplicado y configuraciones web.

Responsive Web Design (RWD o Diseño Web que se adapta). La teoría es que si utilizas hojas de estilo (CSS) que se adaptan, podrás tener un sitio con una sola URL y que se adaptará a muchos tamaños de pantalla, moviendo columnas a los lados y haciendo que se vea bien en todos lados. El problema con esta estrategia es que el tamaño del contenido es muy grande debido a que aunque en una pantalla pequeña veas menos contenido no significa que tenga menos contenido. Contenido menos visible no es igual a menor cantidad de datos descargados. Este diseño no es óptimo para los dispositivos móviles. Si usas esta estrategia necesitas decidir si comenzarás con un diseño para móviles y hacer mejoras progresivas (progressive enhancement) conforme la pantalla se haga más grande, o si querrás comenzar por una pantalla de escritorio y luego harás degradación elegante (graceful degradation). Ambas maneras tienen serios problemas.

Una solución podría ser crear un sitio que tome las mejores partes de ambas estrategias: Adaptive View Design (Diseño de Vistas que se adaptan)

Exraído del libro ASP.NET MVC 4 Succinctly

Usando Metro UI CSS (versión 2.0) en ASP.NET MVC

Metro UI CSS es un conjunto de estilos y JavaScript para crear un sitio con una interfaz similar a Windows 8. Este conjunto de estilos fue desarrollado como una solución auto-contenida.

metroexample1

metroexample2

Metro UI CSS fue desarrollado por Sergey Pimenov en Kiev, Ucrania con las recomendaciones de Microsoft para construir la interfaz de usuario e incluye: estilos generales, cuadrícula, tipografía, más de 20 componentes, más de 300 íconos.

Metro UI CSS fue construído usando {LESS} (es un lenguaje dinámico de hojas de estilo) . Es software abierto y tiene el modelo de licenciamiento del MIT (Massachusetts Institute of Technology).

Metro UI CSS está en el programa BizSpark, un programa global de Microsoft para ayudar a empresas de software que recién se están iniciando, a lograr el éxito dándoles acceso a herramientas de desarrollo de software, conectándolos con jugadores claves de la industria y les da visibilidad para el mercadeo. Para unirte al programa ahora http://bizspark.com/

1. Crea un nuevo proyecto ASP.NET, escoge la plantilla MVC

2. Para agregar el Metro UI CSS a tu proyecto puedes usar la consola de NuGet así:
PM> Install-Package Metro.UI.CSS

En la fecha en que escribí este artículo, el paquete NuGet parece que no estaba funcionando. Si te pasa lo mismo, ir al menú herramientas, Library Package Manager y clic en «Manage NuGet Packages», busca «Metro UI CSS» y te saldrán dos opciones como se puede ver en las siguientes imágenes:

metro2.0.4

Versión 2.0.4 con fecha 12 de Abril del 2013.

metro2.0.12

Versión 2.0.12 con fecha 17 de Diciembre del 2013, esta versión es más actual. Prueba con esta versión y si no hace lo que esperas entonces en ese caso usa la versión 2.0.4 de la primera imagen.

3. Los cambios son:

Agrega una referencia a WebActivatorEx.

En la carpeta App_Start, agrega un nuevo archivo llamado «MetroUICSSBundleConfig.cs»

using System.Web.Optimization;

[assembly: WebActivatorEx.PostApplicationStartMethod(typeof(metrouicssPrueba.App_Start.MetroUICSSBundleConfig), "RegisterBundles")]

namespace metrouicssPrueba.App_Start
{
	public class MetroUICSSBundleConfig
	{
		public static void RegisterBundles()
		{
			// Add @Styles.Render("~/Content/metro-ui/css") in the <head/> of your _Layout.cshtml view
			// Add @Scripts.Render("~/bundles/metro-ui") after jQuery in your _Layout.cshtml view
			// When <compilation debug="true" />, ASP.Net will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
			BundleTable.Bundles.Add(new ScriptBundle("~/bundles/metro-ui").Include("~/Scripts/metro-ui/jquery.ui.widget.js").Include("~/Scripts/metro-ui/metro-*"));
			BundleTable.Bundles.Add(new StyleBundle("~/Content/metro-ui/css").Include("~/Content/metro-ui/css/metro-bootstrap.css", "~/Content/metro-ui/css/metro-bootstrap-responsive.css"));
		}
	}
}

En los comentarios indica los cambios que hay que hacerle al proyecto para poder usar el Metro UI CSS. Son 2 cambios al archivo «_layout.cshtml»: agregar la referencia a las hojas de estilo (CSS) y agregar la referencia a los scripts en JavaScript.

En la carpeta Content agrega una nueva carpeta llamada «metro-ui» y dentro de esa carpeta a su vez agrega 2 carpetas «css» y «fonts».

En la carpeta «css» se encuentran los siguientes archivos:

  • metro-bootstrap-responsive.css
  • metro-bootstrap.css

En la carpeta «fonts» se encuentran los siguientes archivos:

  • iconFont.dev.svg
  • iconFont.eot
  • iconFont.json
  • iconFont.svg
  • iconFont.ttf
  • iconFont.woff

En la carpeta «Scripts» agrega una carpeta llamada «metro-ui» con los siguientes archivos:

  • jquery.ui.widget.js
  • metro-accordion.js
  • metro-button-set.js
  • metro-calendar.js
  • metro-carousel.js
  • metro-core.js
  • metro-countdown.js
  • metro-date-format.js
  • metro-datepicker.js
  • metro-dialog.js
  • metro-drag-tile.js
  • metro-dropdown.js
  • metro-fluentmenu.js
  • metro-hint.js
  • metro-input-control.js
  • metro-listview.js
  • metro-live-tile.js
  • metro-notify.js
  • metro-plugin-template.js
  • metro-progressbar.js
  • metro-rating.js
  • metro-slider.js
  • metro-stepper.js
  • metro-streamer.js
  • metro-tab-control.js
  • metro-table.js
  • metro-times.js
  • metro-touch-handler.js
  • metro-treeview.js

4. En View/Shared/_Layout.cshtml agregar las referencias de CSS y JavaScript.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    @* Agregando los estilos *@
    @Styles.Render("~/Content/metro-ui/css")

</head>
<body class="metro">
    @*<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">*@

          @RenderBody()
        @*<hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>*@

    @Scripts.Render("~/bundles/jquery")

    @*Agregando los scripts*@
    @Scripts.Render("~/bundles/metro-ui")

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

5. Si queremos usar Metro UI CSS en la primera página del proyecto MVC hay que editar el archivo Views/Home/Index.cshtml

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

La otra forma de usar Metro UI CSS es hacerlo de la forma manual

metrouihowto

Como puedes ver en el sitio web de Metro UI CSS son 5 pasos para comenzar a usarlo.

El paso cero es descargar el Metro UI CSS es un archivo .ZIP de 16.7MB aquí https://github.com/olton/Metro-UI-CSS/archive/master.zip

1) Crea un nuevo proyecto ASP.NET y escoge la plantilla MVC.
2) Del archivo ZIP copia estos 2 archivos CSS a tu carpeta «Content» o «Contenido»

  • «metro-bootstrap-responsive.css» y
  • «metro-bootstrap.css»

3) En la carpeta «Scripts» crea una nueva carpeta llamada «Metro»

Nota: Copia los archivos que vas a usar solamente. Por ejemplo, si vas a usar el control acordeón agrega el archivo «metro-accordion.js»

Puedes copiar los siguientes archivos.

  • metro-accordion.js
  • metro-button-set.js
  • metro-calendar.js
  • metro-carousel.js
  • metro-core.js
  • metro-countdown.js
  • metro-date-format.js
  • metro-datepicker.js
  • metro-dialog.js
  • metro-drag-tile.js
  • metro-dropdown.js
  • metro-fluentmenu.js
  • metro-hint.js
  • metro-initiator.js
  • metro-input-control.js
  • metro-listview.js
  • metro-live-tile.js
  • metro-loader.js
  • metro-locale.js
  • metro-notify.js
  • metro-plugin-template.js
  • metro-progressbar.js
  • metro-rating.js
  • metro-scroll.js
  • metro-slider.js
  • metro-stepper.js
  • metro-streamer.js
  • metro-tab-control.js
  • metro-table.js
  • metro-times.js
  • metro-touch-handler.js
  • metro-treeview.js

4) En tu carpeta «Scripts» ya tienes jquery version 1.10.2, puedes usar la versión normal o la «minificada». Necesitas agregar del archivo .ZIP estos dos archivos “jquery.widget.min.js” y “metro.min.js”

5) Si vas a utilizar los íconos contenidos en las fuentes «fonts», agrégalos a la carpeta “Fonts” en tu proyecto, los archivos que necesitas son:

  • iconFont.eot
  • iconFont.svg
  • iconFont.ttf
  • iconFont.woff

6) En el código de ejemplo utilizo un imagen del archivo ZIP llamado “2.jpg”, pon ese archivo en la carpeta «Images» folder en tu proyecto.

7) Para probar el Metro UI CSS agrega un archivo HTML a la raíz de tu proyecto y llámalo «index.html», utiliza el siguiente código debería funcionar.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="Content/metro-bootstrap.css" rel="stylesheet" />
    <link href="Content/metro-bootstrap-responsive.css" rel="stylesheet" />

    <title>PROBANDO METRO UI CSS 2.0</title>
</head>
<body class="metro">

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

    <span class="label">Default</span>
    <h3>Table Bordered</h3>
    <div class="example">
        <table class="table bordered">
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
            <tr>
                <td>one</td>
                <td>two</td>
            </tr>
        </table>
    </div>
    <h3>Table Hovered</h3>
    <div class="example">
        <table class="table hovered">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
            </tr>
        </table>
    </div>
    <h3>Input Text and Password</h3>
    <div class="example">
        <label>User Name:</label>
        <div class="input-control text" data-role="input-control">
            <input type="text" placeholder="Type your user name" />
            <button class="btn-clear" tabindex="-1"></button>
        </div>
        <label>Password:</label>
        <div class="input-control password" data-role="input-control">
            <input type="password" placeholder="Type your password" autofocus />
            <button class="btn-reveal" tabindex="-1"></button>
        </div>
    </div>

    <h3>CheckBox and Radio buttons</h3>
    <div class="example">
        <div class="input-control checkbox" data-role="input-control">
            <label>
                <input type="checkbox" checked />
                <span class="check"></span>
                Check me please.
            </label>
        </div>
        <div>
            <div class="input-control radio default-style" data-role="input-control">
                <label>
                    <input type="radio" name="r1" checked />
                    <span class="check"></span>
                    R1
                </label>
            </div>
            <div class="input-control radio default-style" data-role="input-control">
                <label>
                    <input type="radio" name="r1" />
                    <span class="check"></span>
                    R2
                </label>
            </div>
        </div>
    </div>

    <h3>Select</h3>
    <div class="example">
        <form>
            <div class="input-control select" data-role="input-control" >
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <br />
            <div class="input-control select" data-role="input-control">
                <select multiple>
                    <option>Value 1</option>
                    <option>Value 2</option>
                    <option>Value 3</option>
                    <option>Value 4</option>
                </select>
            </div>
        </form>
    </div>
    <h3>Buttons</h3>
    <div class="example">
        <button>Button1</button>
        <button class="default">Button2</button>
        <button disabled="disabled">Button3</button>
        <a class="button">Button4</a>
    </div>

    <h2><i class="icon-accessibility on-left"></i>Switch control</h2>
    <div class="example">
        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" checked />
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" />
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" disabled />
                <span class="check"></span>
            </label>
        </div>

        <div class="input-control switch margin10" data-role="input-control">
            <label>
                Switch me
                <input type="checkbox" disabled checked />
                <span class="check"></span>
            </label>
        </div>
    </div>

    <div class="image-container shadow">
            <img src="../Images/2.jpg">
            <div class="overlay-fluid">Sample text</div>
    </div>

    <div class="example">
        <div class="rating large" data-static="false" data-score="3" data-stars="5" data-role="rating" data-show-score="true" data-score-hint="Rating: "></div>
        <div id="rating_1" class="fg-green"></div>
        <div class="rating small fg-red" data-static="false" data-score="3" data-stars="5" data-role="rating" data-show-score="true" data-score-hint="Value: "></div>
    </div>

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.widget.min.js"></script>
    <script src="Scripts/metro.min.js"></script>
    <script src="Scripts/Metro/metro-rating.js"></script>

    <script>
        $(function () {
            $("#rating_1").rating({
                static: false,
                score: 2,
                stars: 5,
                showHint: true,
                showScore: true,
                click: function (value, rating) {
                    //alert("Rating clicked with value " + value);
                    rating.rate(value);
                }
            });
        });
    </script>
</body>
</html>

El ejemplo utiliza el control «Rating» por eso agregué una referencia al archivo «metro-rating.js».

Si necesitas ayuda dentro del archivo ZIP hay un directorio «Docs» con ejemplos en HTML que puedes usar para aprender como usar Metro UI CSS.

Finalmente no olviden que puedes usar el sitio web de Metro UI CSS para ver más ejemplos. Utiliza el comando «Ver código fuente» de tu navegador para que veas como funciona.

¿Cómo usar Metro UI CSS en ASP.NET MVC 4? Versión 0.95

Metro UI CSS nos permite crear un sitio web con el estilo de Windows 8 rápidamente y sin distracciones. Puede escontrar más información aquí: http://metroui.org.ua/

Para usar Metro UI CSS en tu proyecto de ASP.NET MVC 4 haz lo siguiente:

Descarga el archivo «Metro-UI-CSS-master.zip» de https://github.com/olton/Metro-UI-CSS necesitas copiar algunos archivos de este zip a tu proyecto.

Copia los siguientes archivos:

1. En Visual Studio en tu directorio «Content» copia estos 2 archivos: modern.css y modern-responsive.css, el archivo theme-dark.css es necesario si planeas usar ese tema con tonos oscuros.

2. Dependiendo de que plantilla de proyecto hayas utilizado podrías o no tener la carpeta «Images», si no la tienes créala. Debes copiar estos archivos sólo si piensas utilizarlos. Copia a tu carpeta «Images» los archivos que están en el zip dentro de la carpeta «images»:

  • preloader-w8-cycle-black.gif
  • preloader-w8-cycle-white.gif
  • preloader-w8-line-black.gif
  • preloader-w8-line-white.gif

3. En tu carpeta «Scripts» copia los archivos que están en el zip dentro de la carpeta «javascript», una vez más sólo copia aquellos archivos que planees usar. Los archivos son:

  • accordion.js
  • buttonset.js
  • calendar.js
  • carousel.js
  • contextmenu.js
  • dialog.js
  • dropdown.js
  • input-control.js
  • pagecontrol.js
  • pagelist.js
  • rating.js
  • slider.js
  • start-menu.js
  • tile-drag.js
  • tile-slider.js

4. Crea una carpeta y ponle de nombre «less» y copia los archivos que están en el zip dentro de la carpeta «less». Cópialos si estás planeando usar «less» en tu servidor web.

5. Crea una carpeta y ponle de nombre «fonts» y del archivo zip copia los archivos que están en la carpeta «fonts»:

  • iconFont.eot
  • iconFont.svg
  • iconFont.ttf
  • iconFont.woff

Abre el archivo «modern.css» y haz un «buscar y reemplazar»

../fonts/iconFont

reemplázalo con

/fonts/iconFont

Esto es necesario para cargar los íconos correctamente. Por ejemplo: cuando uses cajas para marcar (checkboxes) la imagen para el «check o visto bueno» está dentro del archivo iconFont.*.

Hay 4 diferentes archivos de fuentes «font»

  • iconFont.eot
  • iconFont.svg
  • iconFont.ttf
  • iconFont.woff

En Visual Studio abre el archivo App_Start/BundleConfig.cs y agrega las siguientes líneas:

bundles.Add(new ScriptBundle("~/bundles/metro").Include(
    "~/Scripts/dialog.js",
    "~/Scripts/dropdown.js",
    "~/Scripts/accordion.js",
    "~/Scripts/buttonset.js",
    "~/Scripts/carousel.js",
    "~/Scripts/input-control.js",
    "~/Scripts/pagecontrol.js",
    "~/Scripts/pagelist.js",
    "~/Scripts/rating.js",
    "~/Scripts/slider.js",
    "~/Scripts/tile-slider.js",
    "~/Scripts/tile-drag.js",
    "~/Scripts/calendar.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/modern.css",
    "~/Content/modern-responsive.css",
    "~/Content/site.css"));

Pon bundles.Add(new ScriptBundle(«~/bundles/metro»)… después de los bundles de jQuery. Y el StyleBundle en la misma ubicación del previo StyleBundle, comenta o elimina el previo StyleBundle.

Completa el BundleConfig.cs:

using System.Web;
using System.Web.Optimization;

namespace MvcApplication3
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/metro").Include(
 "~/Scripts/dialog.js",
 "~/Scripts/dropdown.js",
 "~/Scripts/accordion.js",
 "~/Scripts/buttonset.js",
 "~/Scripts/carousel.js",
 "~/Scripts/input-control.js",
 "~/Scripts/pagecontrol.js",
 "~/Scripts/pagelist.js",
 "~/Scripts/rating.js",
 "~/Scripts/slider.js",
 "~/Scripts/tile-slider.js",
 "~/Scripts/tile-drag.js",
 "~/Scripts/calendar.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
 "~/Content/modern.css",
 "~/Content/modern-responsive.css",
 "~/Content/site.css"));

            //bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

Actualización: Como cmmaung commentó cuando agregas el bundle «start-menu.js»

//"~/Scripts/start-menu.js",

Obtendrás un error en el archivo «start-menu.js» línea 128 $(«body»).mousewheel… Este error sucede en Internet Explorer (probado en las versiones 10 y 11) pero funciona bien en Chrome and Firefox. He comentado esa línea y corre bien pero no lo he corregido aún. Puedes buscar en el siguiente enlance por más información: http://www.sitepoint.com/html5-javascript-mouse-wheel/

Finalmente en Visual Studio abre el archivo Views/Shared/_Layout.cshtml y

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body class="metrouicss">
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/metro")
    @RenderSection("scripts", required: false)
</body>
</html>

La clase «metrouicss» en la clase del body es requirido para empezar a utilizar Metro UI CSS.

Ejemplo en una vista llamada Index.cshtml

metrouicss

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<span class="label">Default</span>

<table class="hovered">
   <tr>
      <th>Header 1</th>
      <th>Header 2</th>
   </tr>
   <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
   </tr>
   <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
   </tr>
</table>

<label class="input-control checkbox">
    <input type="checkbox" />
    <span class="helper">Checkbox Caption</span>
</label>

   <label class="input-control radio">
        <input type="radio" />
        <span class="helper">CheckBox Caption</span>
    </label>

    <label class="input-control switch">
        <input type="checkbox" />
        <span class="helper">CheckBox Caption</span>
    </label>
<div class="input-control select">
   <select>
      <option>Option 1</option>
      <option>Option 2</option>
   </select>
</div>

<button>Button1</button>
    <button class="default">Button2</button>
    <button disabled="disabled">Button3</button>
    <a class="button">Button4</a>

<div class="image-collection">
    <div>
       <img alt="" src="~/Content/themes/base/images/2.jpg" />
       <div class="overlay">Sample text</div>
    </div>
</div>

    <div class="rating" data-role="rating">
    </div>

Hay un paquete NuGet pero requiere algunos cambios mencionados arriba. El paquete se llama RTL Metro UI CSS 0.95-a.

Para instalarlo, ejecuta el siguiente comando en la consola del Administrador de Paquetes

PM> Install-Package RTL-Metro-UI-CSS -Pre

El Metro UI CSS es gratis pero no olviden poner el enlace al sitio Metro UI CSS.

Ejemplo:
Estilo con <a href="http://metroui.org.ua">Metro UI CSS</a>

¿Qué tecnología de desarrollo de Microsoft utilizar?

Recientemente ha habido mucho movimiento en relación a las tecnologías para desarrollar de Microsoft, dejando a muchos desarrolladores ponderando en cuáles deberían enfocarse. La resistencia de Microsoft a dejar de lado tecnologías como Silverlight, y en vez de eso dejar que lentamente desaparezcan, sólo añade más confusión. Una manera de darse cuenta es revisar un documento poco conocido llamado Guía Tecnológica .NET para Aplicaciones de Negocios «.NET Technology Guide for Business Applications». Fue publicado a comienzos de este año, la guía ofrece una comprensión de en dónde Microsoft intenta poner sus esfuerzos y qué tecnologías deberían ser evitadas.

Este resumen es un buen lugar para comenzar la exploración de Microsoft y las tecnologías relacionadas.

microsofttecnologies

Tratar de dejar pronto Silverlight y Flash.

Mientras tecnologías antiguas .NET como WinForms y Web Forms han encontrado un lugar. Contenedores de RIA (Rich Internet Applications) tales como Silverlight y Flash están definitivamente de salida. Como se puede ver en la figura. Microsoft no quiere esperar los 10 años del ciclo de vida de Silverlight 5. Ellos intentan deshacerse de los contenedores RIA para finales del 2015.

changinguitecnologies

Para aplicaciones de alto nivel, tecnologías completamente nativas son las preferidas. En el nivel más bajo, las capacidades de HTML5 se espera que continuen creciendo. Mientras no se está empujando a los desarrolladores a ir a un lado o al otro, aquí es lo que ellos tienen que decir sobre la transicion:

  • Si estás haciendo la transición a aplicaciones nativas, puedes utilizar tus habilidades existentes y aún el código si apuntas a XAML/NET nativamente en cualquier dispositivo Windows. Las bibliotecas portátiles (Portable Libraries) permitirán compartir archivos binarios entre diferentes plataformas incluyendo Silverlight.
  • Para aplicaciones basadas en navegador HTML5, Microsoft provee herramientas líderes y marcos de desarrollo para ayudarte a crear aplicaciones para cualquier dispositivo usando los últimos estándares. La interoperatibidad de Silverlight con HTML también permite una transición gradual a través de aplicaciones híbridas.

Móviles

3 opciones iguales pero diferentes para la tienda Windows 8

En el pasado Microsoft ha sido reacio a empujar a los desarrolladores hacia una tecnología específica cuando se trata de aplicaciones tienda Windows 8. La política no ha cambiado, el criterio número uno para escoger entre .NET/XAML, C++ y JavaScript/HTML5 es simplemente con cual el desarrollador se encuentra más familiarizado. Más allá de eso, ellos citan las ventajas en rendimiento de C++. La reusabilidad no es una gran preocupación porque las 3 plataformas son capaces de compartir código y recursos entre Windows Phone y aplicaciones Windows de escritorio.

Opciones nativas para Windows Phone

En Windows Phone las tecnologías reocmendadas son .NET y C++. Otra vez aquí hay una aprobación de la ventaja en rendimiento de C++, pero mayormente ellos les dicen a los desarrolladores que usen lo que les sea más familiar.

Aunque Windows Phone es compatible con PhoneGap/Apache Cordova, eso no es mencionado en ningún lado. Presumiblemente esto se debe a que ven a PhoneGap como algo que tiene peor rendimiento que .NET o C++ en dispositivos pequeños. En la conferencia Build 2013 el rendimiento fue de lejos el tópico más importante, dejando atrás otras consideraciones como usabilidad general, diseño visual y profunda integración con el sistema operativo.

Web Móvil: Todo menos Web Forms

Si buscamos escoger una solución basada en web para trabajar en todos los dispositivos móviles las opciones son numerosas. ASP.NET MVC con Modernizer es la recomendación de referencia, con la opción de construir una aplicación de una sola página (ASP.NET SPA) donde sea apropiado. Microsoft considera SPA a ser nada más que un patrón de diseño que una tecnología, con Knockout y Breeze siendo las librerías más recomendadas.

Para poner rápidamente aplicaciones de estilo CRUD (Create Read Update and Delete) LightSwitch está en la mesa. Esto ofrece poco control sobre el HTML producido pero no requiere el sobrecosto de que los desarrolladores tengan que construir sus propios diseños para varios tamaños de pantalla.

ASP.NET Web Pages son la cuarta opción ofrecida para web móvil. Basado en la sintáxis Razor esto ofrece una experiencia de desarrollo similar a los lenguages de script tales como PHP y el clásico ASP.

Lo que no se menciona es la vieja tecnología ASP.NET Web Forms. Mientra está aún en desarrollo activo y teoricamente capaz de crear HTML específico para un dispositvo, en la práctica Web Forms no llegó a realizar su máximo potencial. El HTML y JavaScript que genera tiende a ser ineficiente y el «View State», el cual es parte integral para sus características más avanzadas puede rápidamente sobrecargar una conexión de red de un teléfono.

Servicios.

Desde que la mayoría de aplicaciones dependen de un almacenamiento de datos externo y procesamiento, el desarrollo del lado del servidor continua siendo una consideración importante. Hay actualmente 6 opciones de tecnologías que Microsoft considera viables.

Primera Elección: ASP.NET Web API

De acuerdo a Microsoft, la opción por defecto para nuevos proyectos debería ser ASP.NET Web API. Esto puede ser utilizado cuando los servicios que se van a desarrollar siguen los patrones REST (Representational State Transfer) y se supone que sea compatible con caches de internet como Akamai, Windows Azure CND, Level3, etc.

Cuando se utilice Web API los desarrolladores deben enfocarse en OData, lo cual estandariza la manera en que los extremos REST (REST endpoints) son expuestos y JSON.

Segunda Elección: WCF

Si no estás amarrado a ningún protocolo de transporte específico o formato de mensaje, WCF se le considera una opción más flexible que Web API. Tú puedes, por ejemplo, tomar ventaja de TCP o named pipes con mensajes binarios para un rendimiento mejorado. El lado malo es que trabajar con WCF puede ser difícil especialmente cuando quieres exponer datos en JSON u otro formato que no está basado en SOAP (Simple Object Access Protocol). WCF fue diseñado como un mecanismo de comunicación tipo RPC (Remote Procedure Call) y empresarial. Mientras un patrón de diseño tipo REST es posible, WCF no es la opción preferida.

WCF con OData

Si estás trabajando en una capa de servicio estilo CRUD y quieres utilizar WCF entonces WCF Servicios de datos es la manera. Esto comparte librerías OData con ASP.NET Web API y es a menudo utilizado con Entity Framework.

Servicios de Flujos de Trabajo (Workflow)

Los servicios workflow son un matrimonio entre Windows Workflow y WCF. La única razón para utilizar esto es si tus servicios ya están utilizando Windows Workflow internamente. Microsoft no cita ninguna otra razón para escoger esta opción.

SignalR y Comunicación de 2 vías.

Si estás usando solamente clientes basados en .NET, WCF ofrece muchas opciones para afinar la comunicación de 2 vías. Si quieres algo que soporte ambos .NET y clientes basados en web entonces SignalR es una opción tentadora.

De acuerdo con Microsoft, SignarlR puede escalar a «millones de usuarios». Para clientes web SignalR utiliza WebSockets pero puede automáticamente hacer una regresión a viejos patrones como «long polling» (consulta larga) si es necesario.

SignalR también tiene un librería para clientes .NET, permitiendo que clientes web y clientes nativos compartan servicios.

LightSwitch, otro proveedor de OData

Es difícil indicar cuánto amor tiene Microsoft para OData. Acabamos de ver OData para ambos WCF y Web API, pero no termina allí. Aunque normalmente utilizado con clientes LightSwitch, podrías imaginar utilizar las capacidades del lado del servidor de LightSwitch para rápidamente generar una capa de servicio.

Microsoft asegura que LightSwitch no requiere codificación pero advierte que eso viene con una pérdida de flexibilidad.

Guía para aplicaciones de negocios pequeñas y medianas.

Microsoft escribió esta guía con estas metas en mente:

  • Velocidad completa y «Tiempo a Mercado» más corto.
  • Productividad y menores costos.
  • Fácil para comenzar.
  • Colaboración e integración con productos del mercado.
  • Agilidad en la nube y oportunidades para reducción de costos.

Traducido esto significa, «hazlo rápido y hazlo barato».

Aplicaciones Web para negocios pequeños/medianos

Para aplicaciones CRUD rápidas, Microsoft continúa empujando LightSwitch como la plataforma que hay que usar. Fue originalmente descrita como una herramienta para programadores principiantes. Muchos lo ven como un reemplazo de Acces multi-capas. Esa visión parece desvanecerse ya que LightSwitch está ahora siendo ofrecido más como una herramienta para departamentos de IT que necesitan rápidamente crear aplicaciones.

Lo siguiente es Web Forms. Sí, la venerable tecnología Web Forms está aún siendo recomendada para usar en nuevos proyectos. Microsoft lo ve como un terreno intermedio entre el fácil pero limitado LightSwitch y la complejidad de ASP.NET MVC. Con características tales como grillas ricas de datos. Web Forms son bien apropiadas para aplicaciones internas de una organización.

ASP.NET Web Pages son mencionadas pero brevemente. Si quieres más control sobre lo que ofrece Web Forms, ASP.NET MVC es la herramienta elegida. Aunque Microsoft advierte de su larga curva de aprendizaje.

Construyendo para el escritorio de Windows

Mientras todos los kits de herramientas basados en C++ como MFC (Microsoft Foundation Classes) y ATL/WTL (Active Template Libraty/Windows Template Library) están fuera de la lista, el original kit de herramientas .NET WinForms es aún considerado una opción viable junto con WPF (Windows Presentation Foundation). Ambos soportan conceptos modernos tales como enlace de datos (data binding), async/await y comunicación de dos vías usando WCF o SignalR

La elección entre WPF y WinForms involucra muchas consideraciones.

Primero es la dificultad. WinForms es mucho más fácil de entender que WPF, aún para desarrolladores avanzados. WinForms utiliza un simple enlace de datos y prefiere un clásico MVC o MVP. WPF por el contrario requiere que el usuario aprenda un complejo marco de enlace de datos para correctamente utilizar el patrón MVVP. Tener éxito con WPF también requiere conocimiento de diccionarios de recursos, convertidores, ICommands y XAML.

Si intentas también apuntar a Windows Phone o tienda Windows 8, vas a tener que aprender como usar XAML. En ese caso, comenzar con WPF hará más probable que se pueda compartir código entre plataformas.

La flexible máquina de visualización en WPF permite hacer aplicaciones que se ven mejor de lo que podría ser hecho generalmente con WinForms. Este tiene un costo ya que generalmente las aplicaciones WPF se ejecutan más lentamente que aplicaciones WinForms comparables.

Mencionado de pasada es el cliente de escritorio LightSwitch. Presumiblemente, éste no puede ofrecer nada que no esté disponible en su cliente web, por lo tanto no parece haber mucha razón para escogerlo.

Cliente-Servidor debería ser evitado.

Cuando Microsoft dice «cliente-servidor» ellos específicamente se refieren a aplicaciones que directamente se comunican con la base de datos. Aunque ellos saben que es aún un patrón muy común, ellos quieren que los nuevos proyectos utilicen un diseño de 3-capas con una capa de servicio que se encuentre en el medio, entre el cliente y la base de datos. Esto provee una mejor escalabilidad sobre el acceso directo a la base de datos y una manera para sobrepasar firewalls (corta-fuegos) y otros obstáculos. Además permite que la aplicación sea migrada a otras plataformas donde los controladores de la base de datos podrían simplemente no estar disponibles.

«Modernización» – Dejando el escritorio de Windows

Microsoft ofrece muchos consejos sobre como «modernizar» aplicaciones de escritorio. Este consejo es mayormente sobre alistar la aplicación para ser migrada a otras plataformas pero hay algunas guías que son útiles aunque no planees en dejar el escritorio de Windows. Aquí un resumen:

  • Utiliza el patrón de diseño Model-View-ViewModel (MVVM). Plataformas de cliente de Microsoft (incluyendo WPF) hacen fácil construir aplicaciones utilizando el patrón MVVM. Con este patrón tienes una fuerte separación de visualización, estado y comportamiento, lo cual te ayudará a crear un código limpio y mantenible que puede ser fácilmente compartido entre múltiples dispositivos.
  • Utiliza librerías de clases portátiles para la lógica del cliente. Las librerías portátiles .NET permiten que los binarios sean compartidos entre múltiples plataformas tales como el escritorio, aplicaciones tienda Windows, aplicaciones de Windows Phone y otros, implementando tu lógica del cliente con librerías portátiles .NET grandemente simplificará la creación de múltiples experiencias en múltiples plataformas.
  • Moderniza tu experiencia de usuario. Conceptos que demandan usuarios de hoy pueden ser implementados con las últimas innovaciones en .NET para el escritorio. Principios de diseño tales como «rápido y fluido», «auténticamente digital» y «haz más con menos» pueden ser aplicados para tus aplicaciones de escritorio existentes empleando una interfáz de usuario moderna para el diseño XAML, utilizando cuidadosamente animaciones e implementando .NET programación asíncrona extensivamente.
  • Mueve la lógica del negocio al servidor. Aplicaciones de 2-capas (cliente/servidor) son significativamente difíciles de extender a nuevos dispositivos. La forma recomendada es separar claramente la lógica del negocio en servicios que pueden ser reutilizados posteriormente en otros dispositivos y plataformas.
  • Extiende a la nube. Una vez separado del cliente, Windows Azure provee múltiples soluciones para mover la lógica del negocio a la nube. Transformando esa lógica en servicios de nube mejora grandemente la elasticidad y escalabilidad de soluciones existentes, alistándolas para abrazar múltiples dispositivos.

.NET en Android e iOS

Microsoft está trabajando con muchos socios para ayudar en el esfuerzo de modernización. Aquí es lo que ello tienen que decir:

  • Xamarin provee maneras de compartir código C# de tus aplicaciones que apuntan a Windows o Windows Phone con dispositivos iOS y Android. Provee acceso a la API para crear vistas personalizadas mientras reutilizando el código de lógica del cliente entre dispositivos.
  • ITR-Mobility iFactr y MonoCross ofrecen una solución para construir aplicaciones móviles empresariales en C# para entrega en la mayor parte de plataformas móviles. Provee servicios tales como Abstract UI y Enterprise Data Synchronization para permitir aplicaciones de negocios cruzando un rango de dispositivos.
  • Mobilize.NET por Art in Soft provee soluciones y servicios para migrar aplicaciones de legado a plataformas modernas incluyendo la web, móvil y la nube, lo hace transformando el código existente en código nuevo sin «runtimes» para la aplicación generada
  • Citrix Mobile SDK para aplicaciones Windows provee un rico kit de herramientas para desarrolladores, permite movilizar aplicaciones Windows línea de negocio (LOB) o escribir nuevas aplicaciones táctiles ejecutándose en servidores centrales (Citrix XenApp/XenDesktop) y accedidas desde cualquier dispositivo móvil como Citrix Receiver

Nota: El hecho de que Microsoft está activamente promoviendo Xamarin y MonoCross debería finalmente poner a descanzar los rumores de que Microsoft intenta hacer una demanda legal a los creadores de Mono.}

Guía para aplicaciones de negocios grandes, de misión crítica.

Cuando se trata de grandes compañías y sus aplicaciones de misión crítica el enfoque cambia de costo y productividad a administración de complejidad y calidad de servicio. Estas guías no se refieren a aplicaciones CRUD u orientadas a datos, los desarrolladores trabajando en esas deberían utilizar la guía para negocios pequeños/medianos. Estas guías son para sistemas con muchas partes interconectadas y sub-sistemas con variadas cantidades de independencia.

Aplicaciones Web en la empresa.

Microsoft es inequívoco sobre este punto, para sitios web de misión crítica deberías utilizar ASP.NET MVC. La única cuestión de arquitectura es si es que va a tener una capa de patrones de diseño aplicación de una sola página (SPA) encima.

Otras tecnologías web tales como Web Forms o Web Pages no deberían ser utilizadas. Simplemente no ofrece el control y testeabilidad que tiene MVC, lo cual además limita la calidad de servicio que puede ser obtenida.

Aplicaciones de Escritorio en la Empresa

Como con aplicaciones pequeñas, Microsoft está incluyendo WPF y WinForms en su lista de recomendados. A esto ellos agregan C++ con Win32 o MFC. El uso de C++ es recomendado para proyectos muy grandes, a largo plazo comparables en escala a Microsoft Office. Uno presume que ellos están pensando sobre la diferencia entre AutoCAD y Paint.NET en términos de escala.

Tienda Windows/Windows Phone en la empresa

Rudamente las últimas 20 páginas de la guía, Microsoft pone a parte la discusión de productos y gira su atención a patrones y prácticas.

Inversión de Control.

Microsoft gasta una sorprendente cantidad de tiempo discutiendo inyección de dependencias y contenedores de inversión de control. Ellos listan 9 separados contenedores de inversión de control, la mayoría de los cuales son proyectos administrados por la comunidad sin afiliación con Microsoft. Debe tener en cuenta que muchos de los marcos de desarrollo que están en la lista no son actualmente contenedores IoC (inversión de control) en vez de marcos de injección de dependencia.

La confusión entre los dos continúa toda la sección sin una clara indicación si Microsoft prefiere raíces compuestas (un patrón DI «dependency inyection») o ubicador de servicios (un patrón contenedor IoC «inversion of control»). Ellos dicen SRP (Single Responsibility Principle) puede resultar en clases que podrían, por ejemplo, tener 15 dependencias listadas en su constructor. Para desconectar estas dependencias ellos sugieren que sean removidas del constructor y en vez de eso sean inyectadas usando un contenedor de inversión de control.

Microsoft también menciona utilizar programación orientada a aspecto (Aspect Oriented Programming) que agregue otra capa de indirección y poder inyectar dependencias.

Bounded Context y Administración de Complejidad

Para controlar la complejidad, Microsoft gasta unas cuantas páginas discutiendo el concepto de un «bounded context». Está basado en el trabajo de Eric Evans, la idea básica es aislar las aplicaciones en pequeñas partes que compartan de manera limitada. En el ejemplo de abajo hay 4 pilas separadas con diferentes back ends y un interfáz de usuario común.

largecomposite

Su recomendación en esta área tiene mucho sentido. Para «bounded contexts» que identifiques como misión crítica puedes usar el más patrón más caro «Command and Query Responsability Separation» (CQRS) o Domain Driven Design (DDD) con pruebas totalmente automatizadas. Mientras «bounded contexts» auxiliares puede utilizar una arquitectura CRUD ligera. Código de legado obtendrá su propio silo donde puede ser aislado y lentamente reemplazado.

Comunicación y Anti-corrupción.

Para compartir información entre «bounded contexts» Microsoft recomienda utilizar mensajería asíncrona donde sea posible. Esto permite que cada silo trabaje de manera independiente aún cuando otros silos fallan. Para escenarios simples, named pipes y Microsoft Message Queues son opciones fáciles mientras para sistemas complejos se necesita un bus de servicio. Microsoft menciona el Windows Server Service Bus, Windows Azure Service Bus y NServiceBus sin ninguna preferencia.

Cualquier servicio expuesto por un «bounded context» debería ser protegido por una capa anti-corrupción. Parecido a como el chequeo de parámetros protege funciones públicas, una capa anti-corrupción de un «bounded context» protege la data interna de mensajes malformados. Esta capa verifica los mensajes entrantes, ejecuta traducciones necesarias y asgura que los datos malos no sean procesados y almacenados. Esto puede hacerse utilizando código normal .NET pero para escenarios complejos con muchas reglas de negocios cambiantes, Microsoft recomienda una máquina de reglas y plataforma de integración tal como BizTalk.

Mitigando Código de Legado.

El primer paso para tratar con código legado es crear una fachada (facade) sobre él. Esta fachada debería utilizar técnicas modernas tales como caches persistentes, escalables y ocultar patrones que el código antiguo utilice. Con el tiempo el código legado será reemplazado y las fachadas redirigidas a la nuevas capas de servicio.

Conclusiones.

Microsoft está respaldando todo lo que sea nativo, web y marcos de comunicación para .NET excepto Silverlight en el navegador y .NET Remoting. Ellos también recomiendan C++ y JavaScript en varios escenarios. Viejas plataformas tales como VB 6 y clásico ASP ya no son mencionados para que las compañías que todavía los utilicen migren a nuevas tecnologías tan pronto como sea posible.

Esperen ver un continuado énfasis en inyección de dependencia, especialmente con ASP.NET MVC y Entity Framework. BizTalk del que se pensó que era una tecnología muerta, está viendo nueva vida con las compañías que tratan de integrar arquitecturas en sus instalaciones y en la nube.

Para leer el artículo original de Jonathan Allen ir a http://www.infoq.com/articles/Microsoft-Stack-2013?utm_source=infoq&utm_medium=popular_links_homepage

ASP.NET MVC Entrevista: Preguntas y Respuestas.

Para leer el artículo original en inglés de Shivprasad koirala. http://www.codeproject.com/Articles/556995/MVC-Interview-questions-with-answers

Descargo de Responsabilidad (Disclaimer)

Leyendo esto no significa que podrás pasar entrevistas sobre MVC. El propósito de este artículo es pulir rápidamente tu conocimiento de MVC (Model View Controller) antes de una entrevista sobre MVC.

Este artículo no enseña MVC, es una hoja de revisión de último minuto antes de ir a una entrevista sobre MVC.

En caso que quieran aprender MVC de cero empiecen leyendo: http://www.codeproject.com/Articles/207797/Learn-MVC-Model-View-Controller-step-by-step-in-7 O pueden empezar con: https://www.youtube.com/playlist?list=PL33C9E91F8CDD2BF7

¿Qué es MVC (Model-View-Controller) Modelo-Vista-Controlador?

MVC es un patrón de arquitectura el cual separa la representación y la interacción del usuario. Está divido en 3 secciones. «Modelo», «Vista», «Controlador».

  • La «Vista» es responsible por la apariencia «look and feel».
  • El «Modelo» representa un objeto del mundo real y provee de data para la «vista».
  • El «Controller» es responsable de tomar la petición del usuario y cargar el «modelo»  y la «vista» apropiados.

mvc

¿Puedes explicar el flujo completo de MVC?

A continuación los pasos de como el control fluye en la arquitectura MVC (Modelo, Vista y Controlador).

  • Toda petición (request) del usuario final es primero enviada al controlador.
  • El controlador dependiendo de la petición decide cual modelo cargar. El controlador carga el modelo y enlaza el modelo con la vista apropiada.
  • La vista final es luego enlazada con la data del modelo y enviada como una respuesta al usuario final en el navegador (browser).

¿Es MVC apropiado para aplicaciones web y windows ambas?

La arquitectura de MVC es más apropiada para aplicaciones web que windows. Para aplicaciones windows MVP por ejemplo «Modelo-Vista-Presentador» es más aplicable. Si estás usando WPF (Windows Presentation Foundation) o SilverLight MVVM (Modelo-Vista-ModeloVista) es más apropiado debido a los enlaces de datos (bindings)

¿Cuáles son los beneficios de usar MVC?

Hay dos grandes beneficios de MVC:

Separación de problemas (concerns) esto se logra ya que se mueve el código detrás (code behind) a un archivo de clase separado. Ya que se mueve el código de enlace (binding) a un archivo de clase separado podemos reutilizar el código en gran parte.

Testeo Automatizado de la UI (interfaz de usuario), es posible porque ahora el código detrás (code behind) el código de interacción de la UI ha sido movido a una simple clase .NET. Esto nos da la oportunidad de escribir pruebas unitarias y automatizar las pruebas manuales.

¿Es MVC diferente de la arquitectura de 3 capas?

MVC es una evolución de la arquitectura tradicional de 3 capas. Muchos componentes de la arquitectura de 3 capas son parte de MVC.

Functionalidad 3 capas MVC
Apariencia Interfaz de usuario. Vista
UI lógica Interfaz de usuario. Controlador
Lógica del negocio /validaciones Capa Intermedia Modelo
La petición se envía primero a User interface Controlador
Accediendo datos Capa de acceso a datos Capa de acceso a datos

mvc3capas

¿Cuál es la última versión de MVC?

Hasta la fecha hay 5 versiones de MVC. MVC 1, MVC 2, MVC 3, MVC 4 y MVC 5. El último es MVC 5.

¿Cuál es la diferencia entre cada versión de MVC?

En una entrevista es difícil hablar de todas ellas debido a la limitación de tiempo. He resaltado las principales diferencias.

MVC 2

Asistentes con plantilla (Templated Helpers) Areas Controladores Asíncronos

MVC 3

Razor Soporte para HTML5 en las plantillas de proyectos

MVC 4

ASP.NET Web API Nuevas características para soportar aplicaciones móviles

MVC 5

ASP.NET Identity Bootstrap en la plantilla MVC Filtros de autenticación Omisión de filtros (filter override)

¿Qué es ruteo en MVC?

El ruteo ayuda a definir una estructura de URL y mapear la URL con el controlador.

Por ejemplo digamos que queremos que cuando un usuario tipee «http://localhost/view/ViewCustomer/», vaya al controlador «customer» e invoque la acción «DisplayCustomer». Esto es definido agregando una entrada en la colección «routes» usando la función «maproute». Ejemplo:

routes.MapRoute(
               "View", // Route name
               "View/ViewCustomer/{id}", // URL with parameters
               new { controller = "Customer", action = "DisplayCustomer",
id = UrlParameter.Optional }); // Parameter defaults

¿Dónde se tiene que escribir el código de mapeo de rutas?

En el archivo «global.asax».

¿Se puede mapear múltiples URLs a la misma acción?

Sí. Sólo necesitas hacer dos entradas con diferentes nombres clave y especificar el mismo controlador y acción.

¿Cómo podemos navegar de una vista a otra vista usando un hiperenlace?

Utilizando el método «ActionLink» como se muestra en el siguiente código. Ese código crea una simple URL la cual navegará al controlador «Home» e invocará la acción «Gotohome».

<%= Html.ActionLink("Home","Gotohome") %>

¿Cómo puedes restringir las acciones MVC para que sean invocadas solamente por un GET o POST?

Puedes decorar la acción MVC con un atributo «HttpGet» o «HttpPost» para restringir el tipo de llamada HTTP. Por ejemplo puedes ver en el siguiente código la acción «DisplayCustomer» puede ser solamente invocado por «HttpGet». Si tratamos de hacer un HTTP post en «DisplayCustomer» arrojará un error.

[HttpGet]
public ViewResult DisplayCustomer(int id)
{
   Customer objCustomer = Customers[id];
   return View("DisplayCustomer",objCustomer);
}

¿Cómo podemos mantener la sesión en MVC?

Las sesiones pueden ser mantenidas en MVC de 3 maneras: tempdata, viewdata y viewbag.

¿Cuál es la diferencia entre tempdata, viewdata y viewbag?

sesionvariables

tempdata: Ayuda a mantener data cuando te mueves de un controlador a otro controlador o desde una acción a otra acción. En otras palabras cuando redireccionas, «tempdata» ayuda a mantener data entre esas redirecciones. Internamente utiliza variables de sesión.
View data: Ayuda a mantener data cuando te mueves de un controlador a una vista.
View bag: Es una envoltura dinámica alrededor de la data de la vista. Cuando utilizas «ViewBag» no es necesario hacer una conversión de tipo. Utiliza la palabra reservada «dynamic» internamente.

dynamickeyword

Variables de Sesión: Utilizando variables de sesión podemos mantener data de cualquier entidad a cualquier entidad.

Campos ocultos en controles HTML (hidden fields): Ayuda a mantener data de la UI hacia el controlador solamente. Se puede enviar data desde controles HTML o campos ocultos hacia el controlador usando métodos HTTP POST o GET.

Abajo hay una tabla que muestra la diferencia entre estos mecanismos de persistencia.

Maintains data between ViewData/ViewBag TempData Hidden fields Session
Controller to Controller No Yes No Yes
Controller to View Yes No No Yes
View to Controller No No Yes Yes

¿Qué son vistas parciales en MVC?

Vistas parciales es una vista reusable (como un control de usuario) las cuales pueden ser puestas dentro de otras vistas. Por ejemplo digamos que todas las páginas de tu sitio tiene una estructura estándar con un menú a la izquierda, cabecera y pie de página como se muestra en la siguiente imagen.

vistasparciales

Para cada página tu necesitarías reutilizar el menú izquierdo, la cabecera y el pie de página. Puedes crear vistas parciales para cada uno de esos items y luego llamar a la vista parcial en la vista principal.

¿Cómo crear vistas parciales?

Cuando agregas una vista a tu proyecto necesitas marcar el check «Create Partial View».

Una vez creada la vista parcial puedes llamarla desde la vista principal utilizando el método «Html.RenderPartial» así:

<body>
<div>
<% Html.RenderPartial("MyView"); %>
</div>
</body>

¿Cómo podemos hacer validaciones en MVC?

Una de las maneras más fáciles de hacer validación en MVC es usar «data annotations». Data Annotations son atributos los cuales son aplicados en las propiedades del modelo. Por ejemplo en el siguiente código tenemos una simple clase cliente «customer» con una propiedad «customercode».

Esta propiedad «customercode» está etiquetada con un atributo de data annotation «Required» (requerido). En otras palabras si este modelo no recibe un «customercode» no será válido.

public class Customer
{
   [Required(ErrorMessage="Customer code is required")]
   public string CustomerCode { get; set; }
}

Para poder mostrar un error de validación necesitamos usar un método «ValidateMessageFor» el cual pertenece a la clase de apoyo «Html».

<% using (Html.BeginForm("PostCustomer", "Home", FormMethod.Post))
{ %>
<%=Html.TextBoxFor(m => m.CustomerCode)%>
<%=Html.ValidationMessageFor(m => m.CustomerCode)%>
<input type="submit" value="Submit customer data" />
<%}%>

Posteriormente en el controlador podemos chequear si el modelo está correcto o no utilizado la propiedad «ModelState.IsValid» y de acuerdo a eso tomar acciones.

public ActionResult PostCustomer(Customer obj)
{
   if (ModelState.IsValid)
   {
      obj.Save();
      return View("Thanks");
   }
   else
   {
      return View("Customer");
   }
}

Abajo se muestra un simple mensaje de error:

validation

¿Podemos mostrar todos los errores en una sola pasada?

Sí podemos, utilizando el método «ValidationSummary» de la clase HTML helper.

<%= Html.ValidationSummary() %>

¿Cuáles son los otros atributos para validación con Data Annotations en MVC?

Si quieres validar la longitud de una cadena, puedes utilizar «StringLength»

[StringLength(160)]
public string FirstName { get; set; }

En caso que quieras utilizar una expresión regular (regular expression)

[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]
public string Email { get; set; }

Si quieres validar un rango de números, utiliza el atributo «Range»

[Range(10,25)]
public int Age { get; set; }

En algún momento querrás comparar el valor de un campo con el de otro campo, puede usar el atributo «Compare»

public string Password { get; set; }
[Compare("Password")]
public string ConfirmPass { get; set; }

En caso que quieras obtener un mensaje de error particular, puedes usar la colección «Errors».

var ErrMessage = ModelState["Email"].Errors[0].ErrorMessage;

Si has creado el objeto modelo tú mismo, puedes explícitamente llamar «TryUpdateModel» en tu controlador para chequear si el objeto es válido o no.

TryUpdateModel(NewCustomer);

En caso que quieras agregar errores en el controlador puedes utilizar la función «AddModelError».

ModelState.AddModelError("FirstName", "This is my server-side error");

¿Cómo podemos habilitar validación de Data Annotations en el lado del cliente?

Es un proceso de 2 pasos, primero referencia los necesarios archivos jQuery.

<script src="<%= Url.Content("~/Scripts/jquery-1.5.1.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.unobtrusive.js") %>" type="text/javascript"></script>

El segundo paso es llamar al método «EnableClientValidation»

<% Html.EnableClientValidation(); %>

¿Qué es Razor en MVC?

Es una máquina de vistas de peso ligero. Anteriormente sólo se podía utilizar un tipo de máquina de vistas ASPX. Razor fue introducido en MVC 3.

¿Por qué Razor cuando ya teníamos ASPX?

Razor es limpio, liviano y su sintáxis es fácil comparado con ASPX. Por ejemplo en ASPX para mostrar la hora teníamos que escribir:

<%=DateTime.Now%>

In Razor:

@DateTime.Now

¿Entonces cuál es mejor Razor o ASPX?

Según Microsoft Razor es el método preferido porque es liviano y tiene una sintáxis simple.

¿Cómo puedes hacer autenticación y autorización en MVC?

Puedes utilizar autenticación Windows o autenticación de formularios.

¿Como puedes implementar autenticación de Windows en MVC?

Para autenticación de windows necesitas modificar el archivo «web.config» y establecer el mode de autenticación a windows.

<authentication mode="Windows"/>
<authorization>
<deny users="?"/>
</authorization>

Luego en el controlador o en la acción puede utilizar el atributo «Authorize» el cual especifica cuáles usuarios tiene acceso a estos controladores y acciones. Abajo se muestra el código. Ahora solamente usuarios especificados enel controlador y la acción pueden acceder.

[Authorize(Users= @"WIN-3LI600MWLQN\Administrator")]
    public class StartController : Controller
    {
        //
        // GET: /Start/
        [Authorize(Users = @"WIN-3LI600MWLQN\Administrator")]
        public ActionResult Index()
        {
            return View("MyView");
        }
    }

¿Cómo implementas autenticación por formularios en MVC?

Autenticación por formularios es implementado en la misma forma en la que se hace en ASP.NET. El primer paso es establecer el modo de autenticación a formularios. El «loginurl» apunta al controlador en vez de a la página.

<authentication mode="Forms">
<forms loginUrl="~/Home/Login"  timeout="2880"/>
</authentication>

Necesitamos crear un controlador donde revisaremos si el usuario es válido o no. Si el usuario es válido estableceremos un valor en una galletita (cookie).

public ActionResult Login()
{
  if ((Request.Form["txtUserName"] == "Shiv") && (Request.Form["txtPassword"] == "Shiv@123"))
  {
     FormsAuthentication.SetAuthCookie("Shiv",true);
     return View("About");
  }
  else
  {
     return View("Index");
  }
}

Todas las otras acciones necesitan tener el atributo «Authorize» para que cualquier usuario no autorizado que haga una llamada a estos controladores sea redireccionado al controlador (en este caso el controlador es «login») el cual hará la autenticación.

[Authorize]
PublicActionResult Default()
{
  return View();
}
[Authorize]
publicActionResult About()
{
  return View();
}

¿Cómo implementar Ajax en MVC?

Puedes implementar Ajax de dos maneras en MVC:

  • Bibliotecas Ajax (libraries)
  •  jQuery

Abajo hay un simple ejemplo de como implementar Ajax utilizando la biblioteca «Ajax» helper. En el código de abajo puedes ver que tenemos un simple formulario el cual es creado utilizando la sintáxis «Ajax.BeginForm». Este formulario llama a una acción en un controlador llamada «getCustomer». Ahora la accion enviar «submit» ejecutará una llamada Ajax asíncrona.

<script language="javascript">
function OnSuccess(data1)
{
// Do something here
}
</script>
<div>
<%
        var AjaxOpt = new AjaxOptions{OnSuccess="OnSuccess"};
    %>
<% using (Ajax.BeginForm("getCustomer","MyAjax",AjaxOpt)) { %>
<input id="txtCustomerCode" type="text" /><br />
<input id="txtCustomerName" type="text" /><br />
<input id="Submit2" type="submit" value="submit"/></div>
<%} %>

En caso quieras hacer llamadas Ajax en clics sobre hiperenlaces puedes utilizar la función «Ajax.ActionLink» como se muestra en el siguiente código.

ajax

 Si quieres crear un enlace Ajax asíncrono de nombre «GetDate» el cual llama la función «GetDate» en el controlador, el código se encuentra debajo. Una vez que el controlador responda esta data es mostrada en la etiqueta html «Div» que tiene el nombre «DateDiv».

<span id="DateDiv" />
<%:
Ajax.ActionLink("Get Date","GetDate",
new AjaxOptions {UpdateTargetId = "DateDiv" })
%>

A continuación el código que va en el controlador. Como puedes ver la funcion «GetDate» tiene una pausa de 10 segundos.

public class Default1Controller : Controller
{
       public string GetDate()
       {
           Thread.Sleep(10000);
           return DateTime.Now.ToString();
       }
}

La segunda manera de hacer llamadas Ajax en MVC es utilizando jQuery. En el ejemplo que sigue podemos ver que estamos haciendo una llamada POST a una URL «/MyAjax/getCustomer». Esto es hecho usando «$.post». Toda esta lógica se encuentra en una función llamada «GetData» y puedes hacer una llamada a la función «GetData» en un botón o un evento clic en un hiperenlace como quieras.

function GetData()
    {
        var url = "/MyAjax/getCustomer";
        $.post(url, function (data)
        {
            $("#txtCustomerCode").val(data.CustomerCode);
            $("#txtCustomerName").val(data.CustomerName);
        }
        )
    }

¿Qué clase de eventos pueden ser registrados en Ajax?

ajaxevents

¿Cuál es la diferencia entre «ActionResult» y «ViewResult»?

«ActionResult» es una clase abstracta mientras que «ViewResult» deriva de la clase «ActionResult». «ActionResult» tiene muchas clases derivadas como «ViewResult», «JsonResult», «FileStreamResult», etc.

«ActionResult» puede ser utilizada explotando polimorfismo y dinamismo. Si estas devolviendo diferentes tipos de vistas dinamicamente «ActionResult» es lo mejor. Por ejemplo en el código que sigue puedes ver que tenemos una simple acción llamada «DynamicView». Dependiendo de la bandera «IsHtmlView» devolverá un «ViewResult» o un «JsonResult».

public ActionResult DynamicView()
{
   if (IsHtmlView)
     return View(); // returns simple ViewResult
   else
     return Json(); // returns JsonResult view
}

¿Cuáles son los diferentes tipos de resultados en MVC?

Nota: Es difícil recordar todos los tipos. Los más importantes son «ActionResult», «ViewResult» y «JsonResult»

En la cima se encuentra «ActionResult» es cual es la clase base que puede tener 11 subtipos:

ViewResult – Muestra la vista especificada a la corriente (stream response) de respuesta
PartialViewResult – Muestra la especificada vista parcial a la corriente de respuesta.
EmptyResult – Una respuesta vacía es devuelta.
RedirectResult – Ejecuta una redirección HTTP a la URL especificada.
RedirectToRouteResult – Ejecuta una redirección HTTP a la URL que está determinada por la máquina de ruteo, basado en la data de ruteo dada.
JsonResult – Serializa un objeto ViewData en el formato Json
JavaScriptResult – Devuelve una pieza de código JavaScript que puede ser ejecutado en el cliente.
ContentResult – Escribe contenido a la corriente de respuesta sin requerir de una vista.
FileContentResult – Devuelve un archivo al cliente.
FileStreamResult – Devuelve una archivo al cliente, el cual es provisto por una corriente (stream)
FilePathResult – Devuelve un archivo al cliente

¿Que son «ActionFilters» en MVC?

«ActionFilters» ayudan a ejecutar lógica mientras una acción MVC está ejecutándose o después que una acción MVC se ha ejecutado.

actionfilters

Los filtros de acción son útiles en los siguientes escenarios:

  1. Implementar lógica antes que la acción suceda.
  2. Cancelar una ejecución actual.
  3. Inspeccionar el valor retornado.
  4. Proveer datos extra a la acción

Puedes crear filtros de acción de 2 maneras:

  • En línea Inline Action Filter.
  • Creando un atributo «ActionFilter».

Para crear un inline action filter necesitamos implementar la interfaz «IActionFilter». La interfaz «IActionFilter» tiene 2 métodos «OnActionExecuted» y «OnActionExecuting». Podemos implementar lógica de pre-procesamiento o lógica de cancelación en estos métodos.

public class Default1Controller : Controller , IActionFilter
    {
        public ActionResult Index(Customer obj)
        {
            return View(obj);
        }
        void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext)
        {
            Trace.WriteLine("Action Executed");
        }
        void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext)
        {
            Trace.WriteLine("Action is executing");
        }
    }

El problema con un atributo «inline action» es que no puede ser reutilizado con otros controladores. Podemos convertir el inline action filter en una atributo. Para crear un atributo action filter necesitamos heredar de «ActionFilterAttribute» e implementar la interfaz «IActionFilter» como se muestra en el siguiente código:

public class MyActionAttribute : ActionFilterAttribute , IActionFilter
{
void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext)
{
     Trace.WriteLine("Action Executed");
}
void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext)
{
      Trace.WriteLine("Action executing");
}
}

Posteriormente podemos decorar los controladores en los cuales queremos el action filter que se ejecute. Podemos ver en el siguiente código que he decorado el «Default1Controller con la clase «MyActionAttribute» la cual fue creada en el código previo.

[MyActionAttribute]
public class Default1Controller : Controller
{
 public ActionResult Index(Customer obj)
 {
 return View(obj);
 }
}

¿Podemos crear una máquina de vistas personalizada utilizando MVC?

Sí, podemos crear nuestra propia máquina de vistas en MVC. Para crear nuestra propia máquina de vistas necesitamos seguir 3 pasos.
Digamos que queremos crear una máquina de vistas personalizada donde el usuario pueda tipear un comando como «» y muestre la fecha y hora actual.
Paso 1. Necesitamos crear una clase que implemente la interfaz «IView». En esta clase debemos escribir la lógica de como la vista será mostrada en la función «Render».

public class MyCustomView : IView
    {
        private string _FolderPath; // Define where  our views are stored
        public string FolderPath
        {
            get { return _FolderPath; }
            set { _FolderPath = value; }
        }

        public void Render(ViewContext viewContext, System.IO.TextWriter writer)
        {
           // Parsing logic <dateTime>
            // read the view file
            string strFileData = File.ReadAllText(_FolderPath);
            // we need to and replace <datetime> datetime.now value
            string strFinal = strFileData.Replace("<DateTime>", DateTime.Now.ToString());
            // this replaced data has to sent for display
            writer.Write(strFinal);
        }
    }

Paso 2. Necesitamos crear una clase que herede de «VirtualPathProviderViewEngine» y en esta clase necesitamos proveer la ruta a la carpeta y la extension de la vista. Por ejemplo la extensión de Razor es «cshtml», para ASPX la extension es «.aspx», de la misma manera nuestra vista personalizada necesita que le demos una extensión. En el siguiente código establecemos «ViewLocationFormats» a la carpeta «Views» y la extensión «.myview».

public class MyViewEngineProvider : VirtualPathProviderViewEngine
    {
        // We will create the object of Mycustome view
        public MyViewEngineProvider() // constructor
        {
            // Define the location of the View file
            this.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.myview", "~/Views/Shared/{0}.myview" }; //location and extension of our views
        }
        protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
        {
            var physicalpath = controllerContext.HttpContext.Server.MapPath(viewPath);
            MyCustomView obj = new MyCustomView(); // Custom view engine class
            obj.FolderPath = physicalpath; // set the path where the views will be stored
            return obj; // returned this view paresing logic so that it can be registered in the view engine collection
        }
        protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
        {
            var physicalpath = controllerContext.HttpContext.Server.MapPath(partialPath);
            MyCustomView obj = new MyCustomView(); // Custom view engine class
            obj.FolderPath = physicalpath; // set the path where the views will be stored
            return obj; // returned this view paresing logic so that it can be registered in the view engine collection
        }
    }

Paso 3. Necesitamos registrar la vista en la colección de vistas personalizadas. El mejor lugar para registrar esta máquina de vistas personalizada es en la colección «ViewEngines» en el archivo «global.asax».

protected void Application_Start()
 {
            // Step3 :-  register this object in the view engine collection
            ViewEngines.Engines.Add(new MyViewEngineProvider());
<span class="Apple-tab-span" style="white-space: pre; ">	</span>…..
}

Abajo está una simple muestra de la vista personalizada

customview

¿Cómo enviar resultados en el formato Json en MVC?

En MVC tenemos la clase «JsonResult» la cual puede retornar data en el formato Json. Debajo hay un simple ejemplo el cual devuelve el objeto «customer» en el formato Json utilizando «JsonResult»

public JsonResult getCustomer()
{
Customer obj = new Customer();
obj.CustomerCode = "1001";
obj.CustomerName = "Shiv";
 return Json(obj,JsonRequestBehavior.AllowGet);
}

Debajo se muestra el resultado del código anterior si invocas la acción via el navegador de internet.

json

¿Qué es el «WebAPI»?

HTTP es el protocolo más utilizado. Por muchos años el navegador de internet ha sido el cliente preferido por el cual podemos consumir data expuesta sobre HTTP. Pero como los años pasan y la variedad de clientes navegadores de internet ha crecido. Tenemos una demanda para consumir data en HTTP de clientes como móviles, javascripts, aplicaciones windows, etc.

Para satisfacer el rango amplio de clientes, «REST» fue la solución propuesta.

«WebAPI» es la tecnología por la cual podemos exponer data sobre HTTP siguiendo los principios de REST.

¿Pero WCF SOAP también hace la misma cosa, en qué difiere «WebAPI»?

SOAP: Es peso pesado por la complicada estructura WSDL, es independiente de los protocolos, para leer un mensaje SOAP el cliente necesita entender el formato WSDL. Escribir un código para leer un WSDL personalizado es una tarea pesada. Si el cliente es suficientemente inteligente para crear objetos proxy como se puede en .NET, entonces SOAP es más facil de consumir y llamar. SOAP sigue la especificación WS-*.

WebAPI: Peso ligero, solo la información necesaria es transmitida, sólo utiliza protocolo HTTP, la salida de WebAPI es una simple cadena: Json o XML. Escribir código es muy facil. Web API sigue los principios de REST.

¿Con WCF también puedes implementar REST, por qué utilizar «WebAPI»?

WCF se trajo para implementar SOA, la intención nunca fue implementar REST. «WebAPI» se construyó de cero y su única meta es crear servicios HTTP utilizando REST. Debido a que su único enfoque es crear servicios «REST» hace que WebAPI sea preferido.

¿Cómo implementar WebAPI en MVC?

Paso 1. Crea un proyecto utilizando la plantilla WebAPI.

webapiplantilla

Paso 2. Una vez que hayas creado el proyecto notarás que el controlador ahora hereda de «ApiController» y puedes implementar los métodos de protocolo HTTP «post», «get», «put» y «delete».

public class ValuesController : ApiController
    {
        // GET api/values
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }
        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }
        // POST api/values
        public void Post([FromBody]string value)
        {
        }
        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }
        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }

Paso 3. Si haces una llamada HTTP GET deberías obtener los siguientes resultados.

xmlresult

¿Cómo puedo detectar que un controlador MVC es llamado por POST o GET?

Para detectar si la llamada en el controlador es una acción POST o GET podemos utilizar la propiedad «Request.HttpMethod» como se muestra a continuación.

public ActionResult SomeAction()
{
            if (Request.HttpMethod == "POST")
            {
                return View("SomePage");
            }
            else
            {
                return View("SomeOtherPage");
            }

}

ASP.MVC asignar un valor al modelo (model) en la vista (view).

¿Es posible hacer esto: @model.attribute = «algo» ?

Respuesta:

Primero la capitalización (el uso de mayúsculas y minúsculas) importa:

@model (en minúsculas la letra «m») es una palabra reservada en vistas (views) que utilizan Razor. Declara el tipo de dato que tiene el modelo y normalmente se pone al inicio de la vista (view).

Ejemplo:

@model MyNamespace.Models.MyModel

Posteriormente en el mismo archivo (donde se encuentra la vista) puedes referenciar el atributo que quieras con @Model.Attribute (en este caso va en mayúscula la letra «M»)

Resumiendo:

@model ----> Declara el modelo (model) que vas a utilizar.
Model ---> Referencia la instancia del modelo (model)

Continuando con la asignación de un valor a un atributo de un modelo, sí puedes asignar un valor a tu modelo y utilizarlo posteriormente en la página (vista o view) PERO no será persistido cuando la página envíe (submit) los datos al controlador (controller) A MENOS que sea un valor en un campo del formulario (form field value). Para que puedas obtener el valor de regreso en el modelo durante el proceso llamado vinculación del modelo (model binding) necesitas asignar el valor a un campo del formulario (form field).

Ejemplos:

Opción Nro. 1.

En el controlador (controller) en la acción (action) necesitas crear el modelo para la primera vista de tu página, de otra forma cuando quieras establecer el Model.Attribute. El objeto Model será nulo (null).

Ejemplo 1: Asignando el valor para Model.Attribute en la vista (view):

En el Controlador (controller)

public ActionResult AlgunaAccion()
{
   MyModel model = new MyModel();
   return View(model);
}
[HttpPost] // Esta acción acepta la data enviada al servidor
public ActionResult AlgunaAccion(MyModel model)
{
   // model.Attribute será ahora "algo"
   return View(model);
}

En la Vista (view)

@{Model.Attribute = "algo";}
@HTML.HiddenFor(m => m.Attribute); @* Esto asigna el Attribute = "algo" cuando la página sea enviada de vuelta al servidor *@

Ejemplo 2: Asignando el valor para Model.Attribute en el controlador (controller)

En el Controlador (controller)

public ActionResult AlgunaAccion()
{
   MyModel model = new MyModel();
   model.Attribute = "algo";
   return View(model);
}
[HttpPost] // Esta acción acepta la data enviada al servidor
public ActionResult AlgunaAccion(MyModel model)
{
   // model.Attribute será ahora "algo"
   return View(model);
}

En la Vista (view)

@HTML.HiddenFor(m => m.Attribute); @* Esto asigna el Attribute = "algo" cuando la página sea enviada de vuelta al servidor *@

Opción Nro. 2.

Desde que los modelos está basados en nombres (name-based) puedes saltarte el paso de crear el modelo en el controlador y tan sólo ponerle de nombre a un campo del formulario (form field) el mismo nombre que la propiedad del modelo. En este caso, establecer un campo oculto (hidden field) y llamarlo «Attribute» y asignarle el valor «algo», asegurará que cuando la página se envíe de vuelta el valor «algo» esté enlazado a la propiedad Attribute del modelo durante el proceso de vinculación del modelo (model-binding process)
Nota. No tiene que ser obligatoriamente un campo oculto (hidden field) puede ser cualquier campo de entrada HTML con nombre igual a «Attribute» (name=»Attribute»).

En el Controlador

public ActionResult AlgunaAccion()
{
   return View();
}
[HttpPost] // Esta acción acepta la data enviada al servidor
public ActionResult AlgunaAccion(MyModel model)
{
   // model.Attribute será ahora "algo"
   return View(model);
}

En la Vista (view)

@HTML.Hidden("Attribute", "algo");

Basado en el siguiente artículo en inglés: http://stackoverflow.com/questions/7562393/how-to-set-model-attribute-in-razor-view