Tutorial: Desenvolver um aplicativo Web ASP.NET Core MVC com 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-lhe como utilizar o Azure Cosmos DB para armazenar e aceder a dados a partir de uma aplicação ASP.NET MVC alojada 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ê usa o SDK do .NET v3.In this tutorial, you use the .NET SDK V3. A imagem seguinte mostra a página da web que criará utilizando 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 da lista de tarefas criada por este tutorial-passo a passo do tutorial do ASP.NET Core MVC

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

Este tutorial aborda:This tutorial covers:

  • Criar uma conta do Cosmos do AzureCreating an Azure Cosmos account
  • Criando um aplicativo MVC ASP.NET CoreCreating an ASP.NET Core MVC app
  • Ligar a aplicação ao Azure Cosmos DBConnecting the app to Azure Cosmos DB
  • Execute as operações CRUD nos dadosPerform CRUD operations on the data

Dica

Este tutorial pressupõe que você tenha experiência anterior com o ASP.NET Core MVC e Azure App Service.This tutorial assumes that you have prior experience using ASP.NET Core MVC and Azure App Service. Se você for novo no ASP.NET Core ou nas ferramentas de pré-requisito, recomendamos baixar o projeto de exemplo completo do GitHub, adicionar os pacotes NuGet necessários e executá-lo.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, pode rever este artigo para obter conhecimentos aprofundados 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, certifique-se de que tem os seguintes recursos:Before following the instructions in this article, ensure that you have the following resources:

Todas as capturas de tela neste artigo foram tiradas usando Microsoft Visual Studio Community 2019.All the screenshots in this article have been taken using Microsoft Visual Studio Community 2019. Se o sistema estiver configurado com uma versão diferente, é possível que suas opções e ecrãs podem não coincidam na totalidade, mas se cumpre 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 por criar uma conta do Cosmos do Azure.Let's start by creating an Azure Cosmos account. Se já tiver uma conta do Azure Cosmos DB SQL API ou se estiver a utilizar o emulador do Azure Cosmos DB para este tutorial, pode avançar para criar uma nova aplicação ASP.NET MVC secção.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. Inicie sessão no portal do Azure.Sign in to the Azure portal.

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

    O painel da base de dados do portal do Azure

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

    DefiniçãoSetting ValorValue DescriçãoDescription
    SubscriptionSubscription Nome da subscriçãoSubscription name Selecione a assinatura do Azure que você deseja usar para esta 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 novoe 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 Introduza um nome exclusivoEnter a unique name Insira um nome para identificar sua conta do Azure Cosmos.Enter a name to identify your Azure Cosmos account. Uma vez que documents.azure.com é anexado ao ID que indicar para criar o seu URI, utilize um ID exclusivo.Because documents.azure.com is appended to the ID that you provide to create your URI, use a unique ID.

    A ID só pode conter letras minúsculas, números e o caractere de hífen (-).The ID can only contain lowercase letters, numbers, and the hyphen (-) character. Deve ter entre 3-31 caracteres de comprimento.It must be between 3-31 characters in length.
    APIAPI Núcleo (SQL)Core (SQL) A API determina o tipo de conta a criar.The API determines the type of account to create. O Azure Cosmos DB fornece cinco APIs: Core (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. Atualmente, tem de criar uma conta separada para cada API.Currently, you must create a separate account for each API.

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

    Saiba mais sobre a API de SQL.Learn more about the SQL API.
    LocalizaçãoLocation Selecione a região mais próxima dos seus utilizadoresSelect the region closest to your users Selecione a localização geográfica para alojar a sua conta do Azure Cosmos DB.Select a geographic location to host your Azure Cosmos DB account. Use o local mais próximo de seus usuários para dar a eles o 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 Rever + criar.Select Review + create. Você pode ignorar as seções de rede e marcas .You can skip the Network and Tags sections.

  5. Examine as configurações da conta e, em seguida, selecione criar.Review the account settings, and then select Create. Leva 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 esteja concluída.Wait for the portal page to display Your deployment is complete.

    O painel de Notificações de portal do Azure

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

    A página da conta Azure Cosmos DB

Navegue agora até à página da conta do Azure Cosmos DB e clique em Chaves, uma vez que estes valores serão utilizados na aplicação Web que vai criar a seguir.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 da portal do Azure com o botão chaves realçado na página da conta Azure Cosmos DB

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

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

  1. No Visual Studio, do arquivo menu, escolha Newe, em seguida, selecione projeto.In Visual Studio, from the File menu, choose New, and then select Project. Aparece a caixa de diálogo Novo Projeto.The New Project dialog box appears.

  2. Na janela novo projeto , use a caixa de entrada Pesquisar modelos para procurar "Web" e, em seguida, selecione ASP.NET Core aplicativo Web.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 novo projeto de aplicativo Web ASP.NET Core

  3. Na caixa Nome, escreva o nome do projeto.In the Name box, type the name of the project. Este tutorial utiliza o nome “todo” (tarefas).This tutorial uses the name "todo". Se você optar por usar algo diferente desse nome, sempre que este tutorial falar sobre o namespace de todo, ajuste os exemplos de código fornecidos para usar o que você tiver nomeado para seu 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 onde você gostaria de 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 novo aplicativo Web ASP.NET Core é exibida.The Create a new ASP.NET Core Web Application dialog box appears. Na lista modelos, selecione aplicativo Web (Model-View-Controller) .In the templates list, select Web Application (Model-View-Controller).

  6. Selecione criar e deixe que o Visual Studio faça o scaffolding em relação ao modelo ASP.NET Core MVC vazio.Select Create and let Visual Studio do the scaffolding around the empty ASP.NET Core MVC template.

  7. Assim que o Visual Studio tenha terminado de criar a aplicação MVC de texto clichê, terá uma aplicação ASP.NET vazia que pode 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 Azure Cosmos DB pacote NuGet ao projetoStep 3: Add Azure Cosmos DB NuGet package to the project

Agora que temos a maior parte do código ASP.NET Core MVC Framework que precisamos para essa solução, vamos adicionar os pacotes NuGet necessários para se conectar ao 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 é compactado e distribuído como um pacote NuGet.The Azure Cosmos DB .NET SDK is packaged and distributed as a NuGet package. Para obter o pacote NuGet no Visual Studio, utilize o Gestor de pacotes de NuGet no Visual Studio ao clicar com o botão direito no projeto no Explorador de soluções e, em seguida, selecione gerir 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 de clique com o botão direito do mouse para o projeto de aplicativo Web no Gerenciador de Soluções, com gerenciar pacotes NuGet realçados.

  2. A caixa de diálogo Gerir Pacotes NuGet aparece.The Manage NuGet Packages dialog box appears. Do NuGet navegue , escreva Microsoft.Azure.Cosmos.In the NuGet Browse box, type Microsoft.Azure.Cosmos. Nos resultados, instale o pacote Microsoft. Azure. Cosmos .From the results, install the Microsoft.Azure.Cosmos package. Ele baixa e instala o pacote Azure Cosmos DB e suas dependências.It downloads and installs the Azure Cosmos DB package and its dependencies. Selecione aceito na janela de aceitação da licença para concluir a instalação.Select I Accept in the License Acceptance window to complete the installation.

    Em alternativa, pode utilizar a consola de Gestor de pacotes para instalar o pacote de NuGet.Alternatively, you can use the Package Manager Console to install the NuGet package. Para fazer isso, sobre o ferramentas menu, selecione Gestor de pacotes NuGete, em seguida, selecione Package Manager Console.To do so, on the Tools menu, select NuGet Package Manager, and then select Package Manager Console. Na linha de comandos, escreva o seguinte comando:At the prompt, type the following command:

    Install-Package Microsoft.Azure.Cosmos
    
  3. Depois que o pacote é instalado, seu projeto do Visual Studio deve 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 MVC ASP.NET CoreStep 4: Set up the ASP.NET Core MVC application

Agora vamos adicionar os modelos, vistas e os controladores a esta aplicação MVC:Now let's add the models, the views, and the controllers to this MVC application:

Adicionar um modeloAdd a model

  1. Do Explorador de soluções, clique com botão direito a modelos pasta, selecione adicionare, em seguida, selecione classe.From the Solution Explorer, right-click the Models folder, select Add, and then select Class. A caixa de diálogo Adicionar Novo Item é apresentada.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 código a seguir: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 transmitidos e armazenados como JSON.The data stored in Azure Cosmos DB is passed over the wire and stored as JSON. Para controlar a maneira como os objetos são serializados/desserializados pelo JSON.NET, você pode usar o atributo jsonproperty conforme demonstrado na classe de Item que você criou.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. Você não só pode controlar o formato do nome da propriedade que vai para o JSON, também pode renomear suas propriedades do .NET como você fez com a propriedade Completed .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. Do Explorador de soluções, com o botão direito a controladores pasta, selecione Adde, em seguida, selecione controlador.From the Solution Explorer, right-click the Controllers folder, select Add, and then select Controller. A caixa de diálogo Adicionar Estrutura é apresentada.The Add Scaffold dialog box appears.

  2. Selecione controlador MVC-vazio e selecione Adicionar.Select MVC Controller - Empty and select Add.

    Captura de tela da caixa de diálogo Adicionar Scaffold com o controlador MVC – opção vazia realçada

  3. Nomeie o novo controlador, o controlador de domínioe substitua o código desse 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 ValidateAntiForgeryToken atributo é utilizado aqui para ajudar a proteger esta aplicação contra ataques de falsificação de solicitação entre sites.The ValidateAntiForgeryToken attribute is used here to help protect this application against cross-site request forgery attacks. Há mais que apenas adicionar este atributo, seus modos de exibição devem funcionar com este token antifalsificação também.There is more to it than just adding this attribute, your views should work with this anti-forgery token as well. Para obter mais informações sobre o assunto e exemplos de como implementá-los corretamente, consulte impedindo falsificação de solicitação entre sites.For more on the subject, and examples of how to implement this correctly, see Preventing Cross-Site Request Forgery. O código de origem fornecido no GitHub tem a implementação completa no local.The source code provided on GitHub has the full implementation in place.

    Também utilizamos a vincular atributo no parâmetro do método para ajudar a proteger contra ataques de publicação excessiva.We also use the Bind attribute on the method parameter to help protect against over-posting attacks. Para obter mais detalhes, consulte operações CRUD básicas no ASP.NET MVC.For more details, please see Basic CRUD Operations in ASP.NET MVC.

Adicionar vistasAdd views

Em seguida, vamos criar as seguintes três vistas:Next, let's create the following three views:

Adicionar uma vista de item de listaAdd a list item view

  1. Na Explorador de soluções, expanda o vistas pasta, vazio com o botão direito Item pasta que o Visual Studio criou por si quando adicionou o ItemController anteriormente, clique em Adde, em seguida, clique em vista.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 de Gerenciador de Soluções mostrando a pasta de item que o Visual Studio criou com os comandos Add View realçados

  2. Na Adicionar vista diálogo caixa, atualize os valores seguintes:In the Add View dialog box, update the following values:

    • Na caixa Nome da vista, escreva Í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 esquema, escreva ~/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 adicionar estes valores, selecione adicionar e permita que o Visual Studio, criar uma nova vista de modelo.After you add these values, select Add and let Visual Studio create a new template view. Quando tiver terminado, a mesma abre o ficheiro cshtml que é criado.Once done, it opens the cshtml file that is created. Pode fechar esse ficheiro no Visual Studio, como irá voltar a ele mais tarde.You can close that file in Visual Studio as you will come back to it later.

Adicionar uma nova vista de itemAdd a new item view

Semelhante à forma como criou uma vista para itens de lista, criar uma nova vista para criar itens com os seguintes passos:Similar to how you created a view to list items, create a new view to create items by using the following steps:

  1. Do Explorador de soluções, com o botão direito a Item pasta novamente, selecione Adde, em seguida, selecione vista.From the Solution Explorer, right-click the Item folder again, select Add, and then select View.

  2. Na Adicionar vista diálogo caixa, atualize os valores seguintes:In the Add View dialog box, update the following values:

    • Na caixa Nome da vista, escreva 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 esquema, escreva ~/Views/Shared/_Layout.cshtml.In the layout page box, type ~/Views/Shared/_Layout.cshtml.
    • Selecione Adicionar.Select Add.

Adicionar uma vista de item de ediçãoAdd an edit item view

E, finalmente, adicione uma vista para editar um item com os seguintes passos:And finally, add a view to edit an item with the following steps:

  1. Do Explorador de soluções, com o botão direito a Item pasta novamente, selecione Adde, em seguida, selecione vista.From the Solution Explorer, right-click the Item folder again, select Add, and then select View.

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

    • Na caixa Nome da vista, escreva 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 esquema, escreva ~/Views/Shared/_Layout.cshtml.In the layout page box, type ~/Views/Shared/_Layout.cshtml.
    • Selecione Adicionar.Select Add.

Em seguida, feche todos os documentos cshtml no Visual Studio como voltar a estas vistas mais tarde.Once this is done, close all the cshtml documents in Visual Studio as you return to these views later.

Etapa 5: Ligar ao Azure Cosmos DBStep 5: Connect to Azure Cosmos DB

Agora que as coisas básicas do MVC é resolvida, vamos adicionar o código para ligar ao Azure Cosmos DB e realizar 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.

Execute as operações CRUD nos dadosPerform CRUD operations on the data

A primeira coisa a fazer aqui é adicionar uma classe que contém a lógica para ligar e utilizar 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. ICosmosDBServiceFor 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. Partir Explorador de soluções, crie uma nova pasta no seu projeto com o nome serviços.From Solution Explorer, create a new folder under your project named Services.

  2. Com o botão direito a serviços pasta, selecione Adde, em seguida, 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 código a seguir à classe CosmosDBService e substitua o código nesse 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 de 2-3, mas desta vez, para uma classe chamada ICosmosDBServicee 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 uma CosmosClient como parte do construtor.The previous code receives a CosmosClient as part of the constructor. A seguir ASP.NET Core pipeline, precisamos ir para 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. Dentro do 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 instanciará CosmosDbService e manterá uma única instância como singleton; Quando o controlador de domínio é usado para processar 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 este projeto agora, você verá algo parecido com este: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 criadas por este tutorial de banco de dados

Etapa 6: Executar a aplicação localmenteStep 6: Run the application locally

Para testar a aplicação no seu computador local, utilize os seguintes passos:To test the application on your local machine, use the following steps:

  1. Pressione F5 no Visual Studio para criar a aplicação no modo de depuração.Press F5 in Visual Studio to build the application in debug mode. Este deve compilar a aplicação e iniciar um browser com a página de grelha 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 da lista de tarefas criada por este tutorial

  2. Clique na ligação Criar Novo e adicione valores aos campos Nome e Descrição.Click the Create New link and add values to the Name and Description fields. Deixe o concluído caixa de verificação desmarcada caso contrário, o novo item é adicionado 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 Create e será redirecionado novamente para o índice vista e seu item aparece na lista.Click Create and you are redirected back to the Index view and your item appears in the list. Pode adicionar alguns itens à sua lista de tarefas.You can add a few more items to your todo list.

    Captura de tela da exibição de índice

  4. Clique em Editar junto a um Item na lista para ser direcionado para a vista Editar, onde pode atualizar qualquer propriedade do seu 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 completo 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 de índice com a caixa concluída marcada

  5. Você pode verificar a qualquer momento o estado dos dados no serviço de Azure Cosmos DB usando o Cosmos Explorer ou o data Explorer do emulador de 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. Assim que já tiver testado a aplicação, prima Ctrl+F5 para parar a depuração da aplicação.Once you've tested the app, press Ctrl+F5 to stop debugging the app. Está pronto para implementar!You're ready to deploy!

Etapa 7: Implementar a aplicaçãoStep 7: Deploy the application

Agora que a sua aplicação completa funciona corretamente no Azure Cosmos DB, iremos implementar esta aplicação Web no Serviço de Aplicações 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 esta aplicação, com o botão direito no projeto no Explorador de soluções e selecione Publish.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, selecione criar novo para criar um perfil de 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 tiver um perfil de serviço de aplicações do Azure existente, selecione um subscrição na lista pendente.If you have an existing Azure App Service profile, select a Subscription from the dropdown. Utilize o vista filtro para ordenar por grupo de recursos ou tipo de recurso.Use the View filter to sort by resource group or resource type. Em seguida, procure o serviço de aplicações do Azure necessários e selecione OK.Next search the required Azure App Service and select OK.

    Caixa de diálogo Serviço de Aplicações no Visual Studio

  4. Para criar um novo perfil do Serviço de Aplicações 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 criar serviço de aplicações caixa de diálogo, introduza o nome da sua aplicação Web e a subscrição adequada, o grupo de recursos e o plano do serviço de aplicações, em seguida, 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 Aplicações no Visual Studio

Em alguns segundos, o Visual Studio publica seu aplicativo Web e inicia um navegador onde você pode ver seu projeto em execução 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!

Passos SeguintesNext steps

Neste tutorial, você aprendeu a criar um aplicativo Web ASP.NET Core MVC que pode acessar 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. Pode agora avançar para o artigo seguinte:You can now proceed to the next article: