Tutorial: Mengembangkan aplikasi web MVC Inti ASP.NET dengan Azure Cosmos DB dengan menggunakan .NET SDK

BERLAKU UNTUK: SQL API

Tutorial ini menunjukkan kepada Anda cara menggunakan Azure Cosmos DB untuk menyimpan dan mengakses data dari aplikasi MVC ASP.NET yang dihosting di Azure. Dalam tutorial ini, Anda menggunakan .NET SDK V3. Gambar berikut ini memperlihatkan halaman web yang akan Anda susun dengan menggunakan sampel di artikel ini:

Cuplikan layar daftar todo aplikasi web MVC yang dibuat oleh tutorial ini - tutorial langkah demi langkah ASP NET Core MVC

Jika Anda tidak punya waktu untuk menyelesaikan tutorial, Anda dapat mengunduh proyek sampel lengkap dari GitHub.

Tutorial ini mencakup:

  • Membuat akun Azure Cosmos
  • Membuat aplikasi MVC Core ASP.NET
  • Menyambungkan aplikasi Go ke Azure Cosmos DB
  • Melakukan operasi buat, baca, perbarui, dan hapus (CRUD) pada data

Tips

Tutorial ini mengasumsikan bahwa Anda memiliki pengalaman sebelumnya menggunakan ASP.NET Core MVC dan Azure App Service. Jika Anda baru menggunakan ASP.NET Core atau alat prasyarat, kami sarankan Anda untuk mengunduh proyek sampel lengkap dari GitHub, menambahkan paket NuGet yang diperlukan, dan menjalankannya. Setelah membuatnya, Anda dapat meninjau artikel untuk mendapatkan wawasan tentang kode dalam konteks proyek.

Prasyarat

Sebelum mengikuti instruksi dalam artikel ini, pastikan Anda memiliki sumber daya berikut:

Semua tangkapan layar dalam artikel ini berasal dari Komunitas Microsoft Visual Studio 2019. Jika Anda menggunakan versi yang berbeda, layar dan opsi Anda mungkin tidak cocok sepenuhnya. Solusinya harus bekerja jika Anda memenuhi prasyarat.

Langkah 1: Buat akun Azure Cosmos

Mari kita mulai dengan membuat akun Azure Cosmos DB. Jika Anda sudah memiliki akun Azure Cosmos DB SQL API atau jika Anda menggunakan Azure Cosmos DB Emulator, lewati ke Langkah 2: Buat aplikasi MVC ASP.NET baru.

  1. Dari menu portal Microsoft Azure atau Beranda, pilih Buat sumber daya.

  2. Pada halaman Baru, cari dan pilih Azure Cosmos DB.

  3. Pada halaman Azure Cosmos DB, pilih Buat.

  4. Pada halaman Buat Akun Azure Cosmos DB, masukkan pengaturan dasar untuk akun Azure Cosmos yang baru.

    Pengaturan Nilai Deskripsi
    Langganan Nama langganan Pilih langganan Azure yang ingin Anda gunakan untuk akun Azure Cosmos ini.
    Grup Sumber Daya Nama grup sumber daya Pilih grup sumber daya, atau pilih Buat baru, lalu masukkan nama unik untuk grup sumber daya baru.
    Nama Akun Nama yang unik Masukkan nama untuk mengidentifikasi akun Azure Cosmos Anda. Karena documents.azure.com ditambahkan ke nama yang Anda berikan untuk membuat URI Anda, gunakan nama yang unik.

    Nama hanya bisa berisi huruf kecil, angka, dan karakter tanda hubung (-). Panjangnya harus antara 3-44 karakter.
    API Jenis akun yang akan dibuat Pilih Core (SQL) untuk membuat database dokumen dan kueri dengan menggunakan sintaks SQL.

    API menentukan jenis akun yang akan dibuat. Azure Cosmos DB menyediakan lima API: Core (SQL) dan MongoDB untuk data dokumen, Gremlin untuk data grafik, Azure Table, dan Cassandra. Saat ini, Anda harus membuat akun terpisah untuk setiap API.

    Pelajari lebih lanjut tentang API SQL.
    Lokasi Wilayah yang paling dekat dengan pengguna Anda Pilih lokasi geografis untuk menghosting akun Azure Cosmos DB Anda. Gunakan lokasi yang paling dekat dengan pengguna Anda untuk memberi mereka akses tercepat ke data.
    Mode kapasitas Throughput yang disediakan atau Tanpa Server Pilih Throughput yang disediakan untuk membuat akun dalam mode throughput yang disediakan. Pilih Tanpa server untuk membuat akun dalam mode tanpa server.
    Terapkan diskon tingkat gratis Azure Cosmos DB Terapkan atau Jangan terapkan Dengan tingkat gratis Azure Cosmos DB, Anda akan mendapatkan 1000 RU/dtk pertama dan penyimpanan 25 GB secara gratis pada akun. Pelajari lebih lanjut tentang tingkat gratis.

    Catatan

    Anda dapat memiliki hingga satu akun Azure Cosmos DB tingkat gratis per langganan Azure dan harus ikut serta saat membuat akun. Jika Anda tidak melihat opsi untuk menerapkan diskon tingkat gratis, ini berarti akun lain dalam langganan telah diaktifkan dengan tingkat gratis.

    Halaman akun baru untuk Azure Cosmos DB

  5. Pada tab Distribusi Global, konfigurasikan detail berikut. Anda dapat membiarkan nilai default untuk tujuan quickstart ini:

    Pengaturan Nilai Deskripsi
    Redundansi Geografis Nonaktifkan Aktifkan atau nonaktifkan distribusi global di akun Anda dengan memasangkan wilayah Anda dengan wilayah pasangan. Anda dapat menambahkan lebih banyak wilayah ke akun Anda nanti.
    Tulisan Multiwilayah Nonaktifkan Kemampuan tulisan multiwilayah memungkinkan Anda untuk mengambil keuntungan dari throughput terprovisi untuk database dan kontainer Anda di seluruh dunia.

    Catatan

    Opsi berikut ini tidak tersedia jika Anda memilih Tanpa Server sebagai mode Kapasitas:

    • Terapkan Diskon Tingkat Gratis
    • Redundansi Geografis
    • Tulisan Multiwilayah
  6. Secara opsional, Anda dapat mengonfigurasi detail tambahan di tab berikut:

    • Jaringan - Konfigurasikan akses dari jaringan virtual.
    • Kebijakan Pencadangan - Konfigurasikan kebijakan pencadangan berkala atau berkelanjutan.
    • Enkripsi - Gunakan kunci yang dikelola layanan atau kunci yang dikelola pelanggan.
    • Tag - Tag adalah pasangan nama/nilai yang memungkinkan Anda mengategorikan sumber daya dan melihat tagihan gabungan dengan menerapkan tag yang sama ke beberapa sumber daya dan grup sumber daya.
  7. Pilih Tinjau + buat.

  8. Ulas pengaturan akun, lalu pilih Buat. Dibutuhkan beberapa menit untuk membuat akun. Tunggu halaman portal untuk menampilkan Penyebaran Anda selesai.

    Panel Pemberitahuan portal Microsoft Azure

  9. Pilih Buka sumber daya untuk masuk ke halaman akun Azure Cosmos DB.

    Halaman akun Azure Cosmos DB

Buka halaman akun Azure Cosmos DB, dan pilih Kunci. Salin nilai yang akan digunakan dalam aplikasi web yang Anda buat berikutnya.

Cuplikan layar portal Microsoft Azure dengan tombol Kunci disorot di halaman akun Azure Cosmos DB

Di bagian berikutnya, Anda membuat aplikasi ASP.NET Core MVC baru.

Langkah 2: Buat aplikasi ASP.NET Core MVC baru

  1. Buka Visual Studio dan pilih Buat proyek baru.

  2. Di Buat proyek baru, temukan dan pilih ASP.NET Core Web untuk C#. Pilih Berikutnya untuk melanjutkan.

    Buat proyek aplikasi web ASP.NET Core baru

  3. Di Konfigurasikan proyek baru Anda,beri nama todo proyek dan pilih Buat.

  4. Dalam Membuat aplikasi web ASP.NET Core baru,pilih Aplikasi Web (Model-View-Controller). Pilih Buat untuk melanjutkan.

    Visual Studio membuat aplikasi MVC kosong.

  5. Pilih DebugStart Debugging atau F5 untuk menjalankan aplikasi ASP.NET secara lokal.

Langkah 3: Tambahkan paket Azure Cosmos DB NuGet ke proyek

Sekarang kita memiliki sebagian besar kode kerangka ASP.NET MVC Inti yang kita butuhkan untuk solusi ini, mari kita tambahkan paket NuGet yang diperlukan untuk terhubung ke Azure Cosmos DB.

  1. Pada Penjelajah Solusi, klik kanan proyek Anda dan pilih Kelola Paket NuGet.

  2. Di Manajer Paket NuGet,cari dan pilih Microsoft.Azure.Cosmos. Pilih Pasang.

    Install paket Nuget

    Visual Studio mengunduh dan menginstal paket Azure Cosmos DB dan dependensinya.

    Anda juga dapat menggunakan Package Manager Console untuk memasang paket NuGet. Untuk melakukannya, pilih AlatNuGet Package ManagerPackage Manager Console. Pada perintah, ketik perintah berikut ini:

    Install-Package Microsoft.Azure.Cosmos
    

Langkah 4: Siapkan aplikasi ASP.NET Core MVC

Sekarang mari tambahkan model, tampilan, dan pengontrol ke aplikasi web Anda.

Menambahkan model

  1. Di Penjelajah Solusi,klik kanan folder Model, pilih TambahkanKelas.

  2. Di Tambahkan Item Baru, beri nama item kelas baru Item.cs dan pilih Tambahkan.

  3. Ganti konten kelas Item.cs dengan kode berikut:

    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 menggunakan JSON untuk memindahkan dan menyimpan data. Anda dapat menggunakan atribut JsonProperty untuk mengontrol bagaimana JSON menserialisasikan dan mendeserialisasi objek. Kelas Item menunjukkan atribut JsonProperty. Kode ini mengontrol format nama properti yang masuk ke JSON. Ini juga mengganti nama Completed properti .NET.

Menambahkan tampilan

Selanjutnya, mari kita tambahkan tampilan berikut.

  • Tampilan buat item
  • Tampilan hapus item
  • Tampilan untuk mendapatkan detail item
  • Tampilan buat item
  • Tampilan untuk mencantumkan semua item

Membuat tampilan item

  1. Di Penjelajah Solusi,klik kanan folder Tampilan dan pilih TambahkanFolder Baru. Beri nama folder Item.

  2. Klik kanan folder Item kosong, lalu pilih TambahkanTampilan.

  3. Di Tambahkan Tampilan MVC, buat perubahan berikut:

    • Di Tampilkan nama, masukkan Buat.
    • Di Templat, pilih Buat.
    • Di kelas Model, pilih Item (todo. Model).
    • Pilih Gunakan halaman tata letak dan masukkan ~/Views/Shared/_Layout.cshtml.
    • Pilih Tambahkan.

    Cuplikan layar memperlihatkan kotak dialog Tambahkan Tampilan MVC

  4. Selanjutnya pilih Tambahkan dan biarkan Visual Studio membuat tampilan templat baru. Ganti kode dalam file yang dihasilkan dengan konten berikut:

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

Menghapus tampilan item

  1. Dari Penjelajah Solusi, klik kanan folder Item lagi, pilih TambahkanTampilan.

  2. Di Tambahkan Tampilan MVC, buat perubahan berikut:

    • Dalam kotak Nama tampilan, ketik Hapus.
    • Dalam kotak Templat, pilih Hapus.
    • Dalam kotak Kelas model, pilih Item (todo. Model).
    • Pilih Gunakan halaman tata letak dan masukkan ~/Views/Shared/_Layout.cshtml.
    • Pilih Tambahkan.
  3. Selanjutnya pilih Tambahkan dan biarkan Visual Studio membuat tampilan templat baru. Ganti kode dalam file yang dihasilkan dengan konten berikut:

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

Menambahkan tampilan untuk mendapatkan detail item

  1. Dari Penjelajah Solusi, klik kanan folder Item lagi, pilih TambahkanTampilan.

  2. Di Tambahkan Tampilan MVC, berikan nilai berikut ini:

    • Di Tampilkan nama, masukkan Buat.
    • Di Templat, pilih Buat.
    • Di kelas Model, pilih Item (todo. Model).
    • Pilih Gunakan halaman tata letak dan masukkan ~/Views/Shared/_Layout.cshtml.
  3. Selanjutnya pilih Tambahkan dan biarkan Visual Studio membuat tampilan templat baru. Ganti kode dalam file yang dihasilkan dengan konten berikut:

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

Menambahkan tampilan buat item

  1. Dari Penjelajah Solusi, klik kanan folder Item lagi, pilih TambahkanTampilan.

  2. Di Tambahkan Tampilan MVC, buat perubahan berikut:

    • Dalam kotak Nama tampilan, ketik Edit.
    • Dalam kotak Templat, pilih Edit.
    • Dalam kotak Kelas model, pilih Item (todo. Model).
    • Pilih Gunakan halaman tata letak dan masukkan ~/Views/Shared/_Layout.cshtml.
    • Pilih Tambahkan.
  3. Selanjutnya pilih Tambahkan dan biarkan Visual Studio membuat tampilan templat baru. Ganti kode dalam file yang dihasilkan dengan konten berikut:

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

Menambahkan tampilan untuk mencantumkan semua item

Dan akhirnya, tambahkan tampilan untuk mendapatkan semua item dengan langkah-langkah berikut:

  1. Dari Penjelajah Solusi, klik kanan folder Item lagi, pilih TambahkanTampilan.

  2. Di Tambahkan Tampilan MVC, buat perubahan berikut:

    • Dalam kotak Nama tampilan, ketik Indeks.
    • Dalam kotak Templat, pilih Daftar.
    • Dalam kotak Kelas model, pilih Item (todo. Model).
    • Pilih Gunakan halaman tata letak dan masukkan ~/Views/Shared/_Layout.cshtml.
    • Pilih Tambahkan.
  3. Selanjutnya pilih Tambahkan dan biarkan Visual Studio membuat tampilan templat baru. Ganti kode dalam file yang dihasilkan dengan konten berikut:

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

Setelah menyelesaikan langkah-langkah ini, tutup semua dokumen cshtml di Visual Studio.

Mendeklarasikan dan menginisiasi layanan

Pertama, kita akan menambahkan kelas yang berisi logika untuk terhubung dan menggunakan Azure Cosmos DB. Untuk tutorial ini, kita akan merangkum logika ini ke dalam kelas yang disebut dan CosmosDbService antarmuka yang disebut ICosmosDbService. Layanan ini melakukan operasi CRUD. Ini juga membaca operasi umpan seperti mencantumkan item yang tidak lengkap, membuat, mengedit, dan menghapus item.

  1. Di Penjelajah Solusi, klik kanan proyek Anda dan pilih TambahkanFolder Baru. Beri nama folder Services.

  2. Klik kanan folder Layanan, pilih TambahkanKelas. Beri nama kelas baru CosmosDbService dan pilih Tambahkan.

  3. Ganti isi CosmosDbService.cs dengan kode berikut:

    namespace todo
    {
        using System.Collections.Generic;
        using System.Linq;
        using System.Threading.Tasks;
        using todo.Models;
        using Microsoft.Azure.Cosmos;
        using Microsoft.Azure.Cosmos.Fluent;
        using Microsoft.Extensions.Configuration;
    
        public class CosmosDbService : ICosmosDbService
        {
            private Container _container;
    
            public CosmosDbService(
                CosmosClient dbClient,
                string databaseName,
                string containerName)
            {
                this._container = dbClient.GetContainer(databaseName, containerName);
            }
            
            public async Task AddItemAsync(Item item)
            {
                await this._container.CreateItemAsync<Item>(item, new PartitionKey(item.Id));
            }
    
            public async Task DeleteItemAsync(string id)
            {
                await this._container.DeleteItemAsync<Item>(id, new PartitionKey(id));
            }
    
            public async Task<Item> GetItemAsync(string id)
            {
                try
                {
                    ItemResponse<Item> response = await this._container.ReadItemAsync<Item>(id, new PartitionKey(id));
                    return response.Resource;
                }
                catch(CosmosException ex) when (ex.StatusCode == System.Net.HttpStatusCode.NotFound)
                { 
                    return null;
                }
    
            }
    
            public async Task<IEnumerable<Item>> GetItemsAsync(string queryString)
            {
                var query = this._container.GetItemQueryIterator<Item>(new QueryDefinition(queryString));
                List<Item> results = new List<Item>();
                while (query.HasMoreResults)
                {
                    var response = await query.ReadNextAsync();
                    
                    results.AddRange(response.ToList());
                }
    
                return results;
            }
    
            public async Task UpdateItemAsync(string id, Item item)
            {
                await this._container.UpsertItemAsync<Item>(item, new PartitionKey(id));
            }
        }
    }
    
  4. Klik kanan folder Layanan, pilih TambahkanKelas. Beri nama kelas baru CosmosDbService dan pilih Tambahkan.

  5. Tambahkan kode berikut ke kelas ICosmosDbService:

    namespace todo
    {
        using System.Collections.Generic;
        using System.Threading.Tasks;
        using todo.Models;
    
        public interface ICosmosDbService
        {
            Task<IEnumerable<Item>> GetItemsAsync(string query);
            Task<Item> GetItemAsync(string id);
            Task AddItemAsync(Item item);
            Task UpdateItemAsync(string id, Item item);
            Task DeleteItemAsync(string id);
        }
    }
    
  6. Buka file Startup.cs dalam solusi Anda dan tambahkan metode berikut InitializeCosmosClientInstanceAsync, yang membaca konfigurasi dan menginisialisasi klien.

    /// <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. Pada file yang sama, ganti ConfigureServices metode dengan:

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

    Kode dalam langkah ini menginisialisasi klien berdasarkan konfigurasi sebagai instans singleton yang akan disuntikkan melalui injeksi Dependensi ASP.NET Core.

    Dan pastikan untuk mengubah Pengontrol MVC default Item dengan mengedit rute dalam metode file yang Configure sama:

     app.UseEndpoints(endpoints =>
           {
                 endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Item}/{action=Index}/{id?}");
           });
    
  8. Tentukan konfigurasi dalam fileappsettings.js seperti yang diperlihatkan dalam cuplikan berikut:

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

Menambahkan pengontrol

  1. Di Penjelajah Solusi,klik kanan folder Pengontrol, pilih TambahkanPengontrol.

  2. Di Tambahkan Perancah,pilih Pengontrol MVC - Kosong dan pilih Tambahkan.

    Pilih Pengontrol MVC - Kosong di Tambahkan Perancah

  3. Beri nama pengontrol baru Anda ItemController.

  4. Ganti konten kelas ItemController.cs dengan kode berikut:

    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 digunakan di sini untuk membantu melindungi aplikasi ini dari serangan pemalsuan permintaan lintas situs. Pandangan Anda harus bekerja dengan token anti-pemalsuan ini juga. Untuk informasi dan contoh selengkapnya, lihat Mencegah Serangan Pemalsuan Permintaan Lintas Situs (CSRF) ASP.NET Aplikasi MVC. Kode sumber yang disediakan pada GitHub memiliki implementasi penuh.

Kami juga menggunakan atribut Bind pada parameter metode untuk membantu melindungi dari serangan yang berlebihan. Untuk informasi selengkapnya, lihat Tutorial: Menerapkan Fungsi CRUD dengan Kerangka Kerja Entitas di ASP.NET MVC.

Langkah 5: Jalankan aplikasi secara lokal

Untuk menguji aplikasi di komputer lokal Anda, gunakan langkah-langkah berikut:

  1. Tekan F5 di Visual Studio untuk membuat aplikasi dalam mode debug. Ini harus membangun aplikasi dan meluncurkan browser dengan halaman kisi kosong yang kita lihat sebelumnya:

    Cuplikan layar aplikasi web daftar todo yang dibuat oleh tutorial ini

    Jika aplikasi terbuka ke halaman beranda, tambahkan /Item ke url.

  2. Pilih link Buat Baru dan tambahkan nilai ke bidang Namadan Deskripsi. Biarkan kotak centang Selesai tidak dipilih. Jika Anda memilihnya, aplikasi menambahkan item baru dalam status selesai. Item ini tidak lagi muncul di daftar awal.

  3. Pilih Buat. Aplikasi mengirim Anda kembali ke tampilan Indeks, dan item Anda muncul dalam daftar. Anda bisa menambahkan beberapa item lagi ke daftar Harus Dilakukan.

    Cuplikan layar tampilan Indeks

  4. Pilih Edit di samping Item di daftar. Aplikasi ini membuka tampilan Edit tempat Anda dapat memperbarui properti objek, termasuk bendera Selesai. Jika Anda memilih Selesai dan memilihSimpan, aplikasi akan menampilkan Item sebagai selesai dalam daftar.

    Cuplikan layar tampilan Indeks dengan kotak Selesai dicentang

  5. Verifikasi status data dalam layanan Azure Cosmos DB menggunakan Cosmos Explorer atau Data Explorer Azure Cosmos DB Emulator.

  6. Setelah menguji aplikasi, pilih Ctrl+F5 untuk berhenti men-debug aplikasi. Anda siap untuk menyebarkan lagi!

Langkah 6: Sebarkan aplikasi

Sekarang setelah Anda memiliki aplikasi lengkap yang bekerja dengan benar dengan Azure Cosmos DB, kami akan menyebarkan aplikasi web ini ke Azure App Service.

  1. Untuk menerbitkan aplikasi ini, klik kanan proyek di Penjelajah Solusi, dan pilih Terbitkan.

  2. Di Pilih target terbitkan, pilih App Service.

  3. Untuk menggunakan profil App Service yang sudah ada, pilih Pilih Yang Sudah Ada, lalu pilih Terbitkan.

  4. Di App Service, pilih Langganan. Gunakan filter Tampilan untuk mengurutkan menurut grup sumber daya atau tipe sumber daya.

  5. Temukan profil Anda, lalu pilih OK. Berikutnya cari Azure App Service yang diperlukan dan pilih OK.

    Kotak dialog App Service di Visual Studio

Pilihan lain adalah membuat profil baru:

  1. Seperti dalam prosedur sebelumnya, klik kanan proyek di Penjelajah Solusi dan pilihTerbitkan.

  2. Di Pilih target terbitkan, pilih App Service.

  3. Di Pilih target terbitkan,pilih Buat Baru dan pilih Terbitkan.

  4. Di App Service, masukkan nama Web App Anda dan langganan, grup sumber daya, dan paket hosting yang sesuai, lalu pilih Buat.

    Membuat kotak dialog App Service di Visual Studio

Dalam beberapa detik, Visual Studio menerbitkan aplikasi web Anda dan meluncurkan browser di mana Anda dapat melihat proyek Anda berjalan di Azure!

Langkah berikutnya

Dalam tutorial ini, Anda telah belajar cara membangun aplikasi web Core MVC ASP.NET anda. Aplikasi Anda dapat mengakses data yang disimpan di Azure Cosmos DB. Anda sekarang dapat melanjutkan dengan sumber daya ini: