Tutorial: Entwickeln einer ASP.NET Core MVC-Webanwendung mit Azure Cosmos DB unter Verwendung des .NET SDKTutorial: Develop an ASP.NET Core MVC web application with Azure Cosmos DB by using .NET SDK

In diesem Tutorial erfahren Sie, wie Sie mithilfe von Azure Cosmos DB Daten aus einer in Azure gehosteten ASP.NET MVC-Webanwendung speichern und abrufen.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. In diesem Tutorial verwenden Sie .NET SDK V3.In this tutorial, you use the .NET SDK V3. Die folgende Abbildung zeigt die Webseite, die Sie anhand des Beispiels in diesem Artikel erstellen:The following image shows the web page that you will build by using the sample in this article:

Screenshot der in diesem Tutorial erstellten MVC-Webanwendung für Aufgabenlisten: Schrittanleitung im ASP.NET Core MVC-Tutorial

Sollten Sie keine Zeit für das Tutorial haben, können Sie das gesamte Beispielprojekt von GitHub herunterladen.If you don't have time to complete the tutorial, you can download the complete sample project from GitHub.

In diesem Lernprogramm wird Folgendes behandelt:This tutorial covers:

  • Erstellen eines Azure Cosmos-KontosCreating an Azure Cosmos account
  • Erstellen einer ASP.NET Core MVC-AppCreating an ASP.NET Core MVC app
  • Herstellen einer Verbindung zwischen App und Azure Cosmos DBConnecting the app to Azure Cosmos DB
  • Ausführen von CRUD-Vorgängen für die DatenPerform CRUD operations on the data

Tipp

Dieses Tutorial setzt Erfahrung mit der Verwendung von ASP.NET Core MVC und Azure App Service voraus.This tutorial assumes that you have prior experience using ASP.NET Core MVC and Azure App Service. Sollten Sie noch nicht mit ASP.NET Core oder den erforderlichen Tools vertraut sein, empfiehlt es sich, das vollständige Beispielprojekt von GitHub herunterzuladen, die erforderlichen NuGet-Pakete hinzuzufügen und das Projekt auszuführen.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. Nachdem Sie das Projekt erstellt haben, können Sie den Artikel lesen, um sich im Kontext des Projekts mit dem Code vertraut zu machen.Once you build the project, you can review this article to gain insight on the code in the context of the project.

VoraussetzungenPrerequisites

Vergewissern Sie sich zunächst, dass Sie über die folgenden Ressourcen verfügen:Before following the instructions in this article, ensure that you have the following resources:

Alle Screenshots in diesem Artikel wurden mithilfe von Microsoft Visual Studio Community 2019 erstellt.All the screenshots in this article have been taken using Microsoft Visual Studio Community 2019. Sollte Ihr System mit einer anderen Version konfiguriert sein, unterscheiden sich die Bildschirme und Optionen möglicherweise geringfügig. Wenn Sie die oben aufgeführten Voraussetzungen erfüllen, sollte diese Lösung jedoch funktionieren.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.

Schritt 1: Erstellen eines Azure Cosmos-KontosStep 1: Create an Azure Cosmos account

Erstellen Sie zunächst ein Azure Cosmos-Konto.Let's start by creating an Azure Cosmos account. Falls Sie bereits über ein SQL-API-Konto für Azure Cosmos DB verfügen oder den Azure Cosmos DB-Emulator für dieses Tutorial verwenden, können Sie direkt mit dem Abschnitt Erstellen einer neuen ASP.NET MVC-Anwendung fortfahren.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. Melden Sie sich beim Azure-Portal an.Sign in to the Azure portal.

  2. Wählen Sie Ressourcen erstellen > Datenbanken > Azure Cosmos DB aus.Select Create a resource > Databases > Azure Cosmos DB.

    Die Bereich „Datenbanken“ im Azure-Portal

  3. Geben Sie auf der Seite Azure Cosmos DB-Konto erstellen die grundlegenden Einstellungen für das neue Azure Cosmos-Konto ein.On the Create Azure Cosmos DB Account page, enter the basic settings for the new Azure Cosmos account.

    EinstellungSetting WertValue BESCHREIBUNGDescription
    SubscriptionSubscription AbonnementnameSubscription name Wählen Sie das Azure-Abonnement aus, das Sie für dieses Azure Cosmos-Konto verwenden möchten.Select the Azure subscription that you want to use for this Azure Cosmos account.
    RessourcengruppeResource Group RessourcengruppennameResource group name Wählen Sie eine Ressourcengruppe aus, oder wählen Sie Neu erstellen aus, und geben Sie einen eindeutigen Namen für die Ressourcengruppe ein.Select a resource group, or select Create new, then enter a unique name for the new resource group.
    KontonameAccount Name Geben Sie einen eindeutigen Namen ein.Enter a unique name Geben Sie einen Namen ein, der Ihr Azure Cosmos-Konto identifiziert.Enter a name to identify your Azure Cosmos account. Da documents.azure.com an die ID angefügt wird, die Sie für die URI-Erstellung angeben, muss die ID eindeutig sein.Because documents.azure.com is appended to the ID that you provide to create your URI, use a unique ID.

    Die ID darf nur Kleinbuchstaben, Zahlen und den Bindestrich (-) enthalten.The ID can only contain lowercase letters, numbers, and the hyphen (-) character. Sie muss zwischen drei und 31 Zeichen lang sein.It must be between 3-31 characters in length.
    APIAPI Core (SQL)Core (SQL) Die API bestimmt den Typ des zu erstellenden Kontos.The API determines the type of account to create. Azure Cosmos DB stellt fünf APIs bereit: Core (SQL) und MongoDB für Dokumentdaten, Gremlin für Diagrammdaten sowie Azure Table und Cassandra.Azure Cosmos DB provides five APIs: Core (SQL) and MongoDB for document data, Gremlin for graph data, Azure Table, and Cassandra. Derzeit müssen Sie ein separates Konto für jede API erstellen.Currently, you must create a separate account for each API.

    Wählen Sie Core (SQL) aus, um eine Dokumentdatenbank und eine Abfrage mit SQL-Syntax zu erstellen.Select Core (SQL) to create a document database and query by using SQL syntax.

    Weitere Informationen zur SQL-APILearn more about the SQL API.
    LocationLocation Wählen Sie die Region aus, die Ihren Benutzern am nächsten liegt.Select the region closest to your users Wählen Sie einen geografischen Standort aus, an dem Ihr Azure Cosmos DB-Konto gehostet werden soll.Select a geographic location to host your Azure Cosmos DB account. Verwenden Sie den Standort, der Ihren Benutzern am nächsten ist, damit sie möglichst schnell auf die Daten zugreifen können.Use the location that is closest to your users to give them the fastest access to the data.

    Die Seite „Neues Konto“ für Azure Cosmos DB

  4. Klicken Sie auf Überprüfen + erstellen.Select Review + create. Sie können die Abschnitte Netzwerk und Tags überspringen.You can skip the Network and Tags sections.

  5. Überprüfen Sie die Kontoeinstellungen, und wählen Sie anschließend Erstellen aus.Review the account settings, and then select Create. Die Erstellung des Kontos dauert einige Minuten.It takes a few minutes to create the account. Warten Sie, bis auf der Portalseite Ihre Bereitstellung wurde abgeschlossen. angezeigt wird.Wait for the portal page to display Your deployment is complete.

    Der Bereich „Benachrichtigungen“ im Azure-Portal

  6. Wählen Sie Zu Ressource wechseln aus, um zur Seite des Azure Cosmos DB-Kontos zu wechseln.Select Go to resource to go to the Azure Cosmos DB account page.

    Seite des Azure Cosmos DB-Kontos

Navigieren Sie nun zur Seite mit dem Azure Cosmos DB-Konto, und klicken Sie auf Schlüssel, da diese Werte in der Webanwendung verwendet werden, die Sie als Nächstes erstellen.Now navigate to the Azure Cosmos DB account page, and click Keys, as these values are used in the web application you create next.

Screenshot des Azure-Portals mit hervorgehobener Schaltfläche „Schlüssel“ auf der Seite „Azure Cosmos DB-Konto“

Im nächsten Abschnitt erstellen Sie eine neue ASP.NET Core MVC-Anwendung.In the next section, you create a new ASP.NET Core MVC application.

Schritt 2: Erstellen einer neuen ASP.NET Core MVC-AnwendungStep 2: Create a new ASP.NET Core MVC application

  1. Wählen Sie in Visual Studio im Menü Datei die Option Neu und anschließend Projekt aus.In Visual Studio, from the File menu, choose New, and then select Project. Das Dialogfeld Neues Projekt wird angezeigt.The New Project dialog box appears.

  2. Suchen Sie im Fenster Neues Projekt über das Eingabefeld Nach Vorlagen suchen nach „Web“, und wählen Sie dann ASP.NET Core-Webanwendung aus.In the New Project window, use the Search for templates input box to search for "Web", and then select ASP.NET Core Web Application.

    Erstellen eines neuen ASP.NET Core-Webanwendungsprojekts

  3. Geben Sie im Feld Name den Namen des Projekts ein.In the Name box, type the name of the project. In diesem Lernprogramm wird der Name "Todo" (Aufgabe) verwendet.This tutorial uses the name "todo". Wenn Sie einen anderen Namen verwenden, müssen Sie immer dann, wenn im Tutorial der todo-Namespace erwähnt wird, die bereitgestellten Codebeispiele mit dem von Ihnen verwendeten Anwendungsnamen anpassen.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. Klicken Sie auf Durchsuchen, um zu dem Ordner zu navigieren, in dem Sie das Projekt erstellen möchten.Select Browse to navigate to the folder where you would like to create the project. Klicken Sie auf Erstellen.Select Create.

  5. Das Dialogfeld Neue ASP.NET Core-Webanwendung erstellen wird angezeigt.The Create a new ASP.NET Core Web Application dialog box appears. Wählen Sie in der Vorlagenliste Webanwendung (Model View Controller) aus.In the templates list, select Web Application (Model-View-Controller).

  6. Wählen Sie OK aus, und lassen Sie Visual Studio das Gerüst um die leere ASP.NET Core MVC-Vorlage erstellen.Select Create and let Visual Studio do the scaffolding around the empty ASP.NET Core MVC template.

  7. Wenn Visual Studio die Bausteine der MVC-Anwendung erstellt hat, steht Ihnen eine leere ASP.NET-Anwendung zur Verfügung, die lokal ausgeführt werden kann.Once Visual Studio has finished creating the boilerplate MVC application, you have an empty ASP.NET application that you can run locally.

Schritt 3: Hinzufügen des Azure Cosmos DB-NuGet-Pakets zum ProjektStep 3: Add Azure Cosmos DB NuGet package to the project

Nachdem Sie nun über den Großteil des ASP.NET Core MVC-Frameworkcodes verfügen, der für diese Lösung erforderlich ist, fügen Sie als Nächstes die NuGet-Pakete hinzu, die für die Verbindungsherstellung mit Azure Cosmos DB benötigt werden.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. Das Azure Cosmos DB .NET SDK wird als NuGet-Paket verteilt.The Azure Cosmos DB .NET SDK is packaged and distributed as a NuGet package. Verwenden Sie zum Abrufen des NuGet-Pakets den NuGet-Paket-Manager in Visual Studio, indem Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt klicken und anschließend NuGet-Pakete verwalten auswählen.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.

    Screenshot der Kontextmenüoptionen für das Webanwendungsprojekt im Projektmappen-Explorer, in dem „NuGet-Pakete verwalten“ hervorgehoben ist.

  2. Das Dialogfeld NuGet-Pakete verwalten wird geöffnet.The Manage NuGet Packages dialog box appears. Geben Sie im NuGet-Feld Durchsuchen die Zeichenfolge Microsoft.Azure.Cosmos ein.In the NuGet Browse box, type Microsoft.Azure.Cosmos. Installieren Sie das in den Ergebnissen enthaltene Paket Microsoft.Azure.Cosmos.From the results, install the Microsoft.Azure.Cosmos package. Dadurch werden das Azure Cosmos DB-Paket sowie alle Abhängigkeiten heruntergeladen und installiert.It downloads and installs the Azure Cosmos DB package and its dependencies. Wählen Sie im Fenster Zustimmung zur Lizenz die Option Ich stimme zu aus, um die Installation abzuschließen.Select I Accept in the License Acceptance window to complete the installation.

    Alternativ können Sie die Paketverwaltungskonsole verwenden, um das NuGet-Paket zu installieren.Alternatively, you can use the Package Manager Console to install the NuGet package. Wählen Sie dafür im Menü Extras die Option NuGet-Paket-Manager und anschließend Paket-Manager-Konsole aus.To do so, on the Tools menu, select NuGet Package Manager, and then select Package Manager Console. Geben Sie an der Eingabeaufforderung den folgenden Befehl ein:At the prompt, type the following command:

    Install-Package Microsoft.Azure.Cosmos
    
  3. Nach der Installation des Pakets sollte das Visual Studio-Projekt den Bibliotheksverweis auf Microsoft.Azure.Cosmos enthalten.After the package is installed, your Visual Studio project should contain the library reference to Microsoft.Azure.Cosmos.

Schritt 4: Einrichten der ASP.NET Core MVC-AnwendungStep 4: Set up the ASP.NET Core MVC application

Fügen Sie der MVC-Anwendung als Nächstes die Modelle, Ansichten und Controller hinzu:Now let's add the models, the views, and the controllers to this MVC application:

Hinzufügen eines ModellsAdd a model

  1. Klicken Sie imProjektmappen-Explorer mit der rechten Maustaste auf den Ordner Modelle, und wählen Sie Hinzufügen > Klasse aus.From the Solution Explorer, right-click the Models folder, select Add, and then select Class. Das Dialogfeld Neues Element hinzufügen wird angezeigt.The Add New Item dialog box appears.

  2. Nennen Sie die neue Klasse Item.cs, und wählen Sie Hinzufügen aus.Name your new class Item.cs and select Add.

  3. Ersetzen Sie als Nächstes den Code in der Klasse „Item.cs“ durch folgenden Code: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; }
        }
    }
    

    Die in Azure Cosmos DB gespeicherten Daten werden übertragen und im JSON-Format gespeichert.The data stored in Azure Cosmos DB is passed over the wire and stored as JSON. Die Serialisierung/Deserialisierung Ihrer Objekte durch JSON.NET kann mithilfe des Attributs JsonProperty gesteuert werden, wie in der erstellten Klasse Item veranschaulicht.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. Sie können nicht nur das Format des an JSON weitergegebenen Eigenschaftennamens steuern, sondern auch Ihre .NET-Eigenschaften umbenennen, wie hier am Beispiel der Eigenschaft Completed zu sehen.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.

Hinzufügen von AnsichtenAdd views

Erstellen Sie als Nächstes die drei folgenden Ansichten:Next, let's create the following three views:

Hinzufügen einer Ansicht zum Auflisten von ElementenAdd a list item view

  1. Erweitern Sie imProjektmappen-Explorer den Ordner Ansichten, klicken Sie mit der rechten Maustaste auf den leeren Ordner Item, der zuvor beim Hinzufügen des Elements ItemController von Visual Studio erstellt wurde, und klicken Sie auf Hinzufügen und dann auf Ansicht.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.

    Screenshot des Projektmappen-Explorers, in dem der von Visual Studio erstellte Ordner „Element“ gezeigt wird und die Befehle „Hinzufügen“ > „Ansicht“ hervorgehoben sind

  2. Aktualisieren Sie im Dialogfeld Ansicht hinzufügen folgende Werte:In the Add View dialog box, update the following values:

    • Geben Sie im Feld Ansichtsname den Namen Index ein.In the View name box, type Index.
    • Wählen Sie im Feld Vorlage die Option Liste aus.In the Template box, select List.
    • Wählen Sie im Feld Modellklasse die Option Item (todo.Models) aus.In the Model class box, select Item (todo.Models).
    • Geben Sie im Feld für die Layoutseite ~/Views/Shared/_Layout.cshtml ein.In the layout page box, type ~/Views/Shared/_Layout.cshtml.

    Screenshot des Dialogfelds „Ansicht hinzufügen“

  3. Wählen Sie nach dem Hinzufügen dieser Werte die Option Hinzufügen aus. Daraufhin erstellt Visual Studio eine neue Vorlagenansicht.After you add these values, select Add and let Visual Studio create a new template view. Anschließend wird die erstellte CSHTML-Datei geöffnet.Once done, it opens the cshtml file that is created. Diese Datei wird erst später benötigt und kann in Visual Studio geschlossen werden.You can close that file in Visual Studio as you will come back to it later.

Hinzufügen einer Ansicht für neue ElementeAdd a new item view

Gehen Sie wie folgt vor, um eine neue Ansicht für die Elementerstellung zu erstellen:Similar to how you created a view to list items, create a new view to create items by using the following steps:

  1. Klicken Sie imProjektmappen-Explorer mit der rechten Maustaste wieder auf den Ordner Element, und wählen Sie Hinzufügen > Ansicht aus.From the Solution Explorer, right-click the Item folder again, select Add, and then select View.

  2. Aktualisieren Sie im Dialogfeld Ansicht hinzufügen folgende Werte:In the Add View dialog box, update the following values:

    • Geben Sie im Feld Ansichtsname den Namen Create ein.In the View name box, type Create.
    • Wählen Sie im Feld Vorlage die Option Erstellen aus.In the Template box, select Create.
    • Wählen Sie im Feld Modellklasse die Option Item (todo.Models) aus.In the Model class box, select Item (todo.Models).
    • Geben Sie im Feld für die Layoutseite ~/Views/Shared/_Layout.cshtml ein.In the layout page box, type ~/Views/Shared/_Layout.cshtml.
    • Wählen Sie Hinzufügen.Select Add.

Hinzufügen einer Ansicht zum Bearbeiten von ElementenAdd an edit item view

Fügen Sie abschließend eine Ansicht für die Elementbearbeitung hinzu:And finally, add a view to edit an item with the following steps:

  1. Klicken Sie imProjektmappen-Explorer mit der rechten Maustaste wieder auf den Ordner Element, und wählen Sie Hinzufügen > Ansicht aus.From the Solution Explorer, right-click the Item folder again, select Add, and then select View.

  2. Gehen Sie im Dialogfeld Ansicht hinzufügen folgendermaßen vor:In the Add View dialog box, do the following:

    • Geben Sie im Feld Ansichtsname den Namen Edit ein.In the View name box, type Edit.
    • Wählen Sie im Feld Vorlage die Option Bearbeiten aus.In the Template box, select Edit.
    • Wählen Sie im Feld Modellklasse die Option Item (todo.Models) aus.In the Model class box, select Item (todo.Models).
    • Geben Sie im Feld für die Layoutseite ~/Views/Shared/_Layout.cshtml ein.In the layout page box, type ~/Views/Shared/_Layout.cshtml.
    • Wählen Sie Hinzufügen.Select Add.

Schließen Sie nach Abschluss dieses Vorgangs alle CSHTML-Dokumente in Visual Studio. Sie werden erst später benötigt.Once this is done, close all the cshtml documents in Visual Studio as you return to these views later.

Hinzufügen eines ControllersAdd a controller

  1. Klicken Sie imProjektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller, und wählen Sie Hinzufügen > Controller aus.From the Solution Explorer, right-click the Controllers folder, select Add, and then select Controller. Das Dialogfeld Gerüst hinzufügen wird angezeigt.The Add Scaffold dialog box appears.

  2. Wählen Sie MVC-Controller – leer und anschließend Hinzufügen aus.Select MVC Controller - Empty and select Add.

    Screenshot des Dialogfelds „Gerüst hinzufügen“, in dem die Option „MVC-Controller – leer“ hervorgehoben ist

  3. Nennen Sie Ihren neuen Controller ItemController, und ersetzen Sie den Code in der Datei durch folgenden Code: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));
            }
        }
    }
    

    Das Attribut ValidateAntiForgeryToken wird hier verwendet, um den Schutz dieser Anwendung vor websiteübergreifenden Anforderungsfälschungen zu unterstützen.The ValidateAntiForgeryToken attribute is used here to help protect this application against cross-site request forgery attacks. Das Hinzufügen dieses Attributs reicht jedoch nicht aus; Ihre Ansichten müssen ebenfalls mit diesem Antifälschungstoken arbeiten.There is more to it than just adding this attribute, your views should work with this anti-forgery token as well. Weitere Informationen zu diesem Thema sowie Beispiele für eine ordnungsgemäße Implementierung finden Sie unter Verhindern der websiteübergreifenden Anforderungsfälschung.For more on the subject, and examples of how to implement this correctly, see Preventing Cross-Site Request Forgery. Der auf GitHub bereitgestellte Quellcode enthält die vollständige Implementierung.The source code provided on GitHub has the full implementation in place.

    Zum Schutz vor Overposting-Angriffen wird außerdem das Attribut Bind im Methodenparameter verwendet.We also use the Bind attribute on the method parameter to help protect against over-posting attacks. Weitere Informationen finden Sie unter Grundlegende CRUD-Vorgänge in ASP.NET MVC.For more details, please see Basic CRUD Operations in ASP.NET MVC.

Schritt 5: Herstellen der Verbindung mit Azure Cosmos DBStep 5: Connect to Azure Cosmos DB

Nachdem Sie sich nun um alle grundlegenden MVC-Elemente gekümmert haben, können Sie den Code für die Verbindungsherstellung mit Azure Cosmos DB sowie für die Ausführung von CRUD-Vorgängen hinzufügen.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.

Ausführen von CRUD-Vorgängen für die DatenPerform CRUD operations on the data

Hier muss zunächst eine Klasse hinzugefügt werden, die die Logik zur Verbindungsherstellung mit bzw. zur Verwendung von Azure Cosmos DB enthält.The first thing to do here is add a class that contains the logic to connect to and use Azure Cosmos DB. In diesem Tutorial wird die entsprechende Logik in einer Klasse namens CosmosDBService gekapselt und eine Schnittstelle namens ICosmosDBService aufgerufen.For this tutorial, we'll encapsulate this logic into a class called CosmosDBService and an interface called ICosmosDBService. Dieser Dienst führt die CRUD- und Lesefeedvorgänge wie etwa das Auflisten unvollständiger Elemente sowie das Erstellen, Bearbeiten und Löschen der Elemente aus.This service performs the CRUD and read feed operations such as listing incomplete items, creating, editing, and deleting the items.

  1. Erstellen Sie über denProjektmappen-Explorer unter Ihrem Projekt einen neuen Ordner namens Services.From Solution Explorer, create a new folder under your project named Services.

  2. Klicken Sie mit der rechten Maustaste auf den Ordner Services, und wählen Sie Hinzufügen > Klasse aus.Right-click the Services folder, select Add, and then select Class. Nennen Sie die neue Klasse CosmosDBService, und wählen Sie Hinzufügen aus.Name the new class CosmosDBService and select Add.

  3. Fügen Sie der Klasse CosmosDBService den folgenden Code hinzu, und ersetzen Sie den Code in dieser Datei durch folgenden Code: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)
            {
                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. Wiederholen Sie die Schritte 2 und 3 dieses Mal für eine Klasse mit dem Namen ICosmosDBService, und fügen Sie den folgenden Code hinzu: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. Der vorherige Code empfängt CosmosClient als Teil des Konstruktors.The previous code receives a CosmosClient as part of the constructor. Navigieren Sie gemäß der ASP.NET Core-Pipeline zur Datei Startup.cs des Projekts, und initialisieren Sie den Client basierend auf der Konfiguration als Singleton-Instanz, die per Abhängigkeitsinjektion injiziert wird.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. Im Handler ConfigureServices wird Folgendes definiert:In the ConfigureServices handler, we define:

    services.AddSingleton<ICosmosDbService>(InitializeCosmosClientInstanceAsync(Configuration.GetSection("CosmosDb")).GetAwaiter().GetResult());
    
  6. In derselben Datei definieren wir die Hilfsmethode InitializeCosmosClientInstanceAsync, mit der die Konfiguration gelesen und der Client initialisiert wird.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. Die Konfiguration wird in der Datei appsettings.json des Projekts definiert.The configuration is defined in the project's appsettings.json file. Öffnen Sie die Datei, und fügen Sie einen Abschnitt namens CosmosDb hinzu: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"
       }
    

Wenn Sie die Anwendung ausführen, instanziiert die ASP.NET Core-Pipeline nun CosmosDbService und behält eine einzelne Instanz als Singleton bei. Wird ItemController zum Verarbeiten clientseitiger Anforderungen verwendet, wird diese einzelne Instanz empfangen und kann zum Ausführen von CRUD-Vorgängen verwendet werden.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.

Wenn Sie dieses Projekt jetzt erstellen und ausführen, sollte ein Ergebnis ähnlich dem folgenden angezeigt werden:If you build and run this project now, you should now see something that looks like this:

Screenshot der in diesem Datenbanktutorial erstellten Aufgabenlisten-Webanwendung

Schritt 6: Lokales Ausführen der AnwendungStep 6: Run the application locally

Gehen Sie wie folgt vor, um die Anwendung lokal zu testen:To test the application on your local machine, use the following steps:

  1. Drücken Sie in Visual Studio F5, um die Anwendung im Debugmodus zu erstellen.Press F5 in Visual Studio to build the application in debug mode. Die Anwendung sollte erstellt, und ein Browser mit der zuvor angezeigten leeren Rasterseite sollte geöffnet werden:It should build the application and launch a browser with the empty grid page we saw before:

    Screenshot der in diesem Tutorial erstellten Aufgabenlisten-Webanwendung

  2. Klicken Sie auf den Link Neu erstellen, und fügen Sie Werte in die Felder Name und Beschreibung ein.Click the Create New link and add values to the Name and Description fields. Lassen Sie das Kontrollkästchen Abgeschlossen deaktiviert, da das neue Element ansonsten im Zustand „Abgeschlossen“ hinzugefügt und nicht in der Anfangsliste angezeigt wird.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. Klicken Sie auf Erstellen. Sie werden zur Ansicht Index zurückgeleitet, und Ihr Element wird in der Liste angezeigt.Click Create and you are redirected back to the Index view and your item appears in the list. Sie können Ihrer Aufgabenliste noch ein paar weitere Elemente hinzufügen.You can add a few more items to your todo list.

    Screenshot der Ansicht „Index“

  4. Wenn Sie auf Bearbeiten neben einem Element in der Liste klicken, werden Sie zur Ansicht Edit weitergeleitet, in der Sie beliebige Eigenschaften Ihres Objekts aktualisieren können, einschließlich der Markierung als Abgeschlossen.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. Wenn Sie das Flag Abgeschlossen markieren und auf Speichern klicken, wird das Element in der Liste als abgeschlossen angezeigt.If you mark the Complete flag and click Save, the Item will be displayed as completed in the list.

    Screenshot der Ansicht „Index“ mit aktiviertem Feld „Abgeschlossen“

  5. Sie können den Zustand der Daten im Azure Cosmos DB-Dienst jederzeit mit dem Cosmos-Explorer oder dem Daten-Explorer des Azure Cosmos DB-Emulators überprüfen.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. Nachdem Sie die App getestet haben, drücken Sie STRG+F5, um das Debuggen der App zu beenden.Once you've tested the app, press Ctrl+F5 to stop debugging the app. Jetzt können Sie Ihre App bereitstellen.You're ready to deploy!

Schritt 7: Bereitstellen der AnwendungStep 7: Deploy the application

Nachdem die vollständige Anwendung korrekt mit Azure Cosmos DB zusammenarbeitet, stellen wir diese Web-App in Azure App Service bereit.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. Klicken Sie zum Veröffentlichen der Anwendung imProjektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Veröffentlichen aus.To publish this application, right-click on the project in Solution Explorer and select Publish.

  2. Wählen Sie im Dialogfeld Veröffentlichen die Option App Service und anschließend Neu erstellen aus, um ein App Service-Profil zu erstellen, oder wählen Sie Vorhandenes auswählen aus, um ein vorhandenes Profil zu verwenden.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. Falls Sie bereits über ein Azure App Service-Profil verfügen, wählen Sie in der Dropdownliste ein Abonnement aus.If you have an existing Azure App Service profile, select a Subscription from the dropdown. Sortieren Sie mithilfe des Filters Ansicht nach der Ressourcengruppe oder dem Ressourcentyp.Use the View filter to sort by resource group or resource type. Suchen Sie dann nach der erforderlichen Azure App Service-Instanz, und wählen Sie OK aus.Next search the required Azure App Service and select OK.

    Dialogfeld „App Service“ in Visual Studio

  4. Um ein neues Azure App Service-Profil zu erstellen, klicken Sie im Dialogfeld Veröffentlichen auf Neu erstellen.To create a new Azure App Service profile, click Create New in the Publish dialog box. Geben Sie im Dialogfeld App Service erstellen den Namen Ihrer Web-App und das entsprechende Abonnement, die Ressourcengruppe und den App Service-Plan ein, und wählen Sie Erstellen aus.In the Create App Service dialog, enter your Web App name and the appropriate subscription, resource group, and App Service plan, then select Create.

    Dialogfeld „App Service erstellen“ in Visual Studio

Nach wenigen Sekunden veröffentlicht Visual Studio Ihre Webanwendung und startet einen Browser mit Ihrem in Azure ausgeführten Projekt.In a few seconds, Visual Studio publishes your web application and launches a browser where you can see your project running in Azure!

Nächste SchritteNext steps

In diesem Tutorial haben Sie gelernt, wie Sie eine ASP.NET Core MVC-Webanwendung erstellen, die auf in Azure Cosmos DB gespeicherte Daten zugreifen kann.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. Sie können jetzt mit dem nächsten Artikel fortfahren:You can now proceed to the next article: