• Artículo

Agosto de 2016

Volumen 31, número 8

ASP.NET Core: escritura de aplicaciones con Visual Studio Code y Entity Framework

Alessandro Del Del | Agosto de 2016

El desarrollo de código abierto y multiplataforma es fundamental para las estrategias actuales y futuras de Microsoft. Muchos bloques de creación de la pila de .NET se han hecho de código abierto, mientras que otros se han desarrollado para adoptar y dar soporte a la nueva estrategia. ASP.NET Core 1.0, que actualmente se encuentra en modo de versión candidata para lanzamiento (RC), es la tecnología de código abierto más reciente para crear aplicaciones multiplataforma para la web y la nube que se ejecuta en Linux, Mac OS X y Windows.

ASP.NET Core le permite escribir aplicaciones de tipo Modelo-Vista-Controlador (MVC) con C# y depende de .NET Core (dotnet.github.io), el nuevo conjunto modular multiplataforma y de código abierto de tiempos de ejecución, bibliotecas y compiladores (también en la versión candidata para lanzamiento). La mayor ventaja de ASP.NET Core es que es completamente independiente de cualquier sistema de proyectos de propiedad o entorno de desarrollo integrado, lo que significa que también puede compilar una aplicación ASP.NET Core fuera de Microsoft Visual Studio y en sistemas operativos distintos de Windows.

Para lograrlo, debe usar varias herramientas de línea de comandos para compilar y ejecutar aplicaciones, así como para aplicar la técnica scaffolding en ellas, mientras usa Visual Studio Code para la edición. Aún hay mucho trabajo en curso, por lo que es posible que algunas características cambien hasta que se alcance el hito de la versión RTM. Por ejemplo, ASP.NET Core antes dependía del entorno de ejecución .NET (DNX) y de la interfaz de la línea de comandos (CLI) para compilar y administrar aplicaciones; dado que ASP.NET Core se basa en .NET Core, se retirará DNX y su CLI se cambiará por las herramientas de línea de comandos .NET Core para las próximas versiones. Por lo tanto, tenga en cuenta esto si quiere comenzar a escribir aplicaciones web multiplataforma con ASP.NET Core y C#.

En este artículo se explica cómo se crea una aplicación web ASP.NET Core multiplataforma que aproveche Entity Framework 7 para ejecutar operaciones de datos con una base de datos, y cómo se escribe código en Visual Studio Code (code.visualstudio.com), que usa en Linux, OS X y Windows. Dado que me centraré en datos, le recomiendo que lea el documento ".NET Core and Visual Studio Code" (.NET Core y Visual Studio Code) en el sitio web oficial (bit.ly/1PhzoC7). Escribiré varios comandos basados en el entorno DNX para que sean coherentes con la versión candidata para lanzamiento actual; sin embargo, tenga en cuenta que estos se reemplazarán por comandos de CLI de .NET Core una vez ASP.NET Core se convierta en versión RTM.

Señalaré los comandos que se reemplazarán cuando corresponda. Crearé mi aplicación de ejemplo con la nueva herramienta de Visual Studio Code. Visual Studio Code es una herramienta de desarrollo multiplataforma, multilingüe y sofisticada que gira en torno a la escritura de código y tiene enlaces para que pueda emitir comandos de compilación. Supongo que ya ha instalado Visual Studio Code, Node.js (nodejs.org), SQL Server Express Edition (bit.ly/1PhzoC7) y ASP.NET Core 1.0 RC (get.asp.net/OtherDownloads).

Creación de una base de datos de ejemplo

Primero, cree una base de datos con la que trabajar. Podría usar una base de datos existente o también definir el modelo de datos con el enfoque de Entity Framework Code First, sin embargo, la compatibilidad con las migraciones de código en ASP.NET Core aún se encuentra en progreso y no es estable en este momento. Por este motivo, simplemente deberá crear una nueva base de datos que almacene una lista de modelos de coches y los nombres de sus fabricantes. En SQL Server Management Studio, cree una nueva base de datos denominada Cars y luego escriba y ejecute la consulta que se muestra en la Figura 1, que define una tabla denominada Cars, con tres columnas: Id. (clave principal e incremento automático), CarModel (de tipo NVarChar(Max)) y fabricante (de tipo NVarChar(Max)).

Figura 1 Creación de una tabla de ejemplo

CREATE TABLE [dbo].[Cars](
  [id] [int] IDENTITY(1,1) NOT NULL,
  [CarModel] [nvarchar](max) NOT NULL,
  [Brand] [nvarchar](max) NOT NULL,
CONSTRAINT [PK_Cars] PRIMARY KEY CLUSTERED
(
  [id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
  ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Cars] ON
GO
INSERT [dbo].[Cars] ([id], [CarModel], [Brand]) VALUES (1, N'Mustang', N'Ford')
GO
INSERT [dbo].[Cars] ([id], [CarModel], [Brand]) VALUES (2, N'500', N'Fiat')
GO
INSERT [dbo].[Cars] ([id], [CarModel], [Brand]) VALUES (3, N'Giulia', N'Alfa Romeo')
GO
SET IDENTITY_INSERT [dbo].[Cars] OFF
GO
USE [master]
GO
ALTER DATABASE [CARS] SET  READ_WRITE
GO

En función de su situación, es posible que también quiera considerar la posibilidad de usar una columna de tipo bit para marcar un elemento como eliminado, pero que de hecho nunca se quita del almacén de datos físicamente.

Asegúrese de que la base de datos, la tabla y los datos de ejemplo se muestren correctamente en el explorador de objetos de Management Studio.

Instalación de C# para Visual Studio Code

En Visual Studio Code, la compatibilidad con el lenguaje C# ha cambiado recientemente a una extensión que debe descargar e instalar de forma independiente. Es recomendable que instale la extensión C# para obtener todas las características de edición evolucionadas, como la coloración de la sintaxis, IntelliSense, la detección de problemas de código mientras escribe y mucho más. Para instalar C#, ejecute Visual Studio Code, abra la paleta de comandos (F1), escriba "ext install" y presione Entrar. En la lista de extensiones, haga doble clic en C# y espere hasta que se complete la instalación. Cuando se le solicite, acepte la opción para reiniciar Visual Studio Code.

Técnica scaffolding en una aplicación ASP.NET Core

Visual Studio Code no cuenta con comandos integrados que automaticen la generación de un proyecto ASP.NET Core, por lo que la creación de un proyecto manualmente requiere algo de esfuerzo. Con la versión candidata para lanzamiento actual de ASP.NET Core, puede usar una herramienta de línea de comandos denominada Yeoman (yeoman.io), una herramienta de scaffolding popular que ofrece, entre otras cosas, la opción de generar un esqueleto de la aplicación ASP.NET Core. Yeoman depende de Node.js y debe instalarse desde la línea de comandos con el administrador de paquetes Node.js (npm). Dicho esto, abra el símbolo de sistema y escriba la siguiente línea:

> npm install -g yo generator-aspnet gulp bower

Se instalará Yeoman (que se representa como "yo") en la ubicación global (-g) junto con Gulp (una herramienta para la automatización de tareas) y Bower (un administrador de bibliotecas del lado cliente). Tenga en cuenta que Yeoman se subministra con varios generadores, entre los que se incluyen el generador de ASP.NET y de la extensión de Visual Studio Code. La opción generator-aspnet de la línea de comandos anterior descargará e instalará el generador de ASP.NET Core que le simplificará el trabajo. Cuando esté listo, con el comando cd (o chdir), vaya a una carpeta en la que quiera crear una nueva aplicación (cd C:\temp). En este punto, escriba la línea de comandos siguiente:

> yo aspnet

Se abrirá el generador de ASP.NET de Yeoman, tal y como puede ver en la Figura 2.

Inicio del generador de Yeoman
Figura 2 Inicio del generador de Yeoman

Seleccione la plantilla de la aplicación web y presione Entrar. En la pantalla siguiente, escriba CarModels como nombre de la aplicación y presione Entrar. El generador define el espacio de nombres raíz de la aplicación según el uso de mayúsculas en el nombre de la aplicación. Por consiguiente, si CarModels es el nombre de la aplicación, el espacio de nombres raíz también será CarModels; sin embargo, si escribe carmodels o carModels como nombre de la aplicación, el espacio de nombres raíz será carmodels o carModels, respectivamente. Tenga en cuenta esto a la hora de especificar el nombre de la aplicación. Al cabo de unos segundos, Yeoman completará la generación de una nueva aplicación ASP.NET Core en una subcarpeta denominada CarModels. Con las próximas versiones de ASP.NET Core, también podrá usar CLI de .NET Core para aplicar técnicas de scaffolding en una aplicación web. La línea de comandos que usará se parecerá a la siguiente:

> dotnet new

La versión actual de CLI todavía no admite la aplicación de técnicas de scaffolding en una aplicación web; en su lugar, genera una aplicación de consola vacía, por lo tanto, este es otro motivo por el que aquí puede ver Yeoman en acción. Escriba "cd CarModels" para entrar a la carpeta CarModels y, a continuación, escriba "code" para que se inicie Visual Studio Code y se abra la carpeta actual y su contenido. Cuando Visual Studio Code abre una carpeta, examina los nombres de archivo del proyecto conocidos, como los archivos de solución project.json, package.json o .sln MSBuild. En el caso de un proyecto de ASP.NET Core, Visual Studio Code busca el archivo project.json, recopila la información de dependencia y organiza los archivos y subcarpetas de código de forma adecuada. La primera vez en que se abre el proyecto, Visual Studio Code detecta los paquetes NuGet que faltan y le ofrece realizar una restauración.

Haga clic en Restaurar en la barra informativa y espere a que los paquetes NuGet se descarguen. Cuando termine, podrá aprovechar todas las características de edición de código avanzadas de Visual Studio Code para escribir y editar archivos de código y reusar la mayoría de sus aptitudes existentes con ASP.NET MVC. De hecho, Visual Studio Code no solo admite C#, sino que además ofrece coloración de sintaxis y otras características avanzadas para todos los tipos de archivo que forman una aplicación ASP.NET Core, como archivos .json, JavaScript, .cshtml y hojas de estilo CSS.

Creación de un modelo de datos con Entity Framework 7

Ahora que ya tiene una aplicación vacía de ASP.NET Core, el siguiente paso consiste en crear un modelo de datos con Entity Framework 7, la nueva versión del asignador relacional de objetos popular de Microsoft, que ofrece compatibilidad con ASP.NET Core. En el momento de escribir este artículo, Entity Framework 7 se encuentra en RC1. La creación del modelo se logrará mediante la ejecución de los comandos dnx adecuados del símbolo del sistema y también implica el uso de un par de paquetes NuGet. El primer paquete NuGet se denomina EntityFramework.MicrosoftSqlServer y el proyecto creado recientemente le hace referencia automáticamente. El segundo paquete NuGet se denomina EntityFramework.MicrosoftSqlServer.Design y debe agregarse manualmente a las dependencias del proyecto. Para hacerlo, en Visual Studio Code, abra el archivo project.json y busque la línea siguiente dentro del nodo de dependencias:

"EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final",

Después de esta línea, agregue lo siguiente:

"EntityFramework.MicrosoftSqlServer.Design": "7.0.0-rc1-final",

Tenga en cuenta que ambos paquetes deben tener el mismo número de versión y que este cambiará en las próximas versiones. Guarde el archivo project.json. Visual Studio Code detectará que falta un paquete NuGet y le volverá a solicitar una restauración del paquete. Como siempre, acepte esta oferta.

Ahora, abra un símbolo del sistema encima de la carpeta que contiene el proyecto de ASP.NET Core. El entorno dnx proporciona el comando ef, que le permite generar varios Entity Data Model a partir de la línea de comandos. Este comando ofrece más comandos, por ejemplo, el de base de datos, dbcontext y migraciones. El comando de la base de datos le permite administrar una base de datos; el de dbcontext, le permite aplicar técnicas de scaffolding en un tipo DbContext y en entidades; y el de migraciones, le permite trabajar con migraciones de código. Usará el comando dbcontext para generar una clase DbContext y las entidades necesarias. Puede escribir dnx ef para ver la lista de comandos disponibles (vea la Figura 3) o escriba un comando completo directamente.

Lista de comandos disponibles de Entity Framework
Figura 3 Lista de comandos disponibles de Entity Framework

Cuando esté listo, escriba la línea de comandos siguiente:

> dnx ef dbcontext scaffold "Server=.\sqlexpress;Database=Cars;Trusted_Connection=True;" 
EntityFramework.MicrosoftSqlServer --outputDir Models

El comando dbcontext toma una opción denominada scaffolding, que genera el tipo DbContext y las entidades adecuadas a partir de la base de datos especificada en la cadena de conexión proporcionada. Por supuesto, deberá reemplazar el nombre del servidor con el suyo. EntityFramework.Micro­softSqlServer especifica el proveedor de datos que se usará para aplicar la técnica scaffolding. Observará que puede especificar un directorio de salida para el modelo de datos a través de la opción --outputDir, que distingue mayúsculas de minúsculas. En este caso, el directorio de salida es una carpeta denominada Models, que ya existe en el proyecto y es el lugar lógico y adecuado para la clase DbContext y las entidades. Después del mensaje de finalización, verá cómo la carpeta Models contiene un archivo de clase denominado CarsContext.cs, que contiene la clase CarsContext que se hereda de Db­Context, y un archivo denominado Cars.cs, que define una clase denominada Cars que expone las propiedades que asignan columnas desde la tabla Cars en la base de datos (vea la Figura 4). Tenga en cuenta que no hay ninguna opción para controlar la pluralización de los nombres de entidad, por lo que esto se debería administrar manualmente, pero este tema no lo trataremos en este artículo.

Clase del modelo de coches en el editor de código
Figura 4 Clase del modelo de coches en el editor de código

En este punto, debe suministrar la cadena de conexión que usará la aplicación para conectarse a la base de datos. En lugar de colocar la cadena de conexión en el archivo Web.config, puede hacerlo en la clase Startup. Esto declara un método denominado ConfigureServices, que el tiempo de ejecución invoca para configurar los servicios necesarios a través de la inserción de dependencias (DI), y este es el lugar recomendado para suministrar la cadena de conexión. El método ConfigureServices toma un argumento denominado services, de tipo Microsoft.Extensions.Dependency­Injection.IServiceCollection, que almacena una lista de servicios que se insertará. Tenga en cuenta estas líneas de código:

var connection = @"Server=.\sqlexpress;Database=Cars;Trusted_Connection=True;";
services.AddEntityFramework()
  .AddSqlServer()
  .AddDbContext<CarsContext>(options => options.UseSqlServer(connection));

Lo que hace la segunda línea es registrar los servicios necesarios de Entity Framework y SQL Server para DI y registra la clase DbContext como un servicio. El método AddDbContext le permite especificar la cadena de conexión a través del método DbContextBuilder.UseSqlServer, que se invoca a través de un delegado denominado options. Ambas líneas deben colocarse al principio del método ConfigureServices, cuyo código completo se muestra en la Figura 5.

Figura 5 Registro de la clase DbContext para la inserción de dependencias

public void ConfigureServices(IServiceCollection services)
{
  // Add framework services
  var connection = @"Server=.\sqlexpress;Database=Cars;Trusted_Connection=True;";
  services.AddEntityFramework()
    .AddSqlServer()
    .AddDbContext<CarsContext>(options => options.UseSqlServer(
      connection));
  services.AddEntityFramework()
    .AddSqlite()
    .AddDbContext<ApplicationDbContext>(options => options.UseSqlite(
      Configuration["Data:DefaultConnection:ConnectionString"]));
  services.AddIdentity<ApplicationUser, IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>()
    .AddDefaultTokenProviders();
  services.AddMvc();
  // Add application services
  services.AddTransient<IEmailSender, AuthMessageSender>();
  services.AddTransient<ISmsSender, AuthMessageSender>();
}

Hasta ahora, ha implementado el modelo de datos. Ahora necesita una manera de exponer las acciones que la IU invocará para trabajar con los datos.

Implementación de controladores MVC

ASP.NET Core admite tanto los servicios de Web API como las aplicaciones MVC. Web API es el método preferido si crea un servicio RESTful; en su lugar, el ejemplo actual es una aplicación web con una IU, por lo tanto, deberá usar MVC. Puede implementar vistas y controladores MVC igual que lo haría en cualquier aplicación ASP.NET MVC. Un controlador es una clase que se hereda de Microsoft.AspNet.Mvc.Controller y expone acciones que la IU (u otros clientes) puede invocar para trabajar con datos. Para agregar un controlador, en Visual Studio Code, haga clic con el botón derecho en la carpeta Controladores y seleccione Nuevo archivo. Cuando aparezca el cuadro de texto, escriba CarsController.cs como nuevo nombre de archivo. De esta manera, se agregará un nuevo archivo C# que también se abrirá en el editor de código. Lo que el nuevo controlador debe implementar son métodos que le permitirán consultar, agregar y eliminar datos. La lista completa para el controlador se muestra en la Figura 6 (con comentarios). Aunque puede que el código parezca un poco largo, IntelliSense le ayudará a escribir código más rápidamente y de forma eficiente.

Figura 6 Implementación de un controlador MVC

using System.Linq;
using Microsoft.AspNet.Mvc;
using CarModels.Models;
namespace CarModels.Controllers
{
  public class CarsController : Controller
  {
    // Declares the DbContext class
    private CarsContext dataContext;
    // The instance of DbContext is passed via dependency injection
    public CarsController(CarsContext context)
    {
      this.dataContext=context;
    }
    // GET: /<controller>/
    // Return the list of cars to the caller view
    public IActionResult Index()
    {
      return View(this.dataContext.Cars.ToList());
    }
    public IActionResult Create()
    {
      return View();
    }
    // Add a new object via a POST request
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Create(Cars car)
    {
      // If the data model is in a valid state ...
      if (ModelState.IsValid)
      {
        // ... add the new object to the collection
        dataContext.Cars.Add(car);
        // Save changes and return to the Index method
        dataContext.SaveChanges();
        return RedirectToAction("Index");
      }
      return View(car);
    }
    [ActionName("Delete")]
    public IActionResult Delete(int? id)
    {
      if (id == null)
      {
        return HttpNotFound();
      }
      Cars car = dataContext.Cars.Single(m => m.id == id);
      if (car == null)
      {
        return HttpNotFound();
      }
      return View(car);
    }
    // POST: Cars/Delete/5
    // Delete an object via a POST request
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public IActionResult DeleteConfirmed(int id)
    {
      Cars car = dataContext.Cars.SingleOrDefault(m => m.id == id);
      // Remove the car from the collection and save changes
      dataContext.Cars.Remove(car);
      dataContext.SaveChanges();
      return RedirectToAction("Index");
    }
  }
}

En resumen, tiene cuatro acciones: Index, que devuelve la lista de coches a la vista del autor de llamada; Create, que agrega un nuevo coche a través de una solicitud HTTP POST; y Delete y DeleteConfirmed, que esperan la confirmación del usuario y eliminan un coche a través de una solicitud HTTP POST, respectivamente. Con About Index, también podría escribir una consulta LINQ para devolver una lista filtrada.

Adición y diseño de vistas MVC

En MVC, las vistas son páginas web enlazadas a datos que componen la IU de la aplicación. En este ejemplo, necesita tres vistas: una página Index, que muestre la lista de coches; una página Create, que permita agregar nuevos coches, y una página Delete, que pida confirmación antes de eliminar un coche de la base de datos. Las vistas deben organizarse en subcarpetas que se encuentren en la carpeta Views, cuyo nombre la aplicación usa para redirigir solicitudes web. Por ejemplo, si crea una carpeta denominada Cars, todas las vistas de dentro de esta carpeta se abrirán a través de la convención de rutas ApplicationName/Cars. Suponiendo que ha creado una carpeta denominada Cars en Views, haga clic con el botón derecho en ella y seleccione New File. Escriba Index.cshtml como nombre de archivo y presione Entrar para que el nuevo archivo esté disponible inmediatamente en el editor de código; según su extensión, Visual Studio Code lo reconoce como un archivo Razor. Esta vista se usa para mostrar la lista completa de elementos mediante una tabla; cada fila muestra el modelo de un coche, el nombre del fabricante y un hipervínculo al que los usuarios pueden hacer clic para eliminar un elemento. En la Figura 7 se muestra el código completo para la página Index.cshtml.

Figura 7 Creación de una vista Index

@model IEnumerable<CarModels.Models.Cars>
@{
  ViewBag.Title = "Cars";
}
<h2>Car models</h2>
<p>
  <a asp-controller="Cars" asp-action="Create">Add New</a>
</p>
<table class="table">
  <tr>
    <th>Car Model</th>
    <th>Brand</th>
  </tr>
  @foreach (var item in Model)
  {
    <tr>
      <td>
        @Html.DisplayFor(modelItem => item.CarModel)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.Brand)
      </td>
      <td>
        <a asp-controller="Cars" asp-action="Delete"
          asp-route-id="@item.id">Delete</a>
      </td>
    </tr>
  }
</table>

Observe cómo el marcado aprovecha lo que se denomina enlace de modelo para especificar el tipo de.NET para la clase del modelo e invocar y enlazar sus propiedades para cada fila. Asimismo, observe también cómo el vínculo Delete apunta a la acción con el mismo nombre del controlador Cars y suministra el id. de elemento mediante el enlace de modelo. De manera similar, una acción denominada Create apunta a la acción Create del controlador Cars y abre una nueva vista que le permite agregar nuevos objetos. Esta vista se denomina Create y puede crear una siguiendo los mismos pasos que realizó anteriormente con la vista Index, es decir, debe agregar un archivo Create.cshtml en la subcarpeta Views\Cars. En esta nueva vista, debe crear básicamente un formulario de datos en el que los usuarios puedan escribir información según las propiedades del modelo y proporcionar un botón que envíe información al controlador de enlaces. En la Figura 8 se muestra cómo puede realizar esto.

Figura 8 Definición de una vista Create

@model CarModels.Models.Cars
@{
  ViewBag.Title = "New car";
}
<h2>@ViewData["Title"]</h2>
<form asp-controller="Cars" asp-action="Create" method="post"
  class="form-horizontal" role="form">
  <div class="form-horizontal">
    <div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
    <div class="form-group">
      <label asp-for="CarModel" class="col-md-2 control-label"></label>
      <div class="col-md-10">
        <input asp-for="CarModel" class="form-control" />
        <span asp-validation-for="CarModel" class="text-danger"></span>
      </div>
      <label asp-for="Brand" class="col-md-2 control-label"></label>
      <div class="col-md-10">
        <input asp-for="Brand" class="form-control" />
        <span asp-validation-for="Brand" class="text-danger"></span>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Create" class="btn btn-default" />
      </div>
    </div>
  </div>
</form>

El último paso consiste en agregar una nueva vista denominada Delete.cshtml en la subcarpeta Views\Cars. Una vez agregada, escriba el código que se muestra en la Figura 9, que ofrece información detallada sobre el elemento que se eliminará y proporciona una opción para enviar o cancelar los cambios.

Figura 9 Creación de una vista Delete

@model CarModels.Models.Cars
@{
  ViewData["Title"] = "Delete";
}
<h2>Delete</h2>
<h3>Are you sure you? The operation cannot be undone.</h3>
<div>
  <h4>Cars</h4>
  <hr />
  <dl class="dl-horizontal">
    <dt>
      @Html.DisplayNameFor(model => model.Brand)
    </dt>
    <dd>
      @Html.DisplayFor(model => model.Brand)
    </dd>
    <dt>
      @Html.DisplayNameFor(model => model.CarModel)
    </dt>
    <dd>
      @Html.DisplayFor(model => model.CarModel)
    </dd>
  </dl>
  <form asp-action="Delete">
    <div class="form-actions no-color">
      <input type="submit" value="Delete" class="btn btn-default" /> |
      <a asp-action="Index">Back to List</a>
    </div>
  </form>
</div>

En este punto, tiene un modelo de datos, acciones e IU. Esto significa que puede empezar a probar la aplicación de ejemplo.

Ejecución de la aplicación

Puede ejecutar una aplicación ASP.NET Core de Visual Studio Code directamente. Para hacerlo, abra la paleta de comandos, escriba dnx y presione Entrar. A continuación, seleccione dnx: Ejecutar comando y presione Entrar. Luego, haga clic en dnx web. Es lo mismo que escribir dnx web en un símbolo del sistema. En las próximas versiones, deberá escribir dotnet run en la línea de comandos. En este punto, Visual Studio Code inicia Kestrel, un servidor web de código abierto para aplicaciones ASP.NET Core (bit.ly/1rdEfxV), para hospedar su aplicación web. En Visual Studio Code, también verá una ventana de consola en la que Kestrel redirige su resultado y cualquier mensaje que envía el tiempo de ejecución, incluido el seguimiento de pila de las excepciones, que es especialmente útil por motivos de depuración. De manera predeterminada, Kestrel empieza a escuchar en el puerto 5000, lo que significa que puede abrir su explorador favorito y escribir http://localhost:5000 para iniciar la aplicación. En la Figura 10 se muestra la aplicación en ejecución.

Aplicación en ejecución
Figura 10 Aplicación en ejecución

En la barra de direcciones web del explorador, escriba localhost:5000/Cars para abrir la vista predeterminada del controlador Cars. Tal y como puede ver en la Figura 11, la aplicación muestra la lista de coches, según lo previsto.

Aplicación que muestra la lista de coches en la base de datos
Figura 11 Aplicación que muestra la lista de coches en la base de datos

Haga clic en Add New para que pueda agregar un nuevo elemento (vea la Figura 12). Al hacer clic en Create, el nuevo elemento se guarda en la base de datos y la aplicación volverá a la vista anterior, donde verá la lista de coches actualizada.

Adición de un nuevo elemento
Figura 12 Adición de un nuevo elemento

Ahora, haga clic en Delete hyperlink cerca del coche que agregó anteriormente. Aparecerá la vista Delete en la que se mostrarán los detalles del elemento seleccionado y se le pedirá confirmación al usuario (vea la Figura 13). Simplemente haga clic en Delete para eliminar el elemento y volver al índice. Recuerde que esta aplicación web es multiplataforma, por lo que se puede publicar en Linux, OS X y Windows.

Eliminación de un elemento
Figura 13 Eliminación de un elemento

Sugerencias para la publicación de su aplicación

Tiene diferentes alternativas para publicar su aplicación ASP.NET Core, como Microsoft Azure e IIS, entre otras. La primera opción implica habilitar la integración de GIT, mientras que la segunda actualmente implica la utilidad DNX (dnu) y la línea de comandos dnu publish y, en las próximas versiones, también implicará la línea de comandos dotnet publish. La publicación se ha tratado en recursos de Microsoft. La publicación en Azure se trata en bit.ly/22QXTh6, mientras que la que usa dnu se puede encontrar en bit.ly/1TWvfWh.

Resumen

Visual Studio Code le permite escribir aplicaciones ASP.NET Core mediante todas las características de edición evolucionadas disponibles en C# y en otros tipos de archivo del proyecto. Dado que ofrece la opción multiplataforma por si mismo, es el compañero perfecto para empezar a escribir aplicaciones MVC para Linux, OS X y Windows. La disponibilidad de Entity Framework en diferentes plataformas y la oportunidad de reusar las aptitudes existentes de C# y MVC hacen que las aplicaciones web centradas en la escritura de datos ofrezcan una experiencia aún más fascinante. No olvide comprobar si hay actualizaciones en la documentación de ASP.NET Core y .NET Core sobre CLI de .NET Core.

Alessandro Del Sole ha sido MVP de Microsoft desde el año 2008. Alessandro ha sido proclamado MVP del año en cinco ocasiones y es el autor de numerosos libros, eBooks, vídeos didácticos y artículos sobre desarrollo .NET con Visual Studio. Del Sole trabaja como experto en desarrollo de soluciones en Brain-Sys (www.brain-sys.it); su trabajo se centra principalmente en las áreas de desarrollo en .NET, formación y consultoría. Puede seguirlo en Twitter: @progalex.

Gracias al siguiente experto técnico de Microsoft por revisar este artículo: James McCaffrey
Puede James McCaffrey trabaja para Microsoft Research en Redmond, Washington. Ha colaborado en el desarrollo de varios productos de Microsoft como, por ejemplo, Internet Explorer y Bing. Puede ponerse en contacto con el Dr. McCaffrey en jammc@microsoft.com.