Tutorial: Desarrollar una aplicación web ASP.NET Core MVC con Azure Cosmos DB mediante el SDK de .NET

SE APLICA A: SQL API

En este tutorial aprenderá a usar Azure Cosmos DB para almacenar datos, y acceder a estos, desde una aplicación de ASP.NET MVC hospedada en Azure. En este tutorial, usará el SDK de .NET V3. En la siguiente imagen se muestra la página web que se compilará mediante el ejemplo de este artículo:

Si no tiene tiempo para completar el tutorial, puede descargar el proyecto de ejemplo completo de GitHub.

Esta tutorial abarca lo siguiente:

Requisitos previos

Antes de seguir las instrucciones del presente artículo, asegúrese de tener los siguientes recursos:

• Una cuenta de Azure activa. Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.

  Puede probar Azure Cosmos DB de forma gratuita sin necesidad de una suscripción de Azure y sin compromisos, o bien crear una cuenta de nivel Gratis de Azure Cosmos DB, con los primeros 400 RU/s y 5 GB de almacenamiento totalmente gratis. También puede usar el emulador de Azure Cosmos DB con un identificador URI https://localhost:8081. Para obtener la clave que se va a usar con el emulador, consulte Autenticación de solicitudes.

• Visual Studio 2019. Descargue y use Visual Studio 2019 Community Edition (es gratuito). Asegúrese de que habilita la carga de trabajo Desarrollo de Azure durante la instalación de Visual Studio.

Todas las capturas de pantallas de este artículo son de Microsoft Visual Studio Community 2019. Si usa una versión diferente, es posible que las pantallas y las opciones no coincidan exactamente. La solución funcionará si cumple los requisitos previos.

Paso 1: Creación de una cuenta de Azure Cosmos

Para comenzar, crearemos una cuenta de Azure Cosmos. Si ya tiene una cuenta de SQL API de Azure Cosmos DB o si usa el emulador de Azure Cosmos DB, vaya a Paso 2: Creación de una aplicación ASP.NET MVC.

1. En el menú de Azure Portal o en la página principal, seleccione Crear un recurso.

2. En la página Nuevos, busque y seleccione Azure Cosmos DB.

3. En la página Azure Cosmos DB, seleccione Crear.

4. En la página Creación de una cuenta de Azure Cosmos DB , especifique la configuración básica de la nueva cuenta de Azure Cosmos.

   Configuración	Valor	Descripción
   Suscripción	Nombre de suscripción	Seleccione la suscripción de Azure que desea usar para esta cuenta de Azure Cosmos.
   Grupo de recursos	Definición de un nombre de grupo de recursos	Seleccione un grupo de recursos o seleccione Crear nuevo y escriba un nombre único para el grupo de recursos nuevo.
   Nombre de cuenta	Un nombre único	Escriba un nombre para identificar la cuenta de Azure Cosmos. Dado que documents.azure.com se anexa al nombre que se proporciona para crear el identificador URI, debe usar un nombre único. El nombre solo puede contener letras minúsculas, números y el carácter de guion (-). Debe tener una longitud de entre 3 y 44 caracteres.
   API	El tipo de cuenta que se va a crear	Seleccione Core(SQL) para crear una base de datos de documentos y consultarla mediante la sintaxis SQL. La API determina el tipo de cuenta que se va a crear. Azure Cosmos DB proporciona cinco API: Core (SQL) y MongoDB para datos de documento, Gremlin para datos de gráfico, Azure Table y Cassandra. Actualmente, debe crear una cuenta independiente para cada API. Más información acerca de SQL API.
   Location	Región más cercana a los usuarios	Seleccione una ubicación geográfica para hospedar la cuenta de Azure Cosmos DB. Use la ubicación más cercana a los usuarios para que puedan acceder de la forma más rápida posible a los datos.
   Capacity mode (Modo de capacidad)	Rendimiento aprovisionado o sin servidor	Seleccione Provisioned throughput (Rendimiento aprovisionado) para crear una cuenta en modo de rendimiento aprovisionado. Seleccione Serverless (Sin servidor) para crear una cuenta en modo sin servidor.
   Aplicar el descuento del nivel Gratis de Azure Cosmos DB	Aplicar o No aplicar	Con el nivel Gratis de Azure Cosmos DB, recibirá los primeros 1000 RU/s y 25 GB de almacenamiento gratis en una cuenta. Más información acerca del nivel Gratis.

   Nota

   Puede tener una cuenta de Azure Cosmos DB de nivel Gratis por cada suscripción de Azure y debe optar por tenerla al crear la cuenta. Si no ve la opción para aplicar el descuento por nivel Gratis, significará que en otra cuenta de la suscripción ya se ha habilitado el nivel Gratis.

   

5. En la pestaña Distribución global, configure los detalles siguientes. Puede dejar los valores predeterminados para este inicio rápido:

   Configuración	Valor	Descripción
   Redundancia geográfica	Deshabilitar	Habilite o deshabilite la distribución global en su cuenta. Para ello, debe emparejar su región con una región de par. Puede agregar más regiones a su cuenta más adelante.
   Escrituras en varias regiones	Deshabilitar	La funcionalidad de escrituras en varias regiones le permite aprovechar el rendimiento aprovisionado para sus bases de datos y contenedores de todo el mundo.

   Nota

   Las siguientes opciones no están disponibles si selecciona Serverless (Sin servidor) en Capacity mode (Modo de capacidad):

   • Aplicación de descuento por nivel Gratis
   • Redundancia geográfica
   • Escrituras en varias regiones

6. Opcionalmente, puede configurar detalles adicionales en las pestañas siguientes:

   • Redes: configure el acceso desde una red virtual.
   • Directiva de copia de seguridad: configure una directiva de copia de seguridad periódica o continua.
   • Cifrado: use una clave administrada por el servicio o una clave administrada por el cliente.
   • Etiquetas: son pares nombre-valor que permiten categorizar los recursos y ver una facturación consolidada mediante la aplicación de la misma etiqueta en varios recursos y grupos de recursos.

7. Seleccione Revisar + crear.

8. Revise la configuración de la cuenta y seleccione Crear. La operación de creación de la cuenta tarda unos minutos. Espere hasta que la página del portal muestre Se completó la implementación .

   

9. Seleccione Ir al recurso para ir a la página de la cuenta de Azure Cosmos DB.

   

Vaya a la página de la cuenta de Azure Cosmos DB y seleccione Claves. Copie los valores que se van a usar en la aplicación web que creará a continuación.

En la siguiente sección, creará una aplicación de ASP.NET Core MVC.

Paso 2: Crear una aplicación ASP.NET Core MVC nueva

1. Abra Visual Studio y seleccione Crear un proyecto.

2. En Crear un proyecto, busque y elija Aplicación web ASP.NET Core para C#. Seleccione Next (Siguiente) para continuar.

   

3. En Configure su nuevo proyecto, asigne al proyecto el nombre todo y seleccione Crear.

4. En Crear una nueva aplicación web ASP.NET Core, elija Aplicación web (controlador de vista de modelos) . Seleccione Crear para continuar.

   Visual Studio crea una aplicación MVC vacía.

5. Seleccione Depurar > Iniciar depuración o F5 para ejecutar la aplicación ASP.NET localmente.

Paso 3: Incorporación del paquete NuGet de Azure Cosmos DB al proyecto

Ahora que tenemos la mayoría del código de plataforma de ASP.NET Core MVC que necesitamos para esta solución, vamos a agregar los paquetes NuGet necesarios para conectarse a Azure Cosmos DB.

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Administrar paquetes NuGet.

2. En Administrador de paquetes NuGet, busque y seleccione Microsoft.Azure.Cosmos. Seleccione Instalar.

   

   Visual Studio descarga e instala el paquete de Azure Cosmos DB y sus dependencias.

   También puede usar la Consola del Administrador de paquetes para instalar el paquete NuGet. Para ello, seleccione Herramientas > Administrador de paquetes NuGet > Consola del Administrador de paquetes. En el símbolo del sistema, escriba el siguiente comando:

   Install-Package Microsoft.Azure.Cosmos
   

Paso 4: Configurar la aplicación ASP.NET Core MVC

Ahora vamos a agregar los modelos, las vistas y los controladores a esta aplicación MVC.

Incorporación de un modelo

1. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Models y seleccione Agregar > Clase.

2. En Agregar nuevo elemento, asigne a la nueva clase el nombre Item.cs y seleccione Agregar.

3. Reemplace el contenido de la clase Item.cs por el código siguiente:

   namespace todo.Models
   {
       using Newtonsoft.Json;
   
       public class Item
       {
           [JsonProperty(PropertyName = "id")]
           public string Id { get; set; }
   
           [JsonProperty(PropertyName = "name")]
           public string Name { get; set; }
   
           [JsonProperty(PropertyName = "description")]
           public string Description { get; set; }
   
           [JsonProperty(PropertyName = "isComplete")]
           public bool Completed { get; set; }
       }
   }
   

Azure Cosmos DB usa JSON para trasladar y almacenar los datos. Puede usar el atributo JsonProperty para controlar el modo en que JSON serializa y deserializa los objetos. La clase Item muestra el atributo JsonProperty. Este código controla el formato del nombre de propiedad que entra en JSON. También cambia el nombre de la propiedad Completed de .NET.

Adición de vistas

A continuación, se agregarán las siguientes vistas.

• Una vista Crear elemento
• Una vista Eliminar elemento
• Una vista para obtener los detalles del elemento
• Una vista Editar elemento
• Una vista para enumerar todos los elementos

Vista Crear elemento

1. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Views y seleccione Agregar > Nueva carpeta. Asigne a la carpeta el nombre Item.

2. Haga clic con el botón derecho en la carpeta vacía Item y seleccione Agregar > Vista.

3. En Agregar vista MVC, realice los cambios siguientes:

   • En Nombre de la vista, escriba Crear.
   • En Plantilla, seleccione Crear.
   • En Clase de modelo, seleccione Item (todo.Models) .
   • Seleccione Usar una página de diseño y escriba ~/Views/Shared/_Layout.cshtml.
   • Seleccione Agregar.

   

4. Después, seleccione Agregar y permita que Visual Studio cree una vista de plantilla. Reemplace el código del archivo generado por el siguiente contenido:

   @model todo.Models.Item
   
   @{
       ViewBag.Title = "Create";
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
   
   <h2>Create a new To-Do Item</h2>
   
   
   @using (Html.BeginForm()) 
   {
       @Html.AntiForgeryToken()
       
       <div class="form-horizontal">
           <hr />
           @Html.ValidationSummary(true, "", new { @class = "text-danger" })
           <div class="form-group">
               @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                   @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
               </div>
           </div>
   
           <div class="form-group">
               @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                   @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
               </div>
           </div>
   
           <div class="form-group">
               @Html.LabelFor(model => model.Completed, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   <div class="checkbox">
                       @Html.EditorFor(model => model.Completed)
                       @Html.ValidationMessageFor(model => model.Completed, "", new { @class = "text-danger" })
                   </div>
               </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>
   }
   
   <div>
       @Html.ActionLink("Back to List", "Index")
   </div>
   <script src="~/bundles/jqueryval"></script>
   

Vista Eliminar elemento

1. En el Explorador de soluciones, vuelva a hacer clic con el botón derecho en la carpeta Item y seleccione Agregar > Vista.

2. En Agregar vista MVC, realice los cambios siguientes:

   • En el cuadro Nombre de vista, escriba Delete (Eliminar).
   • En el cuadro Plantilla, seleccione Delete (Eliminar).
   • En el cuadro Clase de modelo, seleccione Elemento (todo.Models) .
   • Seleccione Usar una página de diseño y escriba ~/Views/Shared/_Layout.cshtml.
   • Seleccione Agregar.

3. Después, seleccione Agregar y permita que Visual Studio cree una vista de plantilla. Reemplace el código del archivo generado por el siguiente contenido:

   @model todo.Models.Item
   
   @{
       ViewBag.Title = "Delete";
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
   
   <h2>Delete a To-Do Item</h2>
   
   <h3>Are you sure you want to delete this?</h3>
   <div>
       <hr />
       <dl class="dl-horizontal">
           <dt>
               @Html.DisplayNameFor(model => model.Name)
           </dt>
   
           <dd>
               @Html.DisplayFor(model => model.Name)
           </dd>
   
           <dt>
               @Html.DisplayNameFor(model => model.Description)
           </dt>
   
           <dd>
               @Html.DisplayFor(model => model.Description)
           </dd>
   
           <dt>
               @Html.DisplayNameFor(model => model.Completed)
           </dt>
   
           <dd>
               @Html.DisplayFor(model => model.Completed)
           </dd>
       </dl>
   
       @using (Html.BeginForm()) {
           @Html.AntiForgeryToken()
   
           <div class="form-actions no-color">
               <input type="submit" value="Delete" class="btn btn-default" /> |
               @Html.ActionLink("Back to List", "Index")
           </div>
       }
   </div>
   

Adición de una vista para obtener los detalles de un elemento

1. En el Explorador de soluciones, vuelva a hacer clic con el botón derecho en la carpeta Item y seleccione Agregar > Vista.

2. En Agregar vista MVC, proporcione los siguientes valores:

   • En Nombre de la vista, escriba Details (Detalles).
   • En Plantilla, seleccione Details (Detalles).
   • En Clase de modelo, seleccione Item (todo.Models) .
   • Seleccione Usar una página de diseño y escriba ~/Views/Shared/_Layout.cshtml.

3. Después, seleccione Agregar y permita que Visual Studio cree una vista de plantilla. Reemplace el código del archivo generado por el siguiente contenido:

   @model todo.Models.Item
   
   <h2>View To-Do Item Details</h2>
   
   <div>
       <h4>Item</h4>
       <hr />
       <dl class="dl-horizontal">
           <dt>
               @Html.DisplayNameFor(model => model.Name)
           </dt>
   
           <dd>
               @Html.DisplayFor(model => model.Name)
           </dd>
   
           <dt>
               @Html.DisplayNameFor(model => model.Description)
           </dt>
   
           <dd>
               @Html.DisplayFor(model => model.Description)
           </dd>
   
           <dt>
               @Html.DisplayNameFor(model => model.Completed)
           </dt>
   
           <dd>
               @Html.DisplayFor(model => model.Completed)
           </dd>
   
       </dl>
   </div>
   <p>
       @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |
       @Html.ActionLink("Back to List", "Index")
   </p>
   

Agregar una vista de edición de elementos

1. En el Explorador de soluciones, vuelva a hacer clic con el botón derecho en la carpeta Item y seleccione Agregar > Vista.

2. En Agregar vista MVC, realice los cambios siguientes:

   • En el cuadro Nombre de vista, escriba Editar.
   • En el cuadro Plantilla, seleccione Editar.
   • En el cuadro Clase de modelo, seleccione Elemento (todo.Models) .
   • Seleccione Usar una página de diseño y escriba ~/Views/Shared/_Layout.cshtml.
   • Seleccione Agregar.

3. Después, seleccione Agregar y permita que Visual Studio cree una vista de plantilla. Reemplace el código del archivo generado por el siguiente contenido:

   @model todo.Models.Item
   
   <h2>Edit a To-Do Item</h2>
   
   @using (Html.BeginForm())
   {
       @Html.AntiForgeryToken()
       
       <div class="form-horizontal">
           <h4>Item</h4>
           <hr />
           @Html.ValidationSummary(true, "", new { @class = "text-danger" })
           @Html.HiddenFor(model => model.Id)
   
           <div class="form-group">
               @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                   @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
               </div>
           </div>
   
           <div class="form-group">
               @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                   @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
               </div>
           </div>
   
           <div class="form-group">
               @Html.LabelFor(model => model.Completed, htmlAttributes: new { @class = "control-label col-md-2" })
               <div class="col-md-10">
                   <div class="checkbox">
                       @Html.EditorFor(model => model.Completed)
                       @Html.ValidationMessageFor(model => model.Completed, "", new { @class = "text-danger" })
                   </div>
               </div>
           </div>
   
           <div class="form-group">
               <div class="col-md-offset-2 col-md-10">
                   <input type="submit" value="Save" class="btn btn-default" />
               </div>
           </div>
       </div>
   }
   
   <div>
       @Html.ActionLink("Back to List", "Index")
   </div>
   
   <script src="~/bundles/jqueryval"></script>
   

Adición de una vista para enumerar todos los elementos

Y, por último, agregue una vista para obtener todos los elementos con los pasos siguientes:

1. En el Explorador de soluciones, vuelva a hacer clic con el botón derecho en la carpeta Item y seleccione Agregar > Vista.

2. En Agregar vista MVC, realice los cambios siguientes:

   • En el cuadro Nombre de vista, escriba Índice.
   • En el cuadro Plantilla, seleccione Lista.
   • En el cuadro Clase de modelo, seleccione Elemento (todo.Models) .
   • Seleccione Usar una página de diseño y escriba ~/Views/Shared/_Layout.cshtml.
   • Seleccione Agregar.

3. Después, seleccione Agregar y permita que Visual Studio cree una vista de plantilla. Reemplace el código del archivo generado por el siguiente contenido:

   @model IEnumerable<todo.Models.Item>
   
   @{
       ViewBag.Title = "List of To-Do Items";
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
   
   <h2>List of To-Do Items</h2>
   
   <table class="table">
       <tr>
           <th>
               @Html.DisplayNameFor(model => model.Name)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.Description)
           </th>
           <th>
               @Html.DisplayNameFor(model => model.Completed)
           </th>
           <th></th>
       </tr>
   
   @foreach (var item in Model) {
       <tr>
           <td>
               @Html.DisplayFor(modelItem => item.Name)
           </td>
           <td>
               @Html.DisplayFor(modelItem => item.Description)
           </td>
           <td>
               @Html.DisplayFor(modelItem => item.Completed)
           </td>
           <td>
               @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
               @Html.ActionLink("Details", "Details", new { id=item.Id }) |
               @Html.ActionLink("Delete", "Delete", new { id=item.Id })
           </td>
       </tr>
   }
   
   </table>
   
   <p>
       @Html.ActionLink("Create New", "Create")
   </p>
   

Una vez hecho esto, cierre todos los documentos cshtml en Visual Studio.

Declaración e inicialización de servicios

Primero, vamos a agregar una clase que contenga la lógica para conectarse a Azure Cosmos DB y usarlo. En este tutorial, se encapsulará esta lógica en una clase llamada CosmosDbService y una interfaz llamada ICosmosDbService. Este servicio realiza las operaciones CRUD. También realiza las operaciones de fuente de lectura, como enumeración de elementos incompletos y creación, edición y eliminación de los elementos.

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Agregar > Nueva carpeta. Asigne a la carpeta el nombre Services.

2. Haga clic con el botón derecho en la carpeta Services y seleccione Agregar > Clase. Asigne a la nueva clase el nombre CosmosDbService y seleccione Agregar.

3. Reemplace el contenido de CosmosDbService.cs por el código siguiente:

   namespace todo
   {
       using System.Collections.Generic;
       using System.Linq;
       using System.Threading.Tasks;
       using todo.Models;
       using Microsoft.Azure.Cosmos;
       using Microsoft.Azure.Cosmos.Fluent;
       using Microsoft.Extensions.Configuration;
   
       public class CosmosDbService : ICosmosDbService
       {
           private Container _container;
   
           public CosmosDbService(
               CosmosClient dbClient,
               string databaseName,
               string containerName)
           {
               this._container = dbClient.GetContainer(databaseName, containerName);
           }
           
           public async Task AddItemAsync(Item item)
           {
               await this._container.CreateItemAsync<Item>(item, new PartitionKey(item.Id));
           }
   
           public async Task DeleteItemAsync(string id)
           {
               await this._container.DeleteItemAsync<Item>(id, new PartitionKey(id));
           }
   
           public async Task<Item> GetItemAsync(string id)
           {
               try
               {
                   ItemResponse<Item> response = await this._container.ReadItemAsync<Item>(id, new PartitionKey(id));
                   return response.Resource;
               }
               catch(CosmosException ex) when (ex.StatusCode == System.Net.HttpStatusCode.NotFound)
               { 
                   return null;
               }
   
           }
   
           public async Task<IEnumerable<Item>> GetItemsAsync(string queryString)
           {
               var query = this._container.GetItemQueryIterator<Item>(new QueryDefinition(queryString));
               List<Item> results = new List<Item>();
               while (query.HasMoreResults)
               {
                   var response = await query.ReadNextAsync();
                   
                   results.AddRange(response.ToList());
               }
   
               return results;
           }
   
           public async Task UpdateItemAsync(string id, Item item)
           {
               await this._container.UpsertItemAsync<Item>(item, new PartitionKey(id));
           }
       }
   }
   

4. Haga clic con el botón derecho en la carpeta Services y seleccione Agregar > Clase. Asigne a la nueva clase el nombre ICosmosDbService y seleccione Agregar.

5. Agregue el código siguiente a clase ICosmosDbService:

   namespace todo
   {
       using System.Collections.Generic;
       using System.Threading.Tasks;
       using todo.Models;
   
       public interface ICosmosDbService
       {
           Task<IEnumerable<Item>> GetItemsAsync(string query);
           Task<Item> GetItemAsync(string id);
           Task AddItemAsync(Item item);
           Task UpdateItemAsync(string id, Item item);
           Task DeleteItemAsync(string id);
       }
   }
   

6. Abra el archivo Startup.cs en la solución y agregue el siguiente método InitializeCosmosClientInstanceAsync, que lee la configuración e inicializa el cliente.

   /// <summary>
   /// Creates a Cosmos DB database and a container with the specified partition key. 
   /// </summary>
   /// <returns></returns>
   private static async Task<CosmosDbService> InitializeCosmosClientInstanceAsync(IConfigurationSection configurationSection)
   {
       string databaseName = configurationSection.GetSection("DatabaseName").Value;
       string containerName = configurationSection.GetSection("ContainerName").Value;
       string account = configurationSection.GetSection("Account").Value;
       string key = configurationSection.GetSection("Key").Value;
       Microsoft.Azure.Cosmos.CosmosClient client = new Microsoft.Azure.Cosmos.CosmosClient(account, key);
       CosmosDbService cosmosDbService = new CosmosDbService(client, databaseName, containerName);
       Microsoft.Azure.Cosmos.DatabaseResponse database = await client.CreateDatabaseIfNotExistsAsync(databaseName);
       await database.Database.CreateContainerIfNotExistsAsync(containerName, "/id");
   
       return cosmosDbService;
   }
   

7. En el mismo archivo, reemplace el método ConfigureServices por:

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddControllersWithViews();
       services.AddSingleton<ICosmosDbService>(InitializeCosmosClientInstanceAsync(Configuration.GetSection("CosmosDb")).GetAwaiter().GetResult());
   }
   

   El código de este paso inicializa el cliente en función de la configuración como una instancia singleton que se va a insertar mediante la inserción de dependencias en ASP.NET Core.

   Y asegúrese de cambiar el controlador MVC predeterminado a Item, editando las rutas en el método Configure del mismo archivo:

    app.UseEndpoints(endpoints =>
          {
                endpoints.MapControllerRoute(
                   name: "default",
                   pattern: "{controller=Item}/{action=Index}/{id?}");
          });
   

8. Defina la configuración en el archivo appsettings.json del proyecto, tal y como se muestra en el siguiente fragmento de código:

   {
     "Logging": {
       "LogLevel": {
         "Default": "Warning"
       }
     },
     "AllowedHosts": "*",
     "CosmosDb": {
       "Account": "<Endpoint URI of your Azure Cosmos account>",
       "Key": "<PRIMARY KEY of your Azure Cosmos account>",
       "DatabaseName": "Tasks",
       "ContainerName": "Item"
     }
   }
   

Adición de un controlador

1. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Controllers y seleccione Agregar > Controlador.

2. En Agregar scaffold, seleccione Controlador de MVC: en blanco y Agregar.

   

3. Asigne un nombre al nuevo controlador, ItemController.

4. Reemplace el contenido de ItemController.cs por el código siguiente:

   namespace todo.Controllers
   {
       using System;
       using System.Threading.Tasks;
       using Microsoft.AspNetCore.Mvc;
       using todo.Models;
   
       public class ItemController : Controller
       {
           private readonly ICosmosDbService _cosmosDbService;
           public ItemController(ICosmosDbService cosmosDbService)
           {
               _cosmosDbService = cosmosDbService;
           }
   
           [ActionName("Index")]
           public async Task<IActionResult> Index()
           {
               return View(await _cosmosDbService.GetItemsAsync("SELECT * FROM c"));
           }
   
           [ActionName("Create")]
           public IActionResult Create()
           {
               return View();
           }
   
           [HttpPost]
           [ActionName("Create")]
           [ValidateAntiForgeryToken]
           public async Task<ActionResult> CreateAsync([Bind("Id,Name,Description,Completed")] Item item)
           {
               if (ModelState.IsValid)
               {
                   item.Id = Guid.NewGuid().ToString();
                   await _cosmosDbService.AddItemAsync(item);
                   return RedirectToAction("Index");
               }
   
               return View(item);
           }
   
           [HttpPost]
           [ActionName("Edit")]
           [ValidateAntiForgeryToken]
           public async Task<ActionResult> EditAsync([Bind("Id,Name,Description,Completed")] Item item)
           {
               if (ModelState.IsValid)
               {
                   await _cosmosDbService.UpdateItemAsync(item.Id, item);
                   return RedirectToAction("Index");
               }
   
               return View(item);
           }
   
           [ActionName("Edit")]
           public async Task<ActionResult> EditAsync(string id)
           {
               if (id == null)
               {
                   return BadRequest();
               }
   
               Item item = await _cosmosDbService.GetItemAsync(id);
               if (item == null)
               {
                   return NotFound();
               }
   
               return View(item);
           }
   
           [ActionName("Delete")]
           public async Task<ActionResult> DeleteAsync(string id)
           {
               if (id == null)
               {
                   return BadRequest();
               }
   
               Item item = await _cosmosDbService.GetItemAsync(id);
               if (item == null)
               {
                   return NotFound();
               }
   
               return View(item);
           }
   
           [HttpPost]
           [ActionName("Delete")]
           [ValidateAntiForgeryToken]
           public async Task<ActionResult> DeleteConfirmedAsync([Bind("Id")] string id)
           {
               await _cosmosDbService.DeleteItemAsync(id);
               return RedirectToAction("Index");
           }
   
           [ActionName("Details")]
           public async Task<ActionResult> DetailsAsync(string id)
           {
               return View(await _cosmosDbService.GetItemAsync(id));
           }
       }
   }
   

El atributo ValidateAntiForgeryToken se usa aquí para ayudar a proteger esta aplicación frente a los ataques de falsificación de solicitud entre sitios. Las vistas funcionarán también con este token antifalsificación. Para obtener más información y ejemplos, vea Prevención de ataques de falsificación (CSRF) de solicitudes entre sitios en la aplicación ASP.NET MVC. El código de origen proporcionado en GitHub tiene la implementación completa en su lugar.

También se usa el atributo Bind en el parámetro de método para ayudar a proteger contra ataques de publicación en exceso. Para más información, consulte el Tutorial: Implementar la funcionalidad CRUD con Entity Framework en ASP.NET MVC.

Paso 5: Ejecución de la aplicación de forma local

Para probar la aplicación en el equipo local, siga estos pasos:

1. Presione F5 en Visual Studio para compilar la aplicación en modo de depuración. De esa forma, se debe compilar la aplicación e iniciar un explorador con la página de cuadrícula vacía que vimos anteriormente:

   

   Si en su lugar se abre la aplicación en la página principal, anexe /Item a la dirección URL.

2. Seleccione el vínculo Crear nuevo y agregue valores a los campos Nombre y Descripción. Deje desactivada la casilla Completado. Cuando está activada, la aplicación agrega el nuevo elemento en estado completado. El elemento no aparece en la lista inicial.

3. Seleccione Crear. La aplicación le devuelve a la vista Índice y el elemento aparece en la lista. Puede agregar unos cuantos elementos más a la lista To-Do (Tareas pendientes).

   

4. Seleccione Editar junto a un elemento de la lista. La aplicación abre la vista Edición, donde puede actualizar cualquier propiedad del objeto, incluida la marca Completado. Si selecciona Completado y selecciona Guardar, la aplicación muestra el elemento como completada en la lista.

   

5. Compruebe el estado de los datos en el servicio Azure Cosmos DB con Cosmos Explorer o el Explorador de datos del Emulador de Azure Cosmos DB.

6. Una vez que haya probado la aplicación, seleccione Ctrl+F5 para detener la depuración de la aplicación. Está listo para la implementación.

Paso 6: Implementación de la aplicación

Ahora que toda la aplicación funciona correctamente con Azure Cosmos DB, vamos a implementar esta aplicación web en Azure App Service.

1. Para publicar esta aplicación, haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Publicar.

2. En Elegir un destino de publicación, seleccione App Service.

3. Para usar un perfil de App Service existente, elija Seleccionar existente y, a continuación, seleccione Publicar.

4. En App Service, seleccione una Suscripción. Use el filtro Ver para ordenar por grupo de recursos o tipo de recurso.

5. Busque el perfil y seleccione Aceptar. A continuación, busque la instancia de Azure App Service necesaria y seleccione Aceptar.

   

Otra opción es crear un nuevo perfil:

1. Como en el procedimiento anterior, haga clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccione Publicar.

2. En Elegir un destino de publicación, seleccione App Service.

3. En Elegir un destino de publicación, seleccione Crear nuevo y seleccione Publicar.

4. En App Service, escriba el nombre de la aplicación web y la suscripción, el grupo de recursos y el plan de hospedaje adecuados y, luego, haga clic en Crear.

   

En unos segundos, Visual Studio publica la aplicación web e inicia un explorador donde puede ver su trabajo ejecutándose en Azure.

Pasos siguientes

En este tutorial, ha aprendido a crear una aplicación web MVC ASP.NET Core. La aplicación puede acceder a los datos almacenados en Azure Cosmos DB. Ahora puede continuar con estos recursos:

• Creación de particiones en Azure Cosmos DB
• Introducción a las consultas SQL
• Procedimientos para modelar y crear particiones de datos en Azure Cosmos DB mediante un ejemplo real
• ¿Intenta planear la capacidad de una migración a Azure Cosmos DB? Puede usar la información sobre el clúster de bases de datos existente para planear la capacidad.
  • Si lo único que sabe es el número de núcleos virtuales y servidores del clúster de bases de datos existente, lea sobre el cálculo de unidades de solicitud mediante núcleos o CPU virtuales.
  • Si conoce las tasas de solicitudes típicas de la carga de trabajo de la base de datos actual, obtenga información sobre el cálculo de unidades de solicitud mediante la herramienta de planeamiento de capacidad de Azure Cosmos DB.