Tutorial: Desenvolver um aplicativo Web ASP.NET Core MVC com o Azure Cosmos DB usando o SDK do .NETTutorial: Develop an ASP.NET Core MVC web application with Azure Cosmos DB by using .NET SDK

Este tutorial mostra a você como usar o Azure Cosmos DB para armazenar e acessar dados de um aplicativo Web ASP.NET MVC hospedado no Azure.This tutorial shows you how to use Azure Cosmos DB to store and access data from an ASP.NET MVC application that is hosted on Azure. Neste tutorial, você usará o SDK do .NET V3.In this tutorial, you use the .NET SDK V3. A imagem abaixo mostra a página da Web que você criará usando o exemplo neste artigo:The following image shows the web page that you will build by using the sample in this article:

Captura de tela do aplicativo Web MVC de tarefas pendentes criado por este tutorial – tutorial passo a passo do ASP.NET Core MVC

Se você não tiver tempo para concluir o tutorial, baixe o projeto de exemplo completo no GitHub.If you don't have time to complete the tutorial, you can download the complete sample project from GitHub.

Este tutorial abrange:This tutorial covers:

  • Como criar uma conta do Azure CosmosCreating an Azure Cosmos account
  • Como criar um aplicativo ASP.NET Core MVCCreating an ASP.NET Core MVC app
  • Como conectar o aplicativo ao Azure Cosmos DBConnecting the app to Azure Cosmos DB
  • Executar operações CRUD nos dadosPerform CRUD operations on the data

Dica

Este tutorial pressupõe que você tenha experiência anterior com o uso do ASP.NET Core MVC e o Serviço de Aplicativo do Azure.This tutorial assumes that you have prior experience using ASP.NET Core MVC and Azure App Service. Caso esteja conhecendo agora o ASP.NET Core ou as ferramentas de pré-requisito, recomendaremos que você baixe o projeto de exemplo completo no GitHub, adicione os pacotes NuGet necessários e execute-o.If you are new to ASP.NET Core or the prerequisite tools, we recommend you to download the complete sample project from GitHub, add the required NuGet packages and run it. Depois de compilar o projeto, você poderá consultar esse artigo para obter insights sobre o código no contexto do projeto.Once you build the project, you can review this article to gain insight on the code in the context of the project.

Pré-requisitosPrerequisites

Antes de seguir as instruções deste artigo, verifique se você tem os seguintes recursos:Before following the instructions in this article, ensure that you have the following resources:

Todas as capturas de tela deste artigo foram feitas usando o Microsoft Visual Studio Community 2019.All the screenshots in this article have been taken using Microsoft Visual Studio Community 2019. Se o seu sistema estiver configurado com uma versão diferente, suas telas e opções poderão não corresponder totalmente, mas se você cumprir os pré-requisitos acima, esta solução deverá funcionar.If your system is configured with a different version, it is possible that your screens and options may not match entirely, but if you meet the above prerequisites this solution should work.

Etapa 1: Criar uma conta do Azure CosmosStep 1: Create an Azure Cosmos account

Vamos começar criando uma conta do Azure Cosmos.Let's start by creating an Azure Cosmos account. Se você já tiver uma conta da API de SQL do Azure Cosmos DB, ou se estiver usando o emulador do Azure Cosmos DB para este tutorial, poderá avançar para a seção Criar um novo aplicativo ASP.NET MVC.If you already have an Azure Cosmos DB SQL API account or if you are using the Azure Cosmos DB emulator for this tutorial, you can skip to Create a new ASP.NET MVC application section.

  1. Entre no Portal do Azure.Sign in to the Azure portal.

  2. Selecione Criar um recurso > Bancos de dados > Azure Cosmos DB.Select Create a resource > Databases > Azure Cosmos DB.

    O painel Bancos de Dados do portal do Azure

  3. Na página Criar Conta do Azure Cosmos DB, insira as configurações básicas da nova conta do Azure Cosmos.On the Create Azure Cosmos DB Account page, enter the basic settings for the new Azure Cosmos account.

    ConfiguraçãoSetting ValorValue DESCRIÇÃODescription
    SubscriptionSubscription Nome da assinaturaSubscription name Selecione a assinatura do Azure que você deseja usar para essa conta do Azure Cosmos.Select the Azure subscription that you want to use for this Azure Cosmos account.
    Grupo de recursosResource Group Nome do grupo de recursosResource group name Selecione um grupo de recursos ou selecione Criar novo, então insira um nome exclusivo para o novo grupo de recursos.Select a resource group, or select Create new, then enter a unique name for the new resource group.
    Nome da contaAccount Name Insira um nome exclusivoEnter a unique name Insira um nome para identificar a conta do Azure Cosmos.Enter a name to identify your Azure Cosmos account. Como documents.Azure.com é acrescentado à ID que você fornece para criar o URI, use uma ID exclusiva.Because documents.azure.com is appended to the ID that you provide to create your URI, use a unique ID.

    A ID pode conter apenas letras minúsculas, números e o caractere de hífen (-).The ID can only contain lowercase letters, numbers, and the hyphen (-) character. Ela deve ter entre 3 e 31 caracteres.It must be between 3-31 characters in length.
    APIAPI Núcleo (SQL)Core (SQL) A API determina o tipo de conta a ser criada.The API determines the type of account to create. O Azure Cosmos DB fornece cinco APIs: Núcleo (SQL) e MongoDB para dados de documento, Gremlin para dados de grafo, Tabela do Azure e Cassandra.Azure Cosmos DB provides five APIs: Core (SQL) and MongoDB for document data, Gremlin for graph data, Azure Table, and Cassandra. No momento, você deve criar uma conta separada para cada API.Currently, you must create a separate account for each API.

    Selecione Núcleo (SQL) para criar uma consulta e um banco de dados de documento usando a sintaxe SQL.Select Core (SQL) to create a document database and query by using SQL syntax.

    Saiba mais sobre a API do SQL.Learn more about the SQL API.
    LocationLocation Selecione a região mais próxima de seus usuáriosSelect the region closest to your users Selecione uma localização geográfica para hospedar a sua conta do Azure Cosmos DB.Select a geographic location to host your Azure Cosmos DB account. Use a localização mais próxima dos usuários para fornecer a eles acesso mais rápido aos dados.Use the location that is closest to your users to give them the fastest access to the data.

    A página da nova conta do Azure Cosmos DB

  4. Selecione Examinar + criar.Select Review + create. Você pode ignorar as seções Rede e Marcas.You can skip the Network and Tags sections.

  5. Examine as configurações da conta e selecione Criar.Review the account settings, and then select Create. São necessários alguns minutos para criar a conta.It takes a few minutes to create the account. Aguarde até que a página do portal exiba Sua implantação está concluída.Wait for the portal page to display Your deployment is complete.

    O painel Notificações do portal do Azure

  6. Selecione Ir para recurso para ir para a página da conta do Azure Cosmos DB.Select Go to resource to go to the Azure Cosmos DB account page.

    A página da conta do Azure Cosmos DB

Agora, navegue até a página da conta do Azure Cosmos DB e clique em Chaves, pois esses valores serão no aplicativo Web que você criará em seguida.Now navigate to the Azure Cosmos DB account page, and click Keys, as these values are used in the web application you create next.

Captura de tela do Portal do Azure com o botão Chaves realçado na página de conta do Azure Cosmos DB

Na próxima seção, você criará um aplicativo ASP.NET Core MVC.In the next section, you create a new ASP.NET Core MVC application.

Etapa 2: Criar um aplicativo ASP.NET Core MVCStep 2: Create a new ASP.NET Core MVC application

  1. No Visual Studio, no menu Arquivo, selecione Novo e Projeto.In Visual Studio, from the File menu, choose New, and then select Project. A caixa de diálogo Novo Projeto aparecerá.The New Project dialog box appears.

  2. Na janela Novo Projeto, use a caixa de entrada Pesquisar modelos para pesquisar "Web" e, em seguida, selecione Aplicativo Web ASP.NET Core.In the New Project window, use the Search for templates input box to search for "Web", and then select ASP.NET Core Web Application.

    Criar um projeto de aplicativo Web ASP.NET Core

  3. Na caixa Nome , digite o nome do projeto.In the Name box, type the name of the project. Este tutorial usará o nome "todo".This tutorial uses the name "todo". Se você optar por usar outro nome, sempre que este tutorial mencionar o namespace de tarefas pendentes, ajuste os exemplos de código fornecidos para usar o nome do aplicativo.If you choose to use something other than this name, then wherever this tutorial talks about the todo namespace, adjust the provided code samples to use whatever you named your application.

  4. Selecione Procurar para navegar até a pasta na qual deseja criar o projeto.Select Browse to navigate to the folder where you would like to create the project. Selecione Criar.Select Create.

  5. A caixa de diálogo Criar um Aplicativo Web ASP.NET Core será exibida.The Create a new ASP.NET Core Web Application dialog box appears. Na lista de modelos, selecione Aplicativo Web (Model-View-Controller) .In the templates list, select Web Application (Model-View-Controller).

  6. Selecione Criar e deixe o Visual Studio fazer o scaffolding do modelo ASP.NET Core MVC vazio.Select Create and let Visual Studio do the scaffolding around the empty ASP.NET Core MVC template.

  7. Depois que o Visual Studio concluir a criação do aplicativo MVC de texto clichê, você terá um aplicativo ASP.NET vazio que poderá ser executado localmente.Once Visual Studio has finished creating the boilerplate MVC application, you have an empty ASP.NET application that you can run locally.

Etapa 3: Adicionar o pacote NuGet do Azure Cosmos DB ao projetoStep 3: Add Azure Cosmos DB NuGet package to the project

Agora que temos a maior parte do código da estrutura ASP.NET Core MVC de que precisamos para esta solução, vamos adicionar os pacotes NuGet necessários para a conexão com o Azure Cosmos DB.Now that we have most of the ASP.NET Core MVC framework code that we need for this solution, let's add the NuGet packages required to connect to Azure Cosmos DB.

  1. O SDK .NET do Azure Cosmos DB é empacotado e distribuído como um pacote do NuGet.The Azure Cosmos DB .NET SDK is packaged and distributed as a NuGet package. Para obter o pacote NuGet no Visual Studio, use o gerenciador de pacotes NuGet no Visual Studio clicando com o botão direito do mouse no projeto no Gerenciador de Soluções e selecionando Gerenciar Pacotes NuGet.To get the NuGet package in Visual Studio, use the NuGet package manager in Visual Studio by right-clicking on the project in Solution Explorer and then select Manage NuGet Packages.

    Captura de tela das opções acessadas ao clicar com o botão direito do mouse para o projeto de aplicativo Web no Gerenciador de Soluções, com Gerenciar Pacotes NuGet realçado.

  2. A caixa de diálogo Gerenciar Pacotes NuGet será exibida.The Manage NuGet Packages dialog box appears. Na caixa Procurar do NuGet, digite Microsoft.Azure.Cosmos.In the NuGet Browse box, type Microsoft.Azure.Cosmos. Com base nos resultados, instale o pacote Microsoft.Azure.Cosmos.From the results, install the Microsoft.Azure.Cosmos package. Ele baixará e instalará o pacote do Azure Cosmos DB e suas dependências.It downloads and installs the Azure Cosmos DB package and its dependencies. Selecione Aceito na janela Aceitação da Licença para concluir a instalação.Select I Accept in the License Acceptance window to complete the installation.

    Como alternativa, você pode usar o Console do Gerenciador de Pacotes para instalar o pacote NuGet.Alternatively, you can use the Package Manager Console to install the NuGet package. Para isso, no menu Ferramentas, selecione Gerenciador de Pacotes NuGet e Console do Gerenciador de Pacotes.To do so, on the Tools menu, select NuGet Package Manager, and then select Package Manager Console. No prompt, digite o seguinte comando:At the prompt, type the following command:

    Install-Package Microsoft.Azure.Cosmos
    
  3. Depois que o pacote for instalado, o projeto do Visual Studio deverá conter a referência de biblioteca para Microsoft.Azure.Cosmos.After the package is installed, your Visual Studio project should contain the library reference to Microsoft.Azure.Cosmos.

Etapa 4: Configurar o aplicativo ASP.NET Core MVCStep 4: Set up the ASP.NET Core MVC application

Agora vamos adicionar os modelos, as exibições e os controladores ao aplicativo MVC:Now let's add the models, the views, and the controllers to this MVC application:

Adicionar um modeloAdd a model

  1. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Modelos, selecione Adicionar e Classe.From the Solution Explorer, right-click the Models folder, select Add, and then select Class. A caixa de diálogo Adicionar Novo Item aparecerá.The Add New Item dialog box appears.

  2. Nomeie a nova classe Item.cs e selecione Adicionar.Name your new class Item.cs and select Add.

  3. Em seguida, substitua o código na classe "Item.cs" pelo seguinte código:Next replace the code in "Item.cs" class with the following code:

    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; }
        }
    }
    

    Os dados armazenados no Azure Cosmos DB são transferidos e armazenados como JSON.The data stored in Azure Cosmos DB is passed over the wire and stored as JSON. Para controlar a forma como os objetos são serializados/desserializados pelo JSON.NET, use o atributo JsonProperty, como demonstrado na classe Item criada.To control the way your objects are serialized/deserialized by JSON.NET, you can use the JsonProperty attribute as demonstrated in the Item class you created. Além de poder controlar o formato do nome da propriedade inserido no JSON, você também pode renomear as propriedades do .NET, como fez com a propriedade Concluído.Not only can you control the format of the property name that goes into JSON, you can also rename your .NET properties like you did with the Completed property.

Adicionar um controladorAdd a controller

  1. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Controladores, selecione Adicionar e Controlador.From the Solution Explorer, right-click the Controllers folder, select Add, and then select Controller. A caixa de diálogo Adicionar Scaffold aparecerá.The Add Scaffold dialog box appears.

  2. Selecione Controlador MVC – Vazio e Adicionar.Select MVC Controller - Empty and select Add.

    Captura de tela da caixa de diálogo Adicionar Scaffold com a opção Controlador MVC – Vazio realçada

  3. Nomeie o novo controlador, ItemController, e substitua o código nesse arquivo pelo seguinte código:Name your new controller, ItemController, and replace the code in that file with the following code:

    namespace todo.Controllers
    {
        using System;
        using System.Threading.Tasks;
        using todo.Services;
        using Microsoft.AspNetCore.Mvc;
        using 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));
            }
        }
    }
    

    O atributo ValidateAntiForgeryToken é usado aqui para ajudar a proteger esse aplicativo contra ataques de solicitação intersite forjada.The ValidateAntiForgeryToken attribute is used here to help protect this application against cross-site request forgery attacks. Isso envolve mais do que apenas adicionar esse atributo, pois as exibições também precisam trabalhar com esse token antifalsificação.There is more to it than just adding this attribute, your views should work with this anti-forgery token as well. Para saber mais sobre o assunto e ver exemplos de como implementar isso corretamente, confira Impedir solicitação intersite forjada.For more on the subject, and examples of how to implement this correctly, see Preventing Cross-Site Request Forgery. O código-fonte fornecido no GitHub tem a implementação completa estabelecida.The source code provided on GitHub has the full implementation in place.

    Também usamos o atributo Bind no parâmetro de método para ajudar na proteção contra ataques overposting.We also use the Bind attribute on the method parameter to help protect against over-posting attacks. Para obter mais detalhes, confira Operações CRUD básicas no ASP.NET MVC.For more details, please see Basic CRUD Operations in ASP.NET MVC.

Adicionar exibiçõesAdd views

Em seguida, vamos criar as três exibições abaixo:Next, let's create the following three views:

Adicionar uma exibição de item de listaAdd a list item view

  1. No Gerenciador de Soluções, expanda a pasta Exibições, clique com o botão direito do mouse na pasta vazia Item que o Visual Studio criou quando você adicionou ItemController anteriormente, clique em Adicionar e em Exibição.In Solution Explorer, expand the Views folder, right-click the empty Item folder that Visual Studio created for you when you added the ItemController earlier, click Add, and then click View.

    Captura de tela do Gerenciador de Soluções mostrando a pasta Item que o Visual Studio criou com os comandos Adicionar Exibição realçados

  2. Na caixa de diálogo Adicionar Exibição, atualize os seguintes valores:In the Add View dialog box, update the following values:

    • Na caixa Nome da exibição, digite Índice.In the View name box, type Index.
    • Na caixa Modelo, selecione Lista.In the Template box, select List.
    • Na caixa Classe de modelo, selecione Item (todo.Models).In the Model class box, select Item (todo.Models).
    • Na caixa da página de layout, digite ~/Views/Shared/_Layout.cshtml.In the layout page box, type ~/Views/Shared/_Layout.cshtml.

    Captura de tela mostrando a caixa de diálogo Adicionar Exibição

  3. Depois de definir todos esses valores, selecione Adicionar e deixe o Visual Studio criar uma nova exibição de modelo.After you add these values, select Add and let Visual Studio create a new template view. Quando terminar, ele abrirá o arquivo cshtml criado.Once done, it opens the cshtml file that is created. Você pode fechar esse arquivo no Visual Studio, pois voltará a ele mais tarde.You can close that file in Visual Studio as you will come back to it later.

Adicionar uma nova exibição de itemAdd a new item view

Da mesma forma que você criou uma exibição para itens de lista, crie uma nova exibição para criar itens usando as seguintes etapas:Similar to how you created a view to list items, create a new view to create items by using the following steps:

  1. No Gerenciador de Soluções, clique com botão direito do mouse na pasta Item novamente, selecione Adicionare selecione Exibição.From the Solution Explorer, right-click the Item folder again, select Add, and then select View.

  2. Na caixa de diálogo Adicionar Exibição, atualize os seguintes valores:In the Add View dialog box, update the following values:

    • Na caixa Nome da exibição, digite Criar.In the View name box, type Create.
    • Na caixa Modelo, selecione Criar.In the Template box, select Create.
    • Na caixa Classe de modelo, selecione Item (todo.Models).In the Model class box, select Item (todo.Models).
    • Na caixa da página de layout, digite ~/Views/Shared/_Layout.cshtml.In the layout page box, type ~/Views/Shared/_Layout.cshtml.
    • Selecione Adicionar.Select Add.

Adicionar uma exibição Editar itemAdd an edit item view

E, finalmente, adicione um modo de exibição para editar um item com as seguintes etapas:And finally, add a view to edit an item with the following steps:

  1. No Gerenciador de Soluções, clique com botão direito do mouse na pasta Item novamente, selecione Adicionare selecione Exibição.From the Solution Explorer, right-click the Item folder again, select Add, and then select View.

  2. Na caixa de diálogo Adicionar Exibição , faça o seguinte:In the Add View dialog box, do the following:

    • Na caixa Nome da exibição, digite Editar.In the View name box, type Edit.
    • Na caixa Modelo, selecione Editar.In the Template box, select Edit.
    • Na caixa Classe de modelo, selecione Item (todo.Models).In the Model class box, select Item (todo.Models).
    • Na caixa da página de layout, digite ~/Views/Shared/_Layout.cshtml.In the layout page box, type ~/Views/Shared/_Layout.cshtml.
    • Selecione Adicionar.Select Add.

Feito isso, feche todos os documentos cshtml no Visual Studio, já que você voltará a essas exibições mais tarde.Once this is done, close all the cshtml documents in Visual Studio as you return to these views later.

Etapa 5: Conectar-se ao Azure Cosmos DBStep 5: Connect to Azure Cosmos DB

Agora que os detalhes padrão do MVC foram resolvidos, vamos adicionar o código para conexão com o Azure Cosmos DB e executar operações CRUD.Now that the standard MVC stuff is taken care of, let's turn to adding the code to connect to Azure Cosmos DB and perform CRUD operations.

Executar operações CRUD nos dadosPerform CRUD operations on the data

A primeira coisa a fazer aqui é adicionar uma classe que contenha a lógica para conectar e usar o Azure Cosmos DB.The first thing to do here is add a class that contains the logic to connect to and use Azure Cosmos DB. Para este tutorial, encapsularemos essa lógica em uma classe chamada CosmosDBService e uma interface chamada ICosmosDBService.For this tutorial, we'll encapsulate this logic into a class called CosmosDBService and an interface called ICosmosDBService. Esse serviço executa as operações CRUD e de feed de leitura, como listar itens incompletos, criar, editar e excluir os itens.This service performs the CRUD and read feed operations such as listing incomplete items, creating, editing, and deleting the items.

  1. No Gerenciador de Soluções, crie uma nova pasta em seu projeto chamada Serviços.From Solution Explorer, create a new folder under your project named Services.

  2. Clique com o botão direito do mouse na pasta Serviços, selecione Adicionar e selecione Classe.Right-click the Services folder, select Add, and then select Class. Nomeie a nova classe CosmosDBService e selecione Adicionar.Name the new class CosmosDBService and select Add.

  3. Adicione o seguinte código à classe CosmosDBService e substitua o código no arquivo pelo seguinte código:Add the following code to the CosmosDBService class and replace the code in that file with the following code:

    namespace todo.Services
    {
        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)
            {
                ItemResponse<Item> response = await this._container.ReadItemAsync<Item>(id, new PartitionKey(id));
                if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
                {
                    return null;
                }
    
                return response.Resource;
            }
    
            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. Repita as etapas 2 e 3, mas, desta vez, para uma classe chamada ICosmosDBService, e adicione o seguinte código:Repeat steps 2-3, but this time, for a class named ICosmosDBService, and add the following code:

    namespace todo.Services
    {
        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);
        }
    }
    
  5. O código anterior recebe um CosmosClient como parte do construtor.The previous code receives a CosmosClient as part of the constructor. Seguindo o pipeline do ASP.NET Core, precisamos acessar o Startup.cs do projeto e inicializar o cliente com base na configuração como uma instância singleton a ser injetada por meio da injeção de dependência.Following ASP.NET Core pipeline, we need to go to the project's Startup.cs and initialize the client based on the configuration as a Singleton instance to be injected through Dependency Injection. No manipulador ConfigureServices, definimos:In the ConfigureServices handler, we define:

    services.AddSingleton<ICosmosDbService>(InitializeCosmosClientInstanceAsync(Configuration.GetSection("CosmosDb")).GetAwaiter().GetResult());
    
  6. No mesmo arquivo, definimos nosso método auxiliar InitializeCosmosClientInstanceAsync, que lerá a configuração e inicializará o cliente.Within the same file, we define our helper method InitializeCosmosClientInstanceAsync, which will read the configuration and initialize the client.

    /// <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;
        CosmosClientBuilder clientBuilder = new CosmosClientBuilder(account, key);
        CosmosClient client = clientBuilder
                            .WithConnectionModeDirect()
                            .Build();
        CosmosDbService cosmosDbService = new CosmosDbService(client, databaseName, containerName);
        DatabaseResponse database = await client.CreateDatabaseIfNotExistsAsync(databaseName);
        await database.Database.CreateContainerIfNotExistsAsync(containerName, "/id");
    
        return cosmosDbService;
    }
    
  7. A configuração é definida no arquivo appsettings.json do projeto.The configuration is defined in the project's appsettings.json file. Abra-o e adicione uma seção chamada CosmosDb:Open it and add a section called CosmosDb:

      "CosmosDb": {
         "Account": "<enter the URI from the Keys blade of the Azure Portal>",
         "Key": "<enter the PRIMARY KEY, or the SECONDARY KEY, from the Keys blade of the Azure  Portal>",
         "DatabaseName": "Tasks",
         "ContainerName": "Items"
       }
    

Agora se você executar o aplicativo, o pipeline do ASP.NET Core criará uma instância de CosmosDbService e manterá uma única instância como singleton; quando o ItemController for usado para processar as solicitações do lado do cliente, ele receberá essa única instância e poderá usá-la para executar operações CRUD.Now if you run the application, ASP.NET Core's pipeline will instantiate CosmosDbService and maintain a single instance as Singleton; when ItemController is used to process client side requests, it will receive this single instance and be able to use it to perform CRUD operations.

Se você criar e executar esse projeto agora, deverá ver algo parecido com isto:If you build and run this project now, you should now see something that looks like this:

Captura de tela do aplicativo Web de lista de tarefas pendentes criado por este tutorial de banco de dados

Etapa 6: Executar o aplicativo localmenteStep 6: Run the application locally

Use as etapas abaixo para testar o aplicativo em seu computador local:To test the application on your local machine, use the following steps:

  1. Pressione F5 no Visual Studio para compilar o aplicativo no modo de depuração.Press F5 in Visual Studio to build the application in debug mode. Ele deve compilar o aplicativo e iniciar um navegador com a página de grade vazia que vimos anteriormente:It should build the application and launch a browser with the empty grid page we saw before:

    Captura de tela do aplicativo Web de lista de tarefas pendentes criado por este tutorial

  2. Clique no link Criar Novo e adicione valores ao campos Nome e Descrição.Click the Create New link and add values to the Name and Description fields. Deixe a caixa de seleção Concluído desmarcada. Caso contrário, o novo item será adicionado em um estado concluído e não aparecerá na lista inicial.Leave the Completed check box unselected otherwise the new item is added in a completed state and doesn't appear on the initial list.

  3. Clique em Criar para ser redirecionado à exibição Índice e ver seu item na lista.Click Create and you are redirected back to the Index view and your item appears in the list. Você pode adicionar mais alguns itens à lista de tarefas pendentes.You can add a few more items to your todo list.

    Captura de tela da exibição Índice

  4. Clique em Editar perto de um Item na lista e você será levado para a exibição Editar, na qual poderá atualizar qualquer propriedade do objeto, incluindo o sinalizador Concluído.Click Edit next to an Item on the list and you are taken to the Edit view where you can update any property of your object, including the Completed flag. Se você marcar o sinalizador Concluído e clicar em Salvar, o Item será exibido como concluído na lista.If you mark the Complete flag and click Save, the Item will be displayed as completed in the list.

    Captura de tela da exibição Índice com a caixa Concluído marcada

  5. Verifique a qualquer momento o estado dos dados no serviço Azure Cosmos DB usando o Cosmos Explorer ou o Data Explorer do Emulador do Azure Cosmos DB.You can verify at any point the state of the data in the Azure Cosmos DB service using Cosmos Explorer or the Azure Cosmos DB Emulator's Data Explorer.

  6. Depois de testar o aplicativo, pressione Ctrl + F5 para parar a depuração do aplicativo.Once you've tested the app, press Ctrl+F5 to stop debugging the app. Você está pronto para implantar!You're ready to deploy!

Etapa 7: Implantar o aplicativoStep 7: Deploy the application

Agora que você tem o aplicativo completo funcionando corretamente no Azure Cosmos DB, vamos implantar esse aplicativo Web no Serviço de Aplicativo do Azure.Now that you have the complete application working correctly with Azure Cosmos DB we're going to deploy this web app to Azure App Service.

  1. Para publicar o aplicativo, clique com botão direito do mouse no projeto no Gerenciador de Soluções e selecione Publicar.To publish this application, right-click on the project in Solution Explorer and select Publish.

  2. Na caixa de diálogo Publicar, selecione Serviço de Aplicativo e, em seguida, selecione Criar para criar um perfil do Serviço de Aplicativo ou escolha Selecionar Existente para usar um perfil existente.In the Publish dialog box, select App Service, then select Create New to create an App Service profile, or choose Select Existing to use an existing profile.

  3. Se você tiver um perfil existente do Serviço de Aplicativo do Azure, selecione uma Assinatura na lista suspensa.If you have an existing Azure App Service profile, select a Subscription from the dropdown. Use o filtro Exibição para classificar por tipo de recurso ou grupo de recursos.Use the View filter to sort by resource group or resource type. Em seguida, pesquise o Serviço de Aplicativo do Azure necessário e selecione OK.Next search the required Azure App Service and select OK.

    Caixa de diálogo Serviço de Aplicativo no Visual Studio

  4. Para criar um novo perfil do Serviço de Aplicativo do Azure, clique em Criar Novo na caixa de diálogo Publicar.To create a new Azure App Service profile, click Create New in the Publish dialog box. Na caixa de diálogo Criar Serviço de Aplicativo, digite seu nome do aplicativo Web e a assinatura apropriada, o grupo de recursos e o plano de Serviço de Aplicativo e selecione Criar.In the Create App Service dialog, enter your Web App name and the appropriate subscription, resource group, and App Service plan, then select Create.

    Caixa de diálogo Criar Serviço de Aplicativo no Visual Studio

Em poucos segundos, o Visual Studio publicará seu aplicativo Web e iniciará um navegador no qual você poderá ver o projeto sendo executado no Azure.In a few seconds, Visual Studio publishes your web application and launches a browser where you can see your project running in Azure!

Próximas etapasNext steps

Neste tutorial, você aprendeu a criar um aplicativo Web ASP.NET Core MVC que pode acessar os dados armazenados no Azure Cosmos DB.In this tutorial, you've learned how to build an ASP.NET Core MVC web application that can access data stored in Azure Cosmos DB. Prossiga agora para o próximo artigo:You can now proceed to the next article: