Zelfstudie: Een ASP.NET Core MVC-webtoepassing ontwikkelen met Azure Cosmos DB met behulp van de .NET SDK

  • Artikel
  • 19 minuten om te lezen

VAN TOEPASSING OP: SQL-API

In deze zelfstudie wordt uitgelegd hoe u Azure Cosmos DB gebruikt om gegevens uit een ASP.NET MVC-toepassing die wordt gehost op Azure op te slaan en te openen. In deze zelfstudie gebruikt u de .NET SDK v3. De volgende afbeelding toont de webpagina die u gaat bouwen met behulp van het voorbeeld in dit artikel:

Schermopname van de takenlijst MVC-webtoepassing die is gemaakt met deze zelfstudie - Stapsgewijze zelfstudie voor ASP NET Core MVC

Als u geen tijd hebt om de zelfstudie te voltooien, kunt u het volledige voorbeeldproject uit GitHub downloaden.

In deze zelfstudie komt het volgende aan bod:

  • Een Azure Cosmos-account maken
  • Een ASP.NET Core MVC-app maken
  • De app met Azure Cosmos DB verbinden
  • De ‘maken, lezen, bijwerken en verwijderen’ (CRUD)-bewerkingen uitvoeren op de gegevens

Tip

Voor deze zelfstudie wordt ervan uitgegaan dat u ervaring hebt met ASP.NET Core MVC en Azure App Service. Als u niet bekend met ASP.NET Core of de vereiste hulpprogramma's bent, raden we u aan het volledige voorbeeldproject uit GitHub te downloaden, de vereiste NuGet-pakketten toe te voegen en het project uit te voeren. Zodra u het project gaat maken, kunt u dit artikel lezen voor meer informatie over de code in de context van het project.

Vereisten

Voordat u de instructies in dit artikel uitvoert, moet u zorgen dat u beschikt over de volgende resources:

Alle schermopnamen in dit artikel zijn van Microsoft Visual Studio Community 2019. Als u een andere versie gebruikt, komen uw schermen en opties mogelijk niet geheel overeen. De oplossing zou moeten werken als u aan de vereisten voldoet.

Stap 1: Een Azure Cosmos-account maken

Begin met het maken van een Azure Cosmos-account. Als u al een Azure Cosmos DB SQL API-account hebt of de Azure Cosmos DB-emulator gebruikt, kunt u direct doorgaan naar Stap 2: nieuwe ASP.NET MVC-toepassing maken.

  1. Selecteer vanuit het menu van Azure Portal of op de startpagina de optie Een resource maken.

  2. Zoek op de pagina Nieuw naar Azure Cosmos DB en selecteer dit.

  3. Selecteer op de pagina Azure Cosmos DB Maken.

  4. Voer op de Azure Cosmos DB account maken de basisinstellingen in voor het nieuwe Azure Cosmos-account.

    Instelling Waarde Beschrijving
    Abonnement Abonnementsnaam Selecteer het Azure-abonnement dat u voor dit Azure Cosmos-account wilt gebruiken.
    Resourcegroep Naam van de resourcegroep Selecteer een resourcegroep of selecteer Nieuwe maken en voer vervolgens een unieke naam in voor de nieuwe resourcegroep.
    Accountnaam Een unieke naam Voer een naam in om uw Azure Cosmos-account te identificeren. Gebruik een unieke naam omdat documents.azure.com is toegevoegd aan de naam die u hebt opgegeven om uw URI te maken.

    De naam mag alleen kleine letters, cijfers en het koppelteken (-) bevatten. De naam moet tussen de 3 en 44 tekens lang zijn.
    API Het type account dat moet worden gemaakt Selecteer Core(SQL) om een documentdatabase en query's aan te maken met SQL-syntaxis.

    De API bepaalt het type te maken account. Azure Cosmos DB heeft vijf API's: Core (SQL) en MongoDB voor documentgegevens, Gremlin voor grafiekgegevens, Azure Table en Cassandra. Op dit moment moet u voor elke API een afzonderlijk account maken.

    Meer informatie over de SQL-API.
    Locatie De regio het dichtst bij uw gebruikers Selecteer een geografische locatie waar u het Azure Cosmos DB-account wilt hosten. Gebruik de locatie die zich het dichtst bij uw gebruikers bevindt, zodat ze de snelst mogelijke toegang tot de gegevens hebben.
    Capaciteitsmodus Ingerichte doorvoer of serverloos Selecteer Ingerichte doorvoer om een account te maken in de modus Ingerichte doorvoer. Selecteer Serverloos om een account te maken in de modus serverloos.
    Niveaukorting op gratis laag van Azure Cosmos DB toepassen Toepassen of niet toepassen Met Azure Cosmos DB gratis laag krijgt u de eerste 1000 RU/s en 25 GB aan opslagruimte gratis in een account. Meer informatie over de gratis laag.

    Notitie

    U kunt per Azure-abonnement maximaal één gratis laag voor het Azure Cosmos DB-account hebben, en u moet zich aanmelden wanneer u het account maakt. Als u de optie voor het toepassen van de korting voor gratis lagen niet ziet, betekent dit dat er al een ander account in het abonnement is ingeschakeld met een gratis laag.

    De pagina Nieuw account voor Azure Cosmos DB

  5. Configureer de volgende gegevens op het tabblad Globale distributie. U kunt de standaardwaarden voor deze quickstart laten staan:

    Instelling Waarde Beschrijving
    Georedundantie Uitschakelen Schakel globale distributie voor uw account in of uit door uw regio te koppelen met een koppelingsregio. U kunt later meer regio's aan uw account toevoegen.
    Schrijven voor meerdere regio's Uitschakelen Dankzij de mogelijkheid voor schrijfbewerkingen in meerdere regio's kunt over de hele wereld profiteren van de ingerichte doorvoer voor uw databases en containers.

    Notitie

    De volgende opties zijn niet beschikbaar als u Serverloos als Capaciteitsmodus selecteert:

    • Korting voor gratis lagen toepassen
    • Geografische redundantie
    • Schrijven voor meerdere regio's

  6. Optioneel kunt u aanvullende details configureren op de volgende tabbladen:

  7. Selecteer Controleren + maken.

  8. Controleer de accountinstellingen en selecteer vervolgens Maken. Het duurt een paar minuten om het account te maken. Wacht tot de portal-pagina Uw implementatie is voltooid weergeeft.

    Het deelvenster Meldingen in Azure Portal

  9. Selecteer Ga naar resource om naar de Azure Cosmos DB-accountpagina te gaan.

    De Azure Cosmos DB-accountpagina

Ga naar de accountpagina van Azure Cosmos DB en selecteer Sleutels. Kopieer de waarden die moeten worden gebruikt in de webtoepassing die u hierna maakt.

Schermopname van Azure Portal waarin de knop Sleutels is gemarkeerd op de accountpagina van Azure Cosmos DB

In het volgende gedeelte maakt u een nieuwe ASP.NET Core MVC-toepassing.

Stap 2: Een nieuwe ASP.NET Core MVC-toepassing maken

  1. Open Visual Studio en selecteer Een nieuw project maken.

  2. Zoek en selecteer ASP.NET Core-webtoepassing in Een nieuw project maken voor C#. Selecteer Volgende om door te gaan.

    Nieuw project voor ASP.NET Core-webtoepassing maken

  3. In Uw nieuwe project configureren, geeft u het project de naam TODO en selecteert u Maken.

  4. Kies in Een nieuwe ASP.NET Core-webtoepassing maken de optie Webtoepassing (model-weergave-controller) . Selecteer Maken om door te gaan.

    Visual Studio maakt een lege MVC-toepassing.

  5. Selecteer Fouten opsporen > Foutopsporing starten of F5 om uw ASP.NET-toepassing lokaal uit te voeren.

Stap 3: Azure Cosmos DB NuGet-pakket aan het project toevoegen

Nu we de meeste code voor de ASP.NET Core MVC-framework hebben die nodig is voor deze oplossing, voegen we de NuGet-pakketten toe die zijn vereist voor het verbinden met Azure Cosmos DB.

  1. Klik in Solution Explorer met de rechtermuisknop op uw project en klik op NuGet-pakketten beheren.

  2. Zoek en selecteer Microsoft.Azure.Cosmos in het NuGet Package Manager. Selecteer Installeren.

    NuGet-pakket installeren

    Visual Studio downloadt en installeert het Azure Cosmos DB-pakket en de afhankelijkheden.

    U kunt ook de console voor Pakketbeheer gebruiken om het NuGet-pakket te installeren. Om dit te doen, selecteert u Hulpprogramma's > NuGet Package Manager > Package Manager-console. Typ achter de prompt de volgende opdracht:

    Install-Package Microsoft.Azure.Cosmos

Stap 4: ASP.NET Core MVC-toepassing instellen

U kunt nu de modellen, weergaven en controllers toevoegen aan deze MVC-toepassing.

Een model toevoegen

  1. Klik in Solution Explorer met de rechtermuisknop op de map Modellen en selecteer achtereenvolgens Toevoegen > Klasse.

  2. Noem in Nieuw item toevoegen uw nieuwe klasse Item.cs en selecteer Toevoegen.

  3. Vervang de inhoud van de klasse Item.cs door de volgende 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; }
    }
}

Azure Cosmos DB gebruikt JSON om gegevens te verplaatsen en op te slaan. U kunt het kenmerk JsonProperty gebruiken om te bepalen hoe JSON objecten serialiseert en deserialiseert. De klasse Item demonstreert het kenmerk JsonProperty. Met deze code bepaalt u de indeling van de eigenschapsnaam die naar JSON gaat. De naam van de .NET-eigenschap Completed wordt ook gewijzigd.

Weergaven toevoegen

Nu gaan we de volgende weergaven toevoegen.

  • Een weergave voor het maken van items
  • Een weergave voor het verwijderen van items
  • Een weergave voor het ophalen van itemdetails
  • Een weergave voor het bewerken van items
  • Een weergave voor het vermelden van alle items

Weergave voor het maken van items

  1. Klik met de rechtermuisknop in Solution Explorer op de map Views en selecteer Toevoegen > Nieuw map. Geef een naam op voor de map Item.

  2. Klik met de rechtermuisknop op de lege map Item en selecteer vervolgens Toevoegen > Weergave.

  3. Breng de volgende wijzigingen aan in MVC-weergave toevoegen:

    • Voer Maken in bij Naam weergeven.
    • Selecteer Maken in Sjabloon.
    • Selecteer in Modelklasse de optie Item(todo.Models) .
    • Selecteer Een indelingspagina gebruiken en voer ~/Views/Shared/_Layout. cshtml in.
    • Selecteer Toevoegen.

    Schermopname van het dialoogvenster MVC-weergave toevoegen

  4. Vervolgens selecteert u Toevoegen en laat u Visual Studio een nieuwe sjabloonweergave maken. Vervang de code in het gegenereerde bestand door de volgende inhoud:

    @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>

Weergave voor het verwijderen van items

  1. Klik vanuit de Solution Explorer met de rechtermuisknop opnieuw op de map Item en selecteer Toevoegen > Weergave.

  2. Breng de volgende wijzigingen aan in MVC-weergave toevoegen:

    • Typ in het vak Weergavenaam: Verwijderen.
    • Selecteer in het vak Sjabloon de optie Verwijderen.
    • Selecteer in het vak Modelklasse de optie Item (todo.Models) .
    • Selecteer Een indelingspagina gebruiken en voer ~/Views/Shared/_Layout. cshtml in.
    • Selecteer Toevoegen.

  3. Vervolgens selecteert u Toevoegen en laat u Visual Studio een nieuwe sjabloonweergave maken. Vervang de code in het gegenereerde bestand door de volgende inhoud:

    @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>

Weergave voor het ophalen van itemdetails

  1. Klik in Solution Explorer met de rechtermuisknop opnieuw op de map Item en selecteer Toevoegen > Weergave.

  2. Geef de volgende waarden op in MVC-weergave toevoegen:

    • Voer in Weergavenaam in: Details.
    • Selecteer in Sjabloon de optie Details.
    • Selecteer in Modelklasse de optie Item(todo.Models) .
    • Selecteer Een indelingspagina gebruiken en voer ~/Views/Shared/_Layout. cshtml in.

  3. Vervolgens selecteert u Toevoegen en laat u Visual Studio een nieuwe sjabloonweergave maken. Vervang de code in het gegenereerde bestand door de volgende inhoud:

    @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>

Een weergave voor het bewerken van items toevoegen

  1. Klik vanuit de Solution Explorer met de rechtermuisknop opnieuw op de map Item en selecteer Toevoegen > Weergave.

  2. Breng de volgende wijzigingen aan in MVC-weergave toevoegen:

    • Typ in het vak WeergavenaamBewerken.
    • Selecteer in het vak Sjabloon de optie Bewerken.
    • Selecteer in het vak Modelklasse de optie Item (todo.Models) .
    • Selecteer Een indelingspagina gebruiken en voer ~/Views/Shared/_Layout. cshtml in.
    • Selecteer Toevoegen.

  3. Vervolgens selecteert u Toevoegen en laat u Visual Studio een nieuwe sjabloonweergave maken. Vervang de code in het gegenereerde bestand door de volgende inhoud:

    @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>

Weergave voor het vermelden van alle items

En tot slot voert u de volgende stappen uit om een weergave toe te voegen om alle items op te halen:

  1. Klik vanuit de Solution Explorer met de rechtermuisknop opnieuw op de map Item en selecteer Toevoegen > Weergave.

  2. Breng de volgende wijzigingen aan in MVC-weergave toevoegen:

    • In het vak Weergavenaam typt u Index.
    • Selecteer in het vak Sjabloon de optie Lijst.
    • Selecteer in het vak Modelklasse de optie Item (todo.Models) .
    • Selecteer Een indelingspagina gebruiken en voer ~/Views/Shared/_Layout. cshtml in.
    • Selecteer Toevoegen.

  3. Vervolgens selecteert u Toevoegen en laat u Visual Studio een nieuwe sjabloonweergave maken. Vervang de code in het gegenereerde bestand door de volgende inhoud:

    @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>

Zodra u deze stappen hebt voltooid, sluit u alle cshtml-documenten in Visual Studio.

Services declareren en initialiseren

Allereerst voegen we een klasse toe die de logica bevat voor de verbinding met en het gebruik van Azure Cosmos DB. Voor deze zelfstudie kapselen we deze logica in een klasse genaamd CosmosDbService en een interface met de naam ICosmosDbService. Deze service voert de CRUD-bewerkingen uit. Ook worden de feedbewerkingen gelezen, zoals het weergeven van onvolledige items, het maken, bewerken en verwijderen van de items.

  1. Klik in Solution Explorer met de rechtermuisknop op het project en selecteer Toevoegen > Nieuwe map. Geef een naam op voor de map Services.

  2. Klik met de rechtermuisknop op de map Services en selecteer Toevoegen > Klasse. Noem de nieuwe klasse CosmoDbService en selecteer Toevoegen.

  3. Vervang de inhoud van CosmoDbService door de volgende code:

    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. Klik met de rechtermuisknop op de map Services en selecteer Toevoegen > Klasse. Noem de nieuwe klasse ICosmoDbService en selecteer Toevoegen.

  5. Voeg de volgende code toe aan klasse 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. Open het bestand Startup.cs in uw oplossing en voeg de volgende methode toe InitializeCosmosClientInstanceAsync, waarmee de configuratie wordt gelezen en de client wordt geïnitialiseerd.

    /// <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. Vervang op hetzelfde bestand de methode ConfigureServices door:

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

    De code in deze stap initialiseert de client op basis van de configuratie als een singleton-exemplaar dat moet worden geïnjecteerd door Afhankelijkheidsinjectie in ASP.NET Core.

    En zorg ervoor dat u de standaard MVC-controller wijzigt naar Item door de routes te bewerken in de methode Configure van hetzelfde bestand:

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

  8. Definieer de configuratie in het bestand appSettings. json van het project zoals wordt weer gegeven in het volgende codefragment:

    {
  "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"
  }
}

Een controller toevoegen

  1. Klik in Solution Explorer met de rechtermuisknop op de map Controllers en selecteer Toevoegen > Controller.

  2. Selecteer in Scaffold toevoegen de optie MVC-controller: leeg en selecteer Toevoegen.

    MVC-controller selecteren - Leeg in Scaffold toevoegen

  3. Noem uw nieuwe controller ItemController.

  4. Vervang de inhoud van ItemController.cs door de volgende code:

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

Het kenmerk ValidateAntiForgeryToken wordt hier gebruikt om deze toepassing te beschermen tegen aanvallen via aanvraagvervalsing op meerdere sites. Uw weergaven werken ook met dit anti-vervalsingstoken. Raadpleeg Voorkomen van aanvraagvervalsing op meerdere sites (CSRF) in ASP.NET MVC-toepassing voor meer informatie en voorbeelden. De broncode op GitHub beschikt over de volledige implementatie.

We gebruiken ook het kenmerk Bind voor de methodeparameter om u te beschermen tegen over-postingaanvallen. Zie Zelfstudie: Implementeer CRUD-functionaliteit met de Entity Framework in ASP.NET MVC.

Stap 5: De toepassing lokaal uitvoeren

Volg deze stappen als u de toepassing wilt testen op een lokale computer:

  1. Druk in Visual Studio op F5 om de toepassing in de foutopsporingsmodus op te bouwen. De toepassing wordt opgebouwd en wordt er een browser gestart met het lege rasterpagina dat we eerder hebben gezien:

    Schermopname van de takenlijstwebtoepassing die is gemaakt met deze zelfstudie

    Als de toepassing in plaats daarvan op de startpagina wordt geopend, voegt u /Item toe aan de URL.

  2. Selecteer de koppeling Nieuw maken en voeg waarden toe aan de velden Naam en Beschrijving. Zorg ervoor dat het selectievakje Voltooid is uitgeschakeld. Als u deze optie selecteert, voegt de app het nieuwe item toe met de status voltooid. Het item wordt niet meer weergegeven in de eerste lijst.

  3. Selecteer Maken. Met de app keert u terug naar de weergave Index en wordt uw item in de lijst weergegeven. U kunt eventueel nog enkele items aan uw Takenlijst toevoegen.

    Schermopname van de weergave Index

  4. Selecteer Bewerken naast een Item in de lijst. De app opent de weergave Bewerken waar u de eigenschappen van uw object kunt bijwerken, inclusief de vlag Voltooid. Als u Voltooid selecteert en Opslaan selecteert, wordt in de app het Item weergegeven als voltooid in de lijst.

    Schermopname van de weergave Index met het selectievakje Voltooid ingeschakeld

  5. Controleer de status van de gegevens in de Azure Cosmos DB-service met Cosmos Explorer of de Data Explorer van de Azure Cosmos DB-emulator.

  6. Zodra u de app hebt getest, selecteert u Ctrl + F5 om de foutopsporing voor de app te stoppen. U kunt de app nu implementeren.

Stap 6: De toepassing implementeren

Nu de volledige toepassing correct werkt met Azure Cosmos DB, kunt u de web-app implementeren in Azure App Service.

  1. Klik in Solution Explorer met de rechtermuisknop op het project en selecteer Publiceren om de toepassing te publiceren.

  2. Selecteer App Service in Kies een publicatiedoel.

  3. Als u een bestaand App Service-profiel wilt gebruiken, kiest u Bestaande selecteren en selecteert u Publiceren.

  4. Selecteer in App Service een Abonnement. Sorteer met de filter Weergave op resourcegroep of resourcetype.

  5. Zoek uw profiel en selecteer vervolgens OK. Zoek vervolgens de vereiste Azure App Service en selecteer OK.

    Dialoogvenster App Service in Visual Studio

Een andere optie is het maken van een nieuw profiel:

  1. Klik in Solution Explorer met de rechtermuisknop op het project en selecteer Publiceren, net als in de vorige procedure.

  2. Selecteer App Service in Kies een publicatiedoel.

  3. Selecteer in Kies een publicatiedoel Nieuwe maken en selecteer Publiceren.

  4. Voer in App Service de naam van uw webtoepassing en het abonnement, de resourcegroep en het hostingabonnement in en selecteer vervolgens Maken.

    Dialoogvenster App-service maken in Visual Studio

Over een paar seconden zal Visual Studio uw webtoepassing publiceren en een browser starten waarin u kunt zien hoe uw project in Azure wordt uitgevoerd!

Volgende stappen

In deze zelfstudie hebt u geleerd hoe u een ASP.NET Core MVC-webtoepassing bouwt. Uw toepassing kan toegang krijgen tot gegevens die zijn opgeslagen in Azure Cosmos DB. U kunt nu doorgaan met deze resources: