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

  • Článek
  • 17 min ke čtení

PLATÍ PRO: SQL API

V tomto kurzu se ukáže, jak pomocí Azure Cosmos DB ukládat data a přistupovat k ASP.NET aplikace MVC hostované v Azure. V tomto kurzu použijete sadu .NET SDK V3. Následující obrázek ukazuje webovou stránku, kterou sestavíte pomocí ukázky v tomto článku:

Snímek obrazovky s webovou aplikací MVC seznamu úkolů vytvořenou v tomto kurzu – Podrobný kurz k ASP NET Core MVC

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

Tento kurz zahrnuje:

  • Vytvoření účtu azure Cosmos
  • Vytvoření ASP.NET Core MVC
  • Připojení aplikace k Azure Cosmos DB
  • Provádění operací CRUD (vytvoření, čtení, aktualizace a odstranění) s daty

Tip

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

Požadavky

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

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

Krok 1: Vytvoření Cosmos Azure

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

  1. V Azure Portal nebo na domovské stránce vyberte Vytvořit prostředek.

  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 DB.

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

    Název může obsahovat pouze malá písmena, číslice a znak spojovníku (-). Musí mít délku 3 až 44 znaků.
    rozhraní API Typ účtu, který se má vytvořit Vyberte Core (SQL) a vytvořte databázi dokumentů a dotaz pomocí SQL syntaxe.

    Rozhraní API určuje typ účtu, který se má 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.

    Další informace o rozhraní API SQL.
    Umístění Oblast nejbližší vašim uživatelům Vyberte zeměpisné umístění, ve kterém chcete účet služby Azure Cosmos DB hostovat. Použijte umístění, které je vašim uživatelům nejblíže, a podejte jim 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í slevy na bezplatnou úroveň Azure Cosmos DB Použít nebo Neakusovat S úrovní Free služby Azure Cosmos DB získáte v účtu prvních 1 000 RU/s a 25 GB úložiště zdarma. Přečtěte si další informace o úrovni Free.

    Poznámka

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

    Stránka nového účtu pro službu 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
    Geografická redundance Zakázat Povolte nebo zakažte globální distribuci vašeho účtu spárováním oblasti s párovou oblastí. Další oblasti můžete do svého účtu přidat později.
    Zápisy do více oblastí Zakázat Funkce zápisu do více oblastí 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 k dispozici následující možnosti:

    • Použít slevu založenou na bezplatné úrovni
    • Geografická redundance
    • Zápisy do více oblastí

  6. Volitelně můžete nakonfigurovat další podrobnosti na následujících kartách:

  7. Vyberte Zkontrolovat a 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í portálu Azure Portal

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

    Stránka účtu Azure Cosmos DB

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

Snímek obrazovky Azure Portal se zvýrazněnou tlačítkem Klíče na Azure Cosmos DB účtu

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

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

  1. Otevřete Visual Studio a vyberte Create a new project (Vytvořit nový projekt).

  2. V části Vytvořit nový projekt vyhledejte a vyberte ASP.NET Core Web Application for C#. Pokračujte výběrem tlačítka Další.

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

  3. V části Configure your new project (Konfigurace nového projektu) zadejte název projektu todo a vyberte Create (Vytvořit).

  4. V části Vytvořit novou ASP.NET Core webové aplikace zvolte Webová aplikace (Model-View-Controller). Pokračujte výběrem možnosti Vytvořit.

    Visual Studio vytvoří prázdnou aplikaci MVC.

  5. Vyberte > Ladit a spustit ladění nebo F5, aby se vaše ASP.NET aplikace spouštěla místně.

Krok 3: Přidání Cosmos DB NuGet do projektu

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

  1. V Průzkumník ř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 také konzolu NuGet. Pokud to chcete udělat, vyberte Nástroje > NuGet Správce balíčků > Správce balíčků Console. Na příkazovém řádku zadejte následující příkaz:

    Install-Package Microsoft.Azure.Cosmos

Krok 4: Nastavení ASP.NET Core MVC

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

Přidání modelu

  1. V Průzkumník řešení klikněte pravým tlačítkem na složku Models (Modely) a vyberte Add Class > (Přidat třídu).

  2. V části Přidat novou položku zadejte název nové třídy Item.cs a vyberte Přidat.

  3. Obsah třídy Item.cs nahraďte 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řesunu 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 řídí formát názvu vlastnosti, který přejde do formátu JSON. Přejmenuje také vlastnost .NET Completed .

Přidání zobrazení

Teď přidáme následující zobrazení.

  • Zobrazení vytvořit položku
  • Zobrazení odstranit položku
  • Zobrazení pro získání podrobností o položce
  • Zobrazení upravit položku
  • Zobrazení pro zobrazení seznamu všech položek

Zobrazení vytvořit položku

  1. V Průzkumník řešení klikněte pravým tlačítkem na složku Zobrazení a vyberte Přidat > novou složku. Složku pojmete Item.

  2. Klikněte pravým tlačítkem na prázdnou složku Item (Položka) a pak vyberte Add View > (Přidat zobrazení).

  3. V části Přidat zobrazení MVC proveďte následující změny:

    • V části View name (Název zobrazení) zadejte Create (Vytvořit).
    • V části Šablona vyberte Vytvořit.
    • V části Model class(Třída modelu) vyberte Item (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. Dále vyberte Přidat a Visual Studio vytvořit nové zobrazení šablony. Nahraďte kód ve vygenerované 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>

Zobrazení odstranit položku

  1. V Průzkumník řešení znovu klikněte pravým tlačítkem na složku Item a vyberte Přidat > zobrazení.

  2. V části Přidat zobrazení MVC proveďte následující změny:

    • Do pole Název zobrazení zadejte Odstranit.
    • V poli Šablona vyberte Odstranit.
    • V poli Třída modelu vyberte Položka (todo.Models).
    • Vyberte Použít stránku rozložení a zadejte ~/Views/Shared/_Layout.cshtml.
    • Vyberte Přidat.

  3. Dále vyberte Přidat a Visual Studio vytvořit nové zobrazení šablony. Nahraďte kód ve vygenerované 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ík řešení znovu klikněte pravým tlačítkem na složku Item (Položka) a vyberte Add View > (Přidat zobrazení).

  2. V části Přidat zobrazení MVC zadejte následující hodnoty:

    • Do pole View name (Název zobrazení) zadejte Details (Podrobnosti).
    • V části Šablona vyberte Podrobnosti.
    • V části Model class(Třída modelu) vyberte Item (todo). Modely).
    • Vyberte možnost 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í upravit položku

  1. Z Průzkumník řešení znovu klikněte pravým tlačítkem na složku položky a vyberte Přidat > zobrazení.

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

    • Do pole Název zobrazení zadejte Edit.
    • V poli Šablona vyberte Edit.
    • V poli Třída modelu vyberte Položka (todo.Models).
    • Vyberte možnost 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řidat zobrazení pro výpis všech položek

A nakonec přidejte zobrazení pro získání všech položek pomocí následujících kroků:

  1. Z Průzkumník řešení znovu klikněte pravým tlačítkem na složku položky a vyberte Přidat > zobrazení.

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

    • Do pole Název zobrazení zadejte Index.
    • V poli Šablona vyberte Seznam.
    • V poli Třída modelu vyberte Položka (todo.Models).
    • Vyberte možnost 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í těchto kroků zavřete všechny dokumenty cshtml v Visual Studio.

Deklarovat a inicializovat služby

nejprve přidáme třídu, která obsahuje logiku pro připojení a použití Azure Cosmos DB. Pro tento kurz zapouzdřeme tuto logiku do třídy s názvem CosmosDbService a z rozhraní s názvem ICosmosDbService . Tato služba provádí operace CRUD. Také provádí operace čtení informačního kanálu, jako je například výpis neúplných položek, vytváření, úpravy a odstraňování položek.

  1. V Průzkumník řešení klikněte pravým tlačítkem myši na projekt a vyberte Přidat > novou složku. Pojmenujte složku služby.

  2. Klikněte pravým tlačítkem na složku služby a vyberte Přidat > třídu. Pojmenujte novou třídu CosmosDbService a vyberte Přidat.

  3. Obsah CosmosDbService. cs nahraďte 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řidat > třídu. Pojmenujte novou třídu ICosmosDbService a vyberte Přidat.

  5. Do třídy ICosmosDbService přidejte 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 ve vašem ř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. Na stejném souboru nahraďte ConfigureServices metodu pomocí:

    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 typu Singleton, která se má vložit prostřednictvím Injektáže závislosti v ASP.NET Core.

    A nezapomeňte změnit výchozí kontroler MVC na tak, že Item upravíte trasy v Configure metodě 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 je znázorněno v následujícím fragmentu 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í kontroleru

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

  2. V nástroji Přidat generování uživatelského rozhraní vyberte možnost kontroler MVC – prázdné a vyberte Přidat.

    Vybrat kontroler MVC – prázdné v přidat generování uživatelského rozhraní

  3. Pojmenujte svůj nový kontroler ItemController.

  4. Obsah ItemController. cs nahraďte 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á ke zvýšení ochrany této aplikace proti útokům proti padělání žádostí mezi lokalitami. Vaše zobrazení by měla spolupracovat i s tímto tokenem ochrany proti padělání. další informace a příklady naleznete v tématu prevence útoků CSRF (Site-to Request) v aplikaci ASP.NET MVC. Zdrojový kód dostupný na GitHubu má toto plně implementováno.

Pro zajištění ochrany před útoky na převzetí služeb při selhání používáme také atribut BIND u parametru Method. další informace najdete v tématu kurz: implementace funkce CRUD pomocí Entity Framework v ASP.NET MVC.

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

K otestování aplikace na místním počítači použijte následující postup:

  1. stisknutím klávesy F5 v Visual Studio sestavíte aplikaci v režimu ladění. Po sestavení aplikace by se měl spustit prohlížeč se stránkou s prázdnou mřížkou, kterou jsme viděli dříve:

    Snímek webové aplikace seznamu úkolů vytvořené v tomto kurzu

    Pokud se místo toho aplikace otevře na domovské stránce, připojí /Item se k adrese URL.

  2. Vyberte odkaz vytvořit nový a přidejte hodnoty do polí název a Popis . Zrušte zaškrtnutí políčka dokončeno . Pokud ho vyberete, aplikace přidá novou položku do dokončeného stavu. Položka se již nezobrazuje v počátečním seznamu.

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

    Snímek obrazovky s zobrazením indexu

  4. Vyberte Upravit vedle položky v seznamu. Aplikace otevře zobrazení pro Úpravy , kde můžete aktualizovat jakoukoli 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 zobrazení indexu se zaškrtnutým políčkem dokončeno

  5. ověřte stav dat ve službě Azure Cosmos DB pomocí Cosmos exploreru nebo Průzkumník dat Azure Cosmos DB Emulator.

  6. Po otestování aplikace vyberte CTRL + F5 a zastavte ladění aplikace. Jste připraveni aplikaci nasadit!

Krok 6: nasazení aplikace

Nyní, když je aplikace dokončena a správně funguje se službou Azure Cosmos DB, nasadíme tuto webovou aplikaci ve službě Azure App Service.

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

  2. V rozevíracím App Service vybrat cíl publikování vyberte možnost .

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

  4. V App Service vyberte předplatné. Použijte filtr zobrazení k řazení podle skupiny prostředků nebo typu prostředku.

  5. Najděte svůj profil a pak vyberte OK. V dalším hledání požadovaného Azure App Service a vyberte OK.

    Dialogové okno App Service v sadě Visual Studio

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

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

  2. V rozevíracím App Service vybrat cíl publikování vyberte možnost .

  3. V rozevíracím výběru vybrat cíl publikování vyberte vytvořit novou a vyberte publikovat.

  4. V App Service zadejte název vaší webové aplikace a příslušné předplatné, skupinu prostředků a plán hostování a pak vyberte vytvořit.

    Dialogové okno Vytvořit plán App Service v sadě Visual Studio

během několika sekund Visual Studio publikování webové aplikace a spustí prohlížeč, kde vidíte svůj projekt spuštěný v Azure!

Další kroky

v tomto kurzu jste se naučili, jak vytvořit webovou aplikaci 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 s těmito prostředky: