Kurz: Vývoj webové ASP.NET Core MVC pomocí Azure Cosmos DB pomocí sady .NET SDK

PLATÍ PRO: SQL API

Tento kurz ukazuje, jak používat Azure Cosmos DB k ukládání a přístupu k datům z ASP.NET MVC hostované v Azure. V tomto kurzu použijete sadu .NET SDK V3. Na následujícím obrázku je webová stránka, kterou budete vytvářet pomocí ukázky v tomto článku:

Snímek obrazovky s webovou aplikací MVC seznamu todo vytvořenou v tomto kurzu – kurz ASP NET Core MVC krok za krokem

Pokud nemáte čas na dokončení kurzu, můžete si celý ukázkový projekt stáhnout z GitHub.

Tento kurz se týká:

  • Vytvoření účtu azure Cosmos účtu
  • Vytvoření ASP.NET Core MVC
  • Připojení aplikace k Azure Cosmos DB
  • Provádění operací vytváření, čtení, aktualizace a odstraňování dat (CRUD)

Tip

V tomto kurzu se předpokládá, že máte předchozí zkušenosti s ASP.NET Core MVC a Azure App Service. Pokud s ASP.NET Core nebo požadovanými nástroji ještě nevíte, doporučujeme stáhnout si kompletní ukázkový projekt z GitHub,přidat požadované NuGet a spustit ho. Po vytvoření projektu si můžete tento článek prohlédněte, abyste získali přehled o kódu v kontextu projektu.

Předpoklady

Než budete podle pokynů v tomto článku, ujistěte se, že máte následující zdroje informací:

  • Aktivní účet Azure. Pokud předplatné Azure nemáte, vytvořte si před začátkem bezplatný účet.

    Azure Cosmos DB si můžete vyzkoušet zdarma bez předplatného Azure, bezplatně a závazků nebo si vytvořit účet bezplatné úrovně Azure Cosmos DBs prvními 400 ru/s a 5 GB úložiště zdarma. Azure Cosmos DB Emulator s identifikátorem URI . Informace o klíči pro použití s emulátorem najdete v tématu Ověřování žádostí.

  • Visual Studio 2019. Stáhněte si a používejte bezplatnou Visual Studio 2019 Community Edition. Ujistěte se, že během nastavení azure developmentu povolíte Visual Studio prostředí.

Všechny snímky obrazovky v tomto článku jsou z Microsoft Visual Studio Community 2019. Pokud používáte jinou verzi, nemusí se obrazovky a možnosti úplně shodovat. Řešení by mělo fungovat, pokud splňujete předpoklady.

Krok 1: Vytvoření účtu Azure Cosmos účtu

Začínáme vytvořením účtu Azure Cosmos účtu. Pokud už máte účet Rozhraní API azure Cosmos DB SQL nebo pokud používáte Azure Cosmos DB Emulator, přejděte ke kroku 2: Vytvořenínové aplikace ASP.NET MVC .

  1. V nabídce Azure Portal nebo na domovské stráncevyberte Vytvořit zdroj.

  2. Na stránce Nový vyhledejte a vyberte Azure Cosmos DB.

  3. Na stránce Azure Cosmos DB vyberte Vytvořit.

  4. Na stránce Create Azure Cosmos DB Account (Vytvořit účet Azure Cosmos DB) zadejte základní nastavení nového účtu Azure Cosmos azure.

    Nastavení Hodnota Popis
    Předplatné Název předplatného Vyberte předplatné Azure, které chcete pro tento účet Azure Cosmos účtu.
    Skupina zdrojů Název skupiny prostředků Vyberte skupinu prostředků nebo vyberte Vytvořit novýa zadejte jedinečný název nové skupiny prostředků.
    Název účtu Jedinečný název Zadejte název, který identifikuje váš účet Azure Cosmos účtu. Vzhledem documents.azure.com, že je k názvu, který poskytnete k vytvoření identifikátoru URI, připojen, použijte jedinečný název.

    Název může obsahovat jenom malá písmena, čísla a pomlčku (-). Musí mít délku 3 až 44 znaků.
    ROZHRANÍ API Typ účtu, který chcete vytvořit Vyberte Základní (SQL) a vytvořte databázi dokumentů a dotaz pomocí SQL syntaxe.

    Rozhraní API určuje typ účtu, který chcete vytvořit. Azure Cosmos DB poskytuje pět rozhraní API: Core (SQL) a MongoDB pro data dokumentů, Gremlin pro data grafu, Azure Table a Cassandra. V současné době musíte pro každé rozhraní API vytvořit samostatný účet.

    Přečtěte si další informace o rozhraní SQL API.
    Umístění Oblast nejblíže vašim uživatelům Vyberte geografickou polohu, ve které chcete hostovat svůj účet Azure Cosmos DB. Umístění, které je nejblíže uživatelům, jim umožňuje nejrychlejší přístup k datům.
    Režim kapacity Zřízená propustnost nebo bez serveru Vyberte Zřízená propustnost a vytvořte účet v režimu zřízené propustnosti. Vyberte Bez serveru a vytvořte účet v režimu bez serveru.
    Použití bezplatné slevy Cosmos db azure Použít nebo Nepou ít S bezplatnou úrovní Cosmos DB získáte prvních 1 000 RU/s a 25 GB úložiště zdarma v účtu. Přečtěte si další informace o bezplatné vrstvě.

    Poznámka:

    Můžete mít až jeden bezplatný účet Azure Cosmos DB pro jedno předplatné Azure a při vytváření účtu se musíte přihlásit. Pokud možnost uplatnit bezplatnou slevu na úrovni nevidíte, znamená to, že u bezplatné úrovně už byl povolen jiný účet v předplatném.

    Stránka nového účtu pro Azure Cosmos DB

  5. Na kartě Globální distribuce nakonfigurujte následující podrobnosti. Pro účely tohoto rychlého startu můžete ponechat výchozí hodnoty:

    Nastavení Hodnota Popis
    Geo-Redundancy Zakázat Povolte nebo zakažte globální distribuci na svém účtu spárováním oblasti s dvojicí oblastí. Další oblasti můžete ke svému účtu přidat později.
    Zápisy ve více oblastech Zakázat Funkce zápisu ve více oblastech umožňuje využít zřízenou propustnost pro databáze a kontejnery po celém světě.

    Poznámka:

    Pokud jako režim kapacity vyberete Bez serveru, nejsou dostupné následující možnosti:

    • Použití bezplatné slevy na úrovni
    • Geografická redundance
    • Zápisy ve více oblastech
  6. Volitelně můžete nakonfigurovat další podrobnosti na následujících kartách:

  7. Vyberte Revize + vytvořit.

  8. Zkontrolujte nastavení účtu a pak vyberte Vytvořit. Vytvoření účtu trvá několik minut. Počkejte, až se na stránce portálu zobrazí Vaše nasazení je dokončené.

    Podokno Oznámení na portálu Azure Portal

  9. Vyberte Přejít na prostředek a přejděte na stránku účtu Azure Cosmos DB.

    Stránka účtu Azure Cosmos DB

Přejděte na stránku účtu Azure Cosmos DB a vyberte Klávesy. Zkopírujte hodnoty, které chcete použít ve webové aplikaci, kterou vytvoříte jako další.

Snímek obrazovky s portálem Azure s zvýrazněnou tlačítkem Klíče na stránce účtu Azure Cosmos DB

V další části vytvoříte novou aplikaci ASP.NET Core MVC.

Krok 2: Vytvoření nové ASP.NET Core MVC

  1. Otevřete Visual Studio a vyberte Vytvořit nový projekt.

  2. V části Vytvoření nového projektunajděte a vyberte ASP.NET Core webovou aplikaci pro C#. Pokračujte výběrem možnosti Další.

    Vytvoření nového ASP.NET Core webové aplikace

  3. V části Konfigurace nového projektupojmnujte projekt todo a vyberte Vytvořit.

  4. V části Create a new ASP.NET Core Web Application(Vytvořit novou webovou aplikaci) zvolte Webová aplikace (Model-View-Controller). Pokračujte výběrem možnosti Vytvořit.

    Visual Studio vytvoří prázdnou aplikaci MVC.

  5. Vyberte Laděníspustit ladění nebo F5, abyste ASP.NET aplikaci místně.

Krok 3: Přidání balíčku azure Cosmos DB NuGet do projektu

Teď, když máme většinu kódu ASP.NET Core MVC, který pro toto řešení potřebujeme, přidáme balíčky NuGet potřebné pro připojení k Azure Cosmos DB.

  1. V Průzkumníku řešeníklikněte pravým tlačítkem na projekt a vyberte Spravovat NuGet balíčky.

  2. V NuGet Správce balíčkůvyhledejte a vyberte Microsoft.Azure.Cosmos. Vyberte Nainstalovat.

    Instalace NuGet balíčku

    Visual Studio stáhne a nainstaluje balíček Azure Cosmos DB a jeho závislosti.

    K instalaci balíčku Správce balíčků můžete použít NuGet konzolu. Pokud to chcete udělat, vyberte Nástroje NuGet Správce balíčkůSprávce balíčků Console. Na výzvu zadejte následující příkaz:

    Install-Package Microsoft.Azure.Cosmos
    

Krok 4: Nastavení ASP.NET Core MVC

Teď přidáme modely, zobrazení a ovladače do této aplikace MVC.

Přidání modelu

  1. V Průzkumníkovi řešeníklikněte pravým tlačítkem na složku Modely a vyberte Přidattřídu.

  2. V části Add New Item(Přidat novou položku) pojmnte novou třídu Item.cs a vyberte Add (Přidat).

  3. Nahraďte obsah třídy Item.cs následujícím kódem:

    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 používá k přesunutí a ukládání dat JSON. Pomocí atributu JsonProperty můžete řídit, jak JSON serializuje a deserializuje objekty. Třída Item ukazuje JsonProperty atribut. Tento kód určuje formát názvu vlastnosti, který přejde do formátu JSON. Přejmenuje se taky vlastnost .NET Completed .

Přidání zobrazení

Potom přidejte následující zobrazení.

  • Zobrazení vytvořit položku
  • Zobrazení odstranit položku
  • Zobrazení s podrobnostmi o položce
  • Zobrazení pro úpravy položek
  • Zobrazení se seznamem všech položek

Vytvoření zobrazení položek

  1. V Průzkumníkovi řešeníklikněte pravým tlačítkem na složku Zobrazení a vyberte Přidat novousložku. Pojmnováte složku Položka.

  2. Klikněte pravým tlačítkem myši na prázdnou složku Položka a pak vyberte Přidatzobrazení.

  3. V zobrazení Přidat MVCproveďte následující změny:

    • Do pole Název zobrazenízadejte Vytvořit.
    • V části Šablonavyberte Vytvořit.
    • V části Třída modeluvyberte Položku (todo). Modely).
    • Vyberte Použít stránku rozložení a zadejte ~/Views/Shared/_Layout.cshtml.
    • Vyberte Přidat.

    Snímek obrazovky s dialogem Přidat zobrazení MVC

  4. Potom vyberte Přidat a Visual Studio vytvořit nové zobrazení šablony. Nahraďte kód ve vygenerovaném souboru následujícím obsahem:

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

Odstranění zobrazení položek

  1. V Průzkumníkovi řešeníznovu klikněte pravým tlačítkem na složku Položka a vyberte Přidatzobrazení.

  2. V zobrazení Přidat MVCproveďte následující změny:

    • Do pole Název zobrazení zadejte Odstranit.
    • V poli Šablona vyberte Odstranit.
    • V poli Model třídy vyberte Položku (todo). Modely).
    • Vyberte Použít stránku rozložení a zadejte ~/Views/Shared/_Layout.cshtml.
    • Vyberte Přidat.
  3. Potom vyberte Přidat a Visual Studio vytvořit nové zobrazení šablony. Nahraďte kód ve vygenerovaném souboru následujícím obsahem:

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

Přidání zobrazení pro získání podrobností o položce

  1. V Průzkumníkovi řešeníznovu klikněte pravým tlačítkem na složku Položka a vyberte Přidatzobrazení.

  2. V zobrazení Přidat MVCzadejte následující hodnoty:

    • Do pole Název zobrazenízadejte Podrobnosti.
    • V části Šablonavyberte Podrobnosti.
    • V části Třída modeluvyberte Položku (todo). Modely).
    • Vyberte Použít stránku rozložení a zadejte ~/Views/Shared/_Layout.cshtml.
  3. Potom vyberte Přidat a Visual Studio vytvořit nové zobrazení šablony. Nahraďte kód ve vygenerovaném souboru následujícím obsahem:

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

Přidání zobrazení pro úpravy položek

  1. V Průzkumníkovi řešeníznovu klikněte pravým tlačítkem na složku Položka a vyberte Přidatzobrazení.

  2. V zobrazení Přidat MVCproveďte následující změny:

    • Do pole Název zobrazení zadejte Upravit.
    • V poli Šablona vyberte Upravit.
    • V poli Model třídy vyberte Položku (todo). Modely).
    • Vyberte Použít stránku rozložení a zadejte ~/Views/Shared/_Layout.cshtml.
    • Vyberte Přidat.
  3. Potom vyberte Přidat a Visual Studio vytvořit nové zobrazení šablony. Nahraďte kód ve vygenerovaném souboru následujícím obsahem:

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

Přidání zobrazení do seznamu všech položek

A nakonec přidejte zobrazení, aby se všechny položky dostaly pomocí následujících kroků:

  1. V Průzkumníkovi řešeníznovu klikněte pravým tlačítkem na složku Položka a vyberte Přidatzobrazení.

  2. V zobrazení Přidat MVCproveďte následující změny:

    • Do pole Název zobrazení zadejte Index.
    • V poli Šablona vyberte Seznam.
    • V poli Model třídy vyberte Položku (todo). Modely).
    • Vyberte Použít stránku rozložení a zadejte ~/Views/Shared/_Layout.cshtml.
    • Vyberte Přidat.
  3. Potom vyberte Přidat a Visual Studio vytvořit nové zobrazení šablony. Nahraďte kód ve vygenerovaném souboru následujícím obsahem:

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

Po dokončení tohoto postupu zavřete všechny dokumenty cshtml v Visual Studio.

Deklarace a inicializace služeb

Nejdřív přidáme třídu, která obsahuje logiku pro připojení k Azure Cosmos DB a jejich používání. V tomto kurzu tuto logiku zalétáme do třídy s názvem CosmosDbService a rozhraní s názvem ICosmosDbService . Tato služba dělá operace CRUD. Dělá taky operace čtení informačního kanálu, jako je výpis neúplných položek, vytváření, úpravy a odstraňování položek.

  1. V Průzkumníkovi řešeníklikněte pravým tlačítkem na projekt a vyberte Přidat novousložku. Pojmnováte složku Služby.

  2. Klikněte pravým tlačítkem na složku Služby a vyberte Přidattřídu. Pojmnováte novou třídu CosmosDbService a vyberte Přidat.

  3. Nahraďte obsah služby CosmosDbService.cs následujícím kódem:

    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. Klikněte pravým tlačítkem na složku Služby a vyberte Přidattřídu. Pojmnováte novou třídu ICosmosDbService a vyberte Přidat.

  5. Přidejte do třídy ICosmosDbService následující kód:

    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. Otevřete soubor Startup.cs v řešení a přidejte následující metodu InitializeCosmosClientInstanceAsync, která přečte konfiguraci a inicializuje klienta.

    /// <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. U stejného souboru nahraďte ConfigureServices metodu:

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

    Kód v tomto kroku inicializuje klienta na základě konfigurace jako instance singletonu, která se má injekčně aplikovat pomocí vkládání závislostí ASP.NET Core.

    A nezapomeňte změnit výchozí řadič MVC tak, že upravíte trasy v metodě ItemConfigure stejného souboru:

     app.UseEndpoints(endpoints =>
           {
                 endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Item}/{action=Index}/{id?}");
           });
    
  8. Definujte konfiguraci v souboru appsettings.json projektu, jak ukazuje následující fragment kódu:

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

Přidání ovladače

  1. V Průzkumníkovi řešeníklikněte pravým tlačítkem na složku Řadiče a vyberte Přidatřadič.

  2. V části Add Scaffold(Přidat uživatelské rozhraní) vyberte MVC Controller (Ovladač MVC) – Empty (Prázdný) a vyberte Add (Přidat).

    Select MVC Controller - Empty in Add Scaffold

  3. Pojmnováte nový ovladač ItemController.

  4. Nahraďte obsah ItemController.cs následujícím kódem:

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

Atribut ValidateAntiForgeryToken se tady používá k ochraně této aplikace před útoky z padělků žádostí na více webů. Vaše zobrazení by měla fungovat i s tímto tokenem ochrany proti padělku. Další informace a příklady najdete v tématu Zabránění útokům csrf (Cross-Site Request Forgery)v ASP.NET MVC . Zdrojový kód poskytnutý v GitHub má úplnou implementaci.

Atribut Bind používáme také u parametru metody, který pomáhá chránit před útoky přeúčtování. Další informace najdete v tématu Kurz: Implementace funkcí CRUD pomocí rozhraní Entity Framework v ASP.NET MVC.

Krok 5: Spuštění aplikace místně

Pokud chcete aplikaci otestovat na místním počítači, postupujte takto:

  1. Stisknutím klávesy F5 Visual Studio vytvořte aplikaci v režimu ladění. Měl by vytvořit aplikaci a spustit prohlížeč s prázdnou stránkou mřížky, která jsme viděli předtím:

    Snímek obrazovky s webovou aplikací seznam todo vytvořenou v tomto kurzu

    Pokud se aplikace místo toho otevře na domovskou stránku, /Item připojte ji k adrese url.

  2. Vyberte odkaz Vytvořit nový a přidejte hodnoty do políNázev a Popis. Nezaškrtávejte políčko Dokončeno. Pokud ji vyberete, přidá aplikace novou položku do dokončeného stavu. Položka se už v počátečním seznamu nezobrazí.

  3. Vyberte Vytvořit. Aplikace vás pošle zpátky do zobrazení Rejstřík a vaše položka se zobrazí v seznamu. Do svého seznamu můžete přidat několik dalších To-Do položek.

    Snímek obrazovky s indexem

  4. Vyberte Upravit vedle položky v seznamu. Aplikace otevře zobrazení pro úpravy, kde můžete aktualizovat libovolnou vlastnost objektu, včetně příznaku Dokončeno. Pokud vyberete Dokončeno a vyberete Uložit, aplikace zobrazí položku jako dokončenou v seznamu.

    Snímek obrazovky s indexem se zaškrtnutou zaškrtávacím polem Dokončeno

  5. Ověřte stav dat ve službě Azure Cosmos DB pomocí Průzkumníka Cosmos nebo Průzkumníka dat azure Cosmos Emulator DB.

  6. Po otestování aplikace vyberte kombinaci kláves Ctrl+F5 a tím aplikaci zastavíte. Jste připravení k nasazení.

Krok 6: Nasazení aplikace

Teď, když s Azure Cosmos DB správně pracujete, nasadíme tuto webovou aplikaci do služby Azure App Service.

  1. Pokud chcete tuto aplikaci publikovat, klikněte pravým tlačítkem myši na projekt v Průzkumníkovi řešení a vyberte Publikovat.

  2. V části Vyberte cíl publikovánívyberte Služba aplikací.

  3. Pokud chcete použít existující profil služby App Service, zvolte Vybrat existujícía pak vyberte Publikovat.

  4. Ve službě App Servicevyberte předplatné. Pomocí filtru Zobrazení můžete řadit podle skupiny zdrojů nebo typu zdroje.

  5. Najděte svůj profil a pak vyberte OK. Potom vyhledejte požadovanou službu Azure App Service a vyberte OK.

    Dialogové okno Služba aplikací v Visual Studio

Další možností je vytvořit nový profil:

  1. Stejně jako v předchozím postupu klikněte pravým tlačítkem myši na projekt v Průzkumníkovi řešení a vyberte Publikovat.

  2. V části Vyberte cíl publikovánívyberte Služba aplikací.

  3. V části Vybrat cíl publikovánívyberte Vytvořit nový a vyberte Publikovat.

  4. Ve službě App Servicezadejte název webové aplikace a příslušné předplatné, skupinu prostředků a hostingový plán a pak vyberte Vytvořit.

    Dialogové okno Vytvořit službu aplikací v Visual Studio

Během několika sekund Visual Studio webovou aplikaci a spustí prohlížeč, ve kterém uvidíte projekt běžící v Azure!

Další kroky

V tomto kurzu jste se naučili, jak vytvořit webovou ASP.NET Core MVC. Vaše aplikace má přístup k datům uloženým v Azure Cosmos DB. Teď můžete pokračovat v těchto zdrojích: