Aracılığıyla paylaş

ASP.NET Web API'siyle RESTful API'leri oluşturma

Web Camps Ekibi tarafından

Uygulamalı laboratuvar: Bir kişi yöneticisi uygulaması için basit bir REST API oluşturmak üzere ASP.NET 4.x'te Web API'sini kullanın. Ayrıca API'yi kullanmak için bir istemci oluşturacaksınız.

Son yıllarda HTTP'nin yalnızca HTML sayfalarını kullanıma sunma amaçlı olmadığı açıkça ortaya çıktı. Ayrıca, bir dizi fiil (GET, POST vb.) ve URI'ler ve üst bilgiler gibi birkaç basit kavram kullanarak Web API'leri oluşturmaya yönelik güçlü bir platformdur. ASP.NET Web API'si, HTTP programlamayı basitleştiren bir bileşen kümesidir. ASP.NET MVC çalışma zamanının üzerine oluşturulduğundan, Web API'si HTTP'nin alt düzey aktarım ayrıntılarını otomatik olarak işler. Aynı zamanda, Web API'si doğal olarak HTTP programlama modelini kullanıma sunar. Aslında, Web API'sinin bir amacı HTTP gerçekliğini soyutlamamaktır. Sonuç olarak, Web API'sini hem esnek hem de genişletmesi kolaydır. REST mimari stilinin HTTP'yi kullanmak için etkili bir yol olduğu kanıtlanmıştır; ancak HTTP'ye yönelik tek geçerli yaklaşım kesinlikle bu değildir. Kişi yöneticisi, restful'ı diğer kişilerin arasında kişileri listelemek, eklemek ve kaldırmak için kullanıma sunar.

Bu laboratuvar HTTP, REST hakkında temel bir anlayış gerektirir ve HTML, JavaScript ve jQuery hakkında temel bir çalışma bilginize sahip olduğunuzu varsayar.

Not

ASP.NET Web sitesinin konumundaki https://asp.net/web-apiASP.NET Web API çerçevesine ayrılmış bir alanı vardır. Bu site, Web API'sine ilişkin en son bilgiler, örnekler ve haberler sağlamaya devam edecektir. Bu nedenle, neredeyse tüm cihazlar veya geliştirme çerçeveleri için kullanılabilir özel Web API'leri oluşturma sanatını daha ayrıntılı olarak incelemek istiyorsanız bu siteyi sık sık kontrol edin.

ASP.NET MVC 4'e benzer ASP.NET Web API'sinin, hizmet katmanını denetleyicilerden ayırma açısından büyük esnekliği vardır ve bu sayede kullanılabilir Bağımlılık Ekleme çerçevelerinin birkaçını oldukça kolay kullanabilirsiniz.

Tüm örnek kod ve kod parçacıkları, adresinde bulunan Web Camps Eğitim Seti'ne https://github.com/Microsoft-Web/WebCampTrainingKit/releasesdahildir.

Hedefler

Bu uygulamalı laboratuvarda şunları nasıl yapacağınızı öğreneceksiniz:

  • RESTful Web API'si uygulama
  • HTML istemcisinden API'yi çağırma

Önkoşullar

Bu uygulamalı laboratuvarı tamamlamak için aşağıdakiler gereklidir:

  • Web veya üstü için Microsoft Visual Studio Express 2012 (yükleme yönergeleri için Ek B'yi okuyun).

Ayarlama

Kod Parçacıklarını Yükleme

Kolaylık olması için, bu laboratuvarda yöneteceğin kodun büyük bölümü Visual Studio kod parçacıkları olarak kullanılabilir. Kod parçacıklarını yüklemek için .\Source\Setup\CodeSnippets.vsi dosyasını çalıştırın.

Visual Studio Code Kod Parçacıkları hakkında bilgi sahibi değilseniz ve bunların nasıl kullanılacağını öğrenmek istiyorsanız, "Ek A: Kod Parçacıklarını Kullanma" belgesinden eke bakabilirsiniz.

Egzersiz

Bu uygulamalı laboratuvar aşağıdaki alıştırmayı içerir:

  1. Alıştırma 1: Salt Okunur Web API'si oluşturma
  2. Alıştırma 2: Okuma/Yazma Web API'si oluşturma
  3. Alıştırma 3: Html İstemcisinden Web API'sini kullanma

Not

Her alıştırmaya, alıştırmaları tamamladıktan sonra edinmeniz gereken çözümü içeren bir End klasörü eşlik eder. Alıştırmalar üzerinde ek yardıma ihtiyacınız varsa bu çözümü kılavuz olarak kullanabilirsiniz.

Bu laboratuvarın tamamlanması için tahmini süre: 60 dakika.

Alıştırma 1: Salt Okunur Web API'si oluşturma

Bu alıştırmada, kişi yöneticisi için salt okunur GET yöntemlerini uygulayacaksınız.

Görev 1 - API Projesi Oluşturma

Bu görevde, web API'si web uygulaması oluşturmak için yeni ASP.NET web projesi şablonlarını kullanacaksınız.

  1. Web için Visual Studio 2012 Express'i çalıştırın, bunu yapmak için Başlat'a gidin ve Web için VS Express yazın ve Enter tuşuna basın.

  2. Dosya menüsünden Yeni Proje'yi seçin. Visual C# | öğesini seçin Proje türü ağaç görünümünden web projesi türü, ardından ASP.NET MVC 4 Web Uygulaması proje türünü seçin. Projenin Adı'nı ContactManager ve Çözüm adını Başlangıç olarak ayarlayın, ardından Tamam'a tıklayın.

    Yeni ASP.NET MVC 4.0 Web Uygulaması Projesi Oluşturma

    Yeni ASP.NET MVC 4.0 Web Uygulaması Projesi Oluşturma

  3. ASP.NET MVC 4 proje türü iletişim kutusunda Web API proje türünü seçin. Tamam'a tıklayın.

    Web API proje türünü belirtme

    Web API proje türünü belirtme

Görev 2 - Contact Manager API Denetleyicilerini Oluşturma

Bu görevde, API yöntemlerinin bulunacağı denetleyici sınıflarını oluşturacaksınız.

  1. Denetleyiciler klasöründeki ValuesController.cs adlı dosyayı projeden silin.

  2. Projede Denetleyiciler klasörüne sağ tıklayın ve Ekle | öğesini seçin Bağlam menüsünden denetleyici .

    Projeye yeni denetleyici ekleme

    Projeye yeni denetleyici ekleme

  3. Görüntülenen Denetleyici Ekle iletişim kutusunda Şablon menüsünden Boş API Denetleyicisi'ni seçin. Denetleyici sınıfını ContactController olarak adlandırın. Ardından Ekle'ye tıklayın .

    Yeni bir Web API denetleyicisi oluşturmak için Denetleyici Ekle iletişim kutusunu kullanma

    Yeni bir Web API denetleyicisi oluşturmak için Denetleyici Ekle iletişim kutusunu kullanma

  4. ContactController'a aşağıdaki kodu ekleyin.

    (Kod Parçacığı - Web API Laboratuvarı - Ex01 - GET API Yöntemi)

    public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}

  5. Uygulamada hata ayıklamak için F5’e basın. Web API projesi için varsayılan giriş sayfası görünmelidir.

    ASP.NET Web API'sinin varsayılan giriş sayfası

    ASP.NET Web API'sinin varsayılan giriş sayfası

  6. Internet Explorer penceresinde, Geliştirici Araçları penceresini açmak için F12 tuşuna basın. Ağ sekmesine tıklayın ve sonra pencereye ağ trafiğini yakalamaya başlamak için Yakalamayı Başlat düğmesine tıklayın.

    Ağ sekmesini açma ve ağ yakalamayı başlatma

    Ağ sekmesini açma ve ağ yakalamayı başlatma

  7. Tarayıcının adres çubuğuna /api/contact ile URL'yi ekleyin ve Enter tuşuna basın. İletim ayrıntıları ağ yakalama penceresinde görünür. Yanıtın MIME türünün application/json olduğunu unutmayın. Bu, varsayılan çıkış biçiminin nasıl JSON olduğunu gösterir.

    Ağ görünümünde Web API'sinin isteğinin çıkışını görüntüleme

    Ağ görünümünde Web API'sinin isteğinin çıkışını görüntüleme

    Not

    Internet Explorer 10'un bu noktadaki varsayılan davranışı, kullanıcının Web API çağrısından kaynaklanan akışı kaydetmek mi yoksa açmak mı istediğinizi sormak olacaktır. Çıktı, Web API'si URL çağrısının JSON sonucunu içeren bir metin dosyası olacaktır. Geliştirici Aracı penceresinde yanıtın içeriğini izleyebilmek için iletişim kutusunu iptal etmeyin.

  8. Bu API çağrısının yanıtı hakkında daha fazla ayrıntı görmek için Ayrıntılı görünüme git düğmesine tıklayın.

    Ayrıntılı Görünüme Geçme

    Ayrıntılı Görünüme Geçme

  9. Gerçek JSON yanıt metnini görüntülemek için Yanıt gövdesi sekmesine tıklayın.

    Ağ izleyicisinde JSON çıkış metnini görüntüleme

    Ağ izleyicisinde JSON çıkış metnini görüntüleme

Görev 3 - Kişi Modellerini Oluşturma ve Kişi Denetleyicisini Artırma

Bu görevde, API yöntemlerinin bulunacağı denetleyici sınıflarını oluşturacaksınız.

  1. Modeller klasörüne sağ tıklayın ve bağlam menüsünden Ekle | Sınıf... öğesini seçin.

    Web uygulamasına yeni model ekleme

    Web uygulamasına yeni model ekleme

  2. Yeni Öğe Ekle iletişim kutusunda, yeni dosyayı Contact.cs adlandırın ve Ekle'ye tıklayın.

    Yeni Contact sınıf dosyası oluşturma

    Yeni Contact sınıf dosyası oluşturma

  3. Aşağıdaki vurgulanmış kodu Kişi sınıfına ekleyin.

    (Kod Parçacığı - Web API Laboratuvarı - Ex01 - Kişi Sınıfı)

    public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}

  4. ContactController sınıfında Get yönteminin yöntem tanımında dize sözcüğünü seçin ve Kişi sözcüğünü yazın. Sözcük yazıldıktan sonra, Kişi sözcüğünün başında bir gösterge görüntülenir. Ctrl tuşunu basılı tutun ve nokta (.) tuşuna basın veya farenizi kullanarak simgeye tıklayarak kod düzenleyicisinde yardım iletişim kutusunu açın ve Modeller ad alanının using yönergesini otomatik olarak doldurun.

    Ad alanı bildirimleri için Intellisense yardımı kullanma

    Ad alanı bildirimleri için Intellisense yardımı kullanma

  5. Get yönteminin kodunu değiştirerek bir Kişi modeli örnekleri dizisi döndürmesini sağlayın.

    (Kod Parçacığı - Web API Laboratuvarı - Ex01 - Kişi listesini döndürme)

    public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

  6. Tarayıcıda web uygulamasında hata ayıklamak için F5 tuşuna basın. API'nin yanıt çıkışında yapılan değişiklikleri görüntülemek için aşağıdaki adımları uygulayın.

    1. Tarayıcı açıldıktan sonra geliştirici araçları henüz açık değilse F12 tuşuna basın.

    2. Ağ sekmesine tıklayın.

    3. Yakalamayı Başlat düğmesine basın.

    4. Adres çubuğunda URL'ye /api/contact URL sonekini ekleyin ve Enter tuşuna basın.

    5. Ayrıntılı görünüme git düğmesine basın.

    6. Yanıt gövdesi sekmesini seçin. Kişi örnekleri dizisinin serileştirilmiş biçimini temsil eden bir JSON dizesi görmeniz gerekir.

      Karmaşık bir Web API'si yöntem çağrısının JSON serileştirilmiş çıktısı

      Karmaşık bir Web API'si yöntem çağrısının JSON serileştirilmiş çıktısı

Görev 4 - İşlevselliği Hizmet Katmanına Ayıklama

Bu görev, geliştiricilerin hizmet işlevlerini denetleyici katmanından ayırmasını kolaylaştırmak ve bu sayede işi gerçekten yerine getiren hizmetlerin yeniden kullanılabilirliğine olanak sağlamak için işlevleri bir Hizmet katmanına nasıl ayıklayacaklarını gösterir.

  1. Çözüm kökünde yeni bir klasör oluşturun ve bunu Hizmetler olarak adlandırın. Bunu yapmak için ContactManager projesine sağ tıklayın, Yeni Klasör Ekle'yi | seçin ve Hizmetler olarak adlandırabilirsiniz.

    Hizmetler klasörü oluşturma

    Hizmetler klasörü oluşturma

  2. Hizmetler klasörüne sağ tıklayın ve bağlam menüsünden Ekle | Sınıf... öğesini seçin.

    Services klasörüne yeni sınıf ekleme

    Services klasörüne yeni sınıf ekleme

  3. Yeni Öğe Ekle iletişim kutusu görüntülendiğinde, yeni sınıfı ContactRepository olarak adlandırın ve Ekle'ye tıklayın.

    Kişi Deposu hizmet katmanının kodunu içerecek bir sınıf dosyası oluşturma

    Kişi Deposu hizmet katmanının kodunu içerecek bir sınıf dosyası oluşturma

  4. Modellerin ad alanını dahil etmek için ContactRepository.cs dosyasına bir using yönergesi ekleyin.

    using ContactManager.Models;

  5. GetAllContacts yöntemini uygulamak için aşağıdaki vurgulanmış kodu ContactRepository.cs dosyasına ekleyin.

    (Kod Parçacığı - Web API Laboratuvarı - Ex01 - İlgili Kişi Deposu)

    public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

  6. ContactController.cs dosyasını henüz açık değilse açın.

  7. Dosyanın ad alanı bildirimi bölümüne aşağıdaki using deyimini ekleyin.

    using ContactManager.Services;

  8. Aşağıdaki vurgulanmış kodu ContactController.cs sınıfına ekleyerek deponun örneğini temsil eden özel bir alan ekleyin; böylece sınıf üyelerinin geri kalanı hizmet uygulamasını kullanabilir.

    (Kod Parçacığı - Web API Laboratuvarı - Ex01 - Kişi Denetleyicisi)

    public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}

  9. Get yöntemini, ilgili kişi deposu hizmetini kullanacak şekilde değiştirin.

    (Kod Parçacığı - Web API Lab - Ex01 - Depo aracılığıyla kişi listesini döndürme)

    public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}

  10. ContactController'ın Get yöntemi tanımına bir kesme noktası yerleştirin.

Kişi denetleyicisine kesme noktaları ekleme

Kişi denetleyicisi 11'e kesme noktaları ekleme. Uygulamayı çalıştırmak için F5 tuşuna basın. 12. Tarayıcı açıldığında, geliştirici araçlarını açmak için F12 tuşuna basın. 13. Ağ sekmesine tıklayın. 14. Yakalamayı Başlat düğmesine tıklayın. 15. Adres çubuğundaki URL'yi /api/contact sonekiyle ekleyin ve API denetleyicisini yüklemek için Enter tuşuna basın. 16. Get yöntemi yürütmeye başladığında Visual Studio 2012 kesilmelidir.

Get yönteminde kesme

Get yöntemi 17 içinde hata. Devam etmek için F5 tuşuna basın. 18. Henüz odakta değilse Internet Explorer'a geri dönün. Ağ yakalama penceresine dikkat edin.

Internet Explorer'da Web API çağrısının sonuçlarını gösteren ağ görünümü

Internet Explorer'da Web API çağrısı 19'un sonuçlarını gösteren ağ görünümü. Ayrıntılı görünüme git düğmesine tıklayın. 20. Yanıt gövdesi sekmesine tıklayın. API çağrısının JSON çıktısını ve hizmet katmanı tarafından alınan iki kişiyi nasıl temsil ettiğine dikkat edin.

Geliştirici araçları penceresinde Web API'sinden JSON çıktısını görüntüleme

Geliştirici araçları penceresinde Web API'sinden JSON çıktısını görüntüleme

Alıştırma 2: Okuma/Yazma Web API'si oluşturma

Bu alıştırmada, kişi yöneticisinin veri düzenleme özellikleriyle etkinleştirmesi için POST ve PUT yöntemlerini uygulayacaksınız.

Görev 1 - Web API Projesini Açma

Bu görevde, Kullanıcı girişini kabul edebilmesi için Alıştırma 1'de oluşturulan Web API'sini geliştirmeye hazırlayacaksınız.

  1. Web için Visual Studio 2012 Express'i çalıştırın, bunu yapmak için Başlat'a gidin ve Web için VS Express yazın ve Enter tuşuna basın.

  2. Source/Ex02-ReadWriteWebAPI/Begin/ klasöründe bulunan Begin çözümünü açın. Aksi takdirde, önceki alıştırmayı tamamlayarak elde edilen End çözümünü kullanmaya devam edebilirsiniz.

    1. Sağlanan Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet'i seçin.

    2. Eksik paketleri indirmek için NuGet Paketlerini Yönet iletişim kutusunda Geri Yükle'ye tıklayın.

    3. Son olarak, Derleme Çözümü Oluştur'a | tıklayarak çözümü derleyin.

      Not

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları göndermeniz gerekmesi ve proje boyutunu küçültmenizdir. NuGet Power Tools ile Packages.config dosyasında paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu nedenle, bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız gerekir.

  3. Hizmetler/ContactRepository.cs dosyasını açın.

Görev 2 - Kişi Deposu Uygulamasına Veri Kalıcılığı Özellikleri Ekleme

Bu görevde, Alıştırma 1'de oluşturulan Web API'sinin ContactRepository sınıfını, kullanıcı girişini ve yeni Kişi örneklerini kalıcı hale getirmek ve kabul etmek için artıracaksınız.

  1. Bu alıştırmanın devamında web sunucusu önbellek öğesi anahtarı adını göstermek için ContactRepository sınıfına aşağıdaki sabiti ekleyin.

    private const string CacheKey = "ContactStore";

  2. ContactRepository öğesine aşağıdaki kodu içeren bir oluşturucu ekleyin.

    (Kod Parçacığı - Web API Laboratuvarı - Ex02 - İlgili Kişi Deposu Oluşturucu)

    public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

  3. Aşağıda gösterildiği gibi GetAllContacts yönteminin kodunu değiştirin.

    (Kod Parçacığı - Web API Laboratuvarı - Ex02 - Tüm Kişileri Al)

    public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}

    Not

    Bu örnek tanıtım amaçlıdır ve web sunucusunun önbelleğini depolama ortamı olarak kullanır; böylece değerler Oturum depolama mekanizması veya İstek depolama ömrü kullanmak yerine aynı anda birden çok istemci tarafından kullanılabilir. Web sunucusu önbelleği yerine Entity Framework, XML depolama veya başka bir çeşit kullanabilirsiniz.

  4. Bir kişiyi kaydetme işini yapmak için ContactRepository sınıfına SaveContact adlı yeni bir yöntem uygulayın. SaveContact yöntemi tek bir Contact parametresi almalı ve başarılı veya başarısız olduğunu gösteren bir Boole değeri döndürmelidir.

    (Kod Parçacığı - Web API Laboratuvarı - Ex02 - SaveContact Yöntemini Uygulama)

    public bool SaveContact(Contact contact)
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
         try
         {
              var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
              currentData.Add(contact);
              ctx.Cache[CacheKey] = currentData.ToArray();

              return true;
         }
         catch (Exception ex)
         {
              Console.WriteLine(ex.ToString());
              return false;
         }
    }

    return false;
}

Alıştırma 3: Html İstemcisinden Web API'sini kullanma

Bu alıştırmada, Web API'sini çağırmak için bir HTML istemcisi oluşturacaksınız. Bu istemci JavaScript kullanarak Web API'siyle veri alışverişini kolaylaştırır ve sonuçları HTML işaretlemesi kullanarak bir web tarayıcısında görüntüler.

Görev 1 - Kişileri Görüntülemek için Gui Sağlamak üzere Dizin Görünümünü Değiştirme

Bu görevde, var olan kişilerin listesini bir HTML tarayıcısında görüntüleme gereksinimini desteklemek için web uygulamasının varsayılan Dizin görünümünü değiştireceksiniz.

  1. Henüz açık değilse Web için Visual Studio 2012 Express'i açın.

  2. Source/Ex03-ConsumingWebAPI/Begin/ klasöründe bulunan Begin çözümünü açın. Aksi takdirde, önceki alıştırmayı tamamlayarak elde edilen End çözümünü kullanmaya devam edebilirsiniz.

    1. Sağlanan Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet'i seçin.

    2. Eksik paketleri indirmek için NuGet Paketlerini Yönet iletişim kutusunda Geri Yükle'ye tıklayın.

    3. Son olarak, Derleme Çözümü Oluştur'a | tıklayarak çözümü derleyin.

      Not

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları göndermeniz gerekmesi ve proje boyutunu küçültmenizdir. NuGet Power Tools ile Packages.config dosyasında paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu nedenle, bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız gerekir.

  3. Views/Home klasöründe bulunan Index.cshtml dosyasını açın.

  4. aşağıdaki kod gibi görünmesi için div öğesi içindeki HTML kodunu kimlik gövdesiyle değiştirin.

    <div id="body">
    <ul id="contacts"></ul>
</div>

  5. Web API'sine HTTP isteğini gerçekleştirmek için dosyanın en altına aşağıdaki Javascript kodunu ekleyin.

    @section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

  6. ContactController.cs dosyasını henüz açık değilse açın.

  7. ContactController sınıfının Get yöntemine bir kesme noktası yerleştirin.

    API denetleyicisinin Get yöntemine kesme noktası yerleştirme

    API denetleyicisinin Get yöntemine kesme noktası yerleştirme

  8. Projeyi çalıştırmak için F5 tuşuna basın. Tarayıcı HTML belgesini yükler.

    Not

    Uygulamanızın kök URL'sine göz atıldığından emin olun.

  9. Sayfa yüklendikten ve JavaScript yürütülürse kesme noktasına isabet edilir ve kod yürütme denetleyicide duraklatılır.

    Web için VS Express kullanarak Web API çağrılarına hata ayıklama

    Web için Visual Studio 2012 Express kullanarak Web API çağrısında hata ayıklama

  10. Görünümü tarayıcıda yüklemeye devam etmek için kesme noktasını kaldırın ve F5 veya hata ayıklama araç çubuğunun Devam et düğmesine basın. Web API çağrısı tamamlandıktan sonra, Web API çağrısından döndürülen kişilerin tarayıcıda liste öğeleri olarak görüntülendiğini görmeniz gerekir.

    Tarayıcıda liste öğeleri olarak görüntülenen API çağrısının sonuçları

    Tarayıcıda liste öğeleri olarak görüntülenen API çağrısının sonuçları

  11. Hata ayıklamayı durdurun.

Görev 2 - Dizin Görünümünü Kişi Oluşturmak için GUI Sağlayacak Şekilde Değiştirme

Bu görevde, MVC uygulamasının Dizin görünümünü değiştirmeye devam edeceksiniz. HTML sayfasına kullanıcı girişini yakalayacak ve yeni bir Kişi oluşturmak üzere Web API'sine gönderecek bir form eklenir ve GUI'den tarih toplamak için yeni bir Web API denetleyicisi yöntemi oluşturulur.

  1. ContactController.cs dosyasını açın.

  2. Aşağıdaki kodda gösterildiği gibi Post adlı denetleyici sınıfına yeni bir yöntem ekleyin.

    (Kod Parçacığı - Web API Laboratuvarı - Ex03 - Post Yöntemi)

    public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

  3. Henüz açık değilse Index.cshtml dosyasını Visual Studio'da açın.

  4. Önceki göreve eklediğiniz sıralanmamış listeden hemen sonra aşağıdaki HTML kodunu dosyaya ekleyin.

    <form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

  5. Belgenin en altındaki betik öğesinde, düğme tıklama olaylarını işlemek için aşağıdaki vurgulanmış kodu ekleyin. Bu kod, verileri HTTP POST çağrısı kullanarak Web API'sine postalar.

    <script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

  6. ContactController.cs'da Post yöntemine bir kesme noktası yerleştirin.

  7. Uygulamayı tarayıcıda çalıştırmak için F5 tuşuna basın.

  8. Sayfa tarayıcıda yüklendikten sonra, yeni bir kişi adı ve kimliği yazın ve Kaydet düğmesine tıklayın.

    Tarayıcıda yüklenen istemci HTML belgesi

    Tarayıcıda yüklenen istemci HTML belgesi

  9. Post yönteminde hata ayıklayıcı penceresi kırıldığında, kişi parametresinin özelliklerine göz atın. Değerler forma girdiğiniz verilerle eşleşmelidir.

    İstemciden Web API'sine gönderilen Kişi nesnesi

    İstemciden Web API'sine gönderilen Kişi nesnesi

  10. Yanıt değişkeni oluşturulana kadar hata ayıklayıcıda yöntemini adım adım ilerleyin. Hata ayıklayıcıdaki Yerel Ayarlar penceresinde incelemeden sonra tüm özelliklerin ayarlandığını görürsünüz.

Hata ayıklayıcıda oluşturma sonrasında verilen yanıt

Hata ayıklayıcı 11'de oluşturma sonrasında verilen yanıt. F5 tuşuna basarsanız veya hata ayıklayıcıda Devam'a tıklarsanız istek tamamlanır. Tarayıcıya geri döndüğünüzde, yeni kişi ContactRepository uygulaması tarafından depolanan kişiler listesine eklenir.

Tarayıcı, yeni kişi örneğinin başarıyla oluşturulmasını yansıtır

Tarayıcı, yeni kişi örneğinin başarıyla oluşturulmasını yansıtır

Not

Ayrıca, Ek C: Web Dağıtımı kullanarak ASP.NET MVC 4 Uygulaması Yayımlama'yı izleyerek bu uygulamayı Azure'a dağıtabilirsiniz.

Özet

Bu laboratuvar, yeni ASP.NET Web API çerçevesini ve çerçeveyi kullanarak RESTful Web API'lerinin uygulanmasını tanıttı. Buradan, bu laboratuvarda örnek olarak sağlanan basit mekanizma yerine herhangi bir sayıda mekanizma ve kablo kullanarak veri kalıcılığını kolaylaştıran yeni bir depo oluşturabilirsiniz. Web API'si, HTTP ve JSON veya XML'yi destekleyen herhangi bir dilde yazılmış HTML olmayan istemcilerden iletişimi etkinleştirme gibi bir dizi ek özelliği destekler. Bir Web API'sini tipik bir web uygulamasının dışında barındırma olanağının yanı sıra kendi serileştirme biçimlerinizi oluşturabilmek de mümkündür.

ASP.NET Web sitesinin [https://asp.net/web-api]() konumundaki ASP.NET Web API'sine ayrılmış bir alanı vardırhttps://asp.net/web-api. Bu site, Web API'sine ilişkin en son bilgiler, örnekler ve haberler sağlamaya devam edecektir. Bu nedenle, neredeyse tüm cihazlar veya geliştirme çerçeveleri için kullanılabilir özel Web API'leri oluşturma sanatını daha ayrıntılı olarak incelemek istiyorsanız bu siteyi sık sık kontrol edin.

Ek A: Kod Parçacıklarını Kullanma

Kod parçacıklarıyla ihtiyacınız olan tüm kodlar parmaklarınızın ucundadır. Laboratuvar belgesi, aşağıdaki şekilde gösterildiği gibi bunları tam olarak ne zaman kullanabileceğinizi bildirir.

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanma

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanma

Klavye kullanarak kod parçacığı eklemek için (yalnızca C#

  1. İmleci kodu eklemek istediğiniz yere getirin.

  2. Kod parçacığı adını yazmaya başlayın (boşluk veya kısa çizgi olmadan).

  3. IntelliSense'in eşleşen kod parçacıklarının adlarını görüntülemesini izleyin.

  4. Doğru kod parçacığını seçin (veya kod parçacığının adı seçilene kadar yazmaya devam edin).

  5. Kod parçacığını imleç konumuna eklemek için Sekme tuşuna iki kez basın.

    Kod parçacığı adını yazmaya başlama

    Kod parçacığı adını yazmaya başlama

    Vurgulanan kod parçacığını seçmek için Sekme tuşuna basın

    Vurgulanan kod parçacığını seçmek için Sekme tuşuna basın

    Sekme tuşuna yeniden bastığında kod parçacığı genişler

    Sekme tuşuna yeniden bastığında kod parçacığı genişler

Fare kullanarak kod parçacığı eklemek için (C#, Visual Basic ve XML)

  1. Kod parçacığını eklemek istediğiniz yere sağ tıklayın.

  2. Kod Parçacığı Ekle'yi ve ardından Kod Parçacıklarım'ı seçin.

  3. Listeden, üzerine tıklayarak ilgili kod parçacığını seçin.

    Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve Kod Parçacığı Ekle'yi seçin

    Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve Kod Parçacığı Ekle'yi seçin

    Listeden ilgili kod parçacığını seçmek için üzerine tıklayın

    Listeden ilgili kod parçacığını seçmek için üzerine tıklayın

Ek B: Web için Visual Studio Express 2012'yi yükleme

Microsoft Web Platformu Yükleyicisi kullanarak Web için Microsoft Visual Studio Express 2012'yi veya başka bir "Express" sürümünü yükleyebilirsiniz. Aşağıdaki yönergeler, Microsoft Web Platformu Yükleyicisi kullanarak Web için Visual Studio Express 2012'yi yüklemek için gereken adımlarda size yol gösterir.

  1. [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169) adresine gidin. Alternatif olarak, Web Platformu Yükleyicisi'ni zaten yüklediyseniz, bunu açabilir ve "Azure SDK ile Web için Visual Studio Express 2012" ürününü arayabilirsiniz.

  2. Şimdi Yükle'ye tıklayın. Web Platformu Yükleyicisi'niz yoksa, önce indirmeye ve yüklemeye yönlendirilirsiniz.

  3. Web Platformu Yükleyicisi açıldıktan sonra kurulumu başlatmak için Yükle'ye tıklayın.

    Visual Studio Express'i yükleme

    Visual Studio Express'i yükleme

  4. Tüm ürünlerin lisanslarını ve koşullarını okuyun ve devam etmek için Kabul Ediyorum'a tıklayın.

    Lisans koşullarını kabul etme

    Lisans koşullarını kabul etme

  5. İndirme ve yükleme işlemi tamamlanana kadar bekleyin.

    Yükleme durumu

    Yükleme ilerleme durumu

  6. Yükleme tamamlandığında Son'a tıklayın.

    Yükleme tamamlandı

    Yükleme tamamlandı

  7. Web Platformu Yükleyicisi'ne kapatmak için Çıkış'a tıklayın.

  8. Web için Visual Studio Express'i açmak için Başlangıç ekranına gidin ve "VS Express" yazmaya başlayın, ardından Web için VS Express kutucuğuna tıklayın.

    Web için VS Express kutucuğu

    Web için VS Express kutucuğu

Ek C: Web Dağıtımı kullanarak ASP.NET MVC 4 Uygulaması Yayımlama

Bu ek, Azure portalından yeni bir web sitesi oluşturmayı ve Azure tarafından sağlanan Web Dağıtımı yayımlama özelliğinden yararlanarak laboratuvarı izleyerek elde ettiğiniz uygulamayı yayımlamayı gösterir.

1. Görev - Azure Portaldan Yeni Bir Web Sitesi Oluşturma

  1. Azure Yönetim Portalı'na gidin ve aboneliğinizle ilişkili Microsoft kimlik bilgilerini kullanarak oturum açın.

    Not

    Azure ile 10 ASP.NET Web Sitesini ücretsiz olarak barındırabilir ve trafiğiniz büyüdükçe ölçeklendirin. Buradan kaydolabilirsiniz.

    Windows Azure portalında oturum açma

    Portalda oturum açma

  2. Komut çubuğunda Yeni'ye tıklayın.

    Yeni Bir Web Sitesi Oluşturma

    Yeni Bir Web Sitesi Oluşturma

  3. İşlem | Web Sitesi'ne tıklayın. Ardından Hızlı Oluştur seçeneğini belirleyin. Yeni web sitesi için kullanılabilir bir URL sağlayın ve Web Sitesi Oluştur'a tıklayın.

    Not

    Azure, bulutta çalışan ve denetleyebileceğiniz ve yönetebileceğiniz bir web uygulamasının konağıdır. Hızlı Oluştur seçeneği, tamamlanmış bir web uygulamasını portalın dışından Azure'a dağıtmanıza olanak tanır. Veritabanı ayarlama adımlarını içermez.

    Hızlı Oluştur'u kullanarak yeni bir Web Sitesi oluşturma

    Hızlı Oluştur'u kullanarak yeni bir Web Sitesi oluşturma

  4. Yeni Web Sitesi oluşturulana kadar bekleyin.

  5. Web Sitesi oluşturulduktan sonra URL sütununun altındaki bağlantıya tıklayın. Yeni Web Sitesinin çalışıp çalışmadığını denetleyin.

    Yeni web sitesine göz atma

    Yeni web sitesine göz atma

    Web sitesi çalışıyor

    Web sitesi çalışıyor

  6. Portala geri dönün ve yönetim sayfalarını görüntülemek için Ad sütununun altındaki web sitesinin adına tıklayın.

    Web sitesi yönetim sayfalarını açma

    Web Sitesi yönetim sayfalarını açma

  7. Pano sayfasındaki hızlı bakış bölümünün altında Yayımlama profilini indir bağlantısına tıklayın.

    Not

    Yayımlama profili, etkinleştirilmiş her yayın yöntemi için azure'da bir web uygulaması yayımlamak için gereken tüm bilgileri içerir. Yayımlama profili, bir yayın yönteminin etkinleştirildiği uç noktaların her birine bağlanmak ve bu uç noktalarda kimlik doğrulaması yapmak için gereken URL'leri, kullanıcı kimlik bilgilerini ve veritabanı dizelerini içerir. Microsoft WebMatrix 2, Web için Microsoft Visual Studio Express ve Microsoft Visual Studio 2012, web uygulamalarını Azure'da yayımlamak için bu programların yapılandırmasını otomatikleştirmek için yayımlama profillerini okumayı destekler.

    Web sitesi yayımlama profilini indirme

    Web Sitesi yayımlama profilini indirme

  8. Profil yayımlama dosyasını bilinen bir konuma indirin. Bu alıştırmanın devamında, Visual Studio'dan Azure'da bir web uygulaması yayımlamak için bu dosyanın nasıl kullanılacağını göreceksiniz.

    Yayımlama profili dosyasını kaydetme

    Yayımlama profili dosyasını kaydetme

Görev 2 - Veritabanı Sunucusunu Yapılandırma

Uygulamanız SQL Server veritabanlarını kullanıyorsa bir SQL Veritabanı sunucusu oluşturmanız gerekir. SQL Server kullanmayan basit bir uygulama dağıtmak istiyorsanız bu görevi atlayabilirsiniz.

  1. Uygulama veritabanını depolamak için bir SQL Veritabanı sunucusu gerekir. Aboneliğinizdeki SQL Veritabanı sunucularını Sql Veritabanları | Sunucuları | Sunucusu Panosu'ndaki Azure Yönetim portalında görüntüleyebilirsiniz. Oluşturulmuş bir sunucunuz yoksa, komut çubuğundaki Ekle düğmesini kullanarak bir sunucu oluşturabilirsiniz. Sonraki görevlerde kullanacağınız için sunucu adını ve URL'sini, yönetici oturum açma adını ve parolayı not alın. Veritabanını daha sonraki bir aşamada oluşturulacağı için henüz oluşturmayın.

    sunucu panosunu SQL Veritabanı

    sunucu panosunu SQL Veritabanı

  2. Sonraki görevde Visual Studio'dan veritabanı bağlantısını test edecek, bu nedenle yerel IP adresinizi sunucunun İzin Verilen IP Adresleri listesine eklemeniz gerekir. Bunu yapmak için Yapılandır'a tıklayın, Geçerli İstemci IP Adresi'nden IP adresini seçin ve Başlangıç IP Adresi ve Bitiş IP Adresi metin kutularına yapıştırın ve düğmeye add-client-ip-address-ok-button tıklayın.

    İstemci IP Adresi Ekleme

    İstemci IP Adresi Ekleme

  3. İstemci IP Adresi izin verilen IP adresleri listesine eklendikten sonra, değişiklikleri onaylamak için Kaydet'e tıklayın.

    Değişiklikleri Onayla

    Değişiklikleri Onayla

Görev 3 - Web Dağıtımı kullanarak ASP.NET MVC 4 Uygulaması Yayımlama

  1. ASP.NET MVC 4 çözümüne geri dönün. Çözüm Gezgini web sitesi projesine sağ tıklayın ve Yayımla'yı seçin.

    Uygulamayı Yayımlama

    Web sitesini yayımlama

  2. İlk göreve kaydettiğiniz yayımlama profilini içeri aktarın.

    Yayımlama profilini içeri aktarma

    Yayımlama profilini içeri aktarma

  3. Bağlantıyı Doğrula'ya tıklayın. Doğrulama tamamlandıktan sonra İleri'ye tıklayın.

    Not

    Bağlantıyı Doğrula düğmesinin yanında yeşil bir onay işareti görüntülendiğinde doğrulama tamamlanır.

    Bağlantı doğrulanıyor

    Bağlantı doğrulanıyor

  4. Ayarlar sayfasında, Veritabanları bölümünün altında veritabanı bağlantınızın metin kutusunun yanındaki düğmeye (defaultConnection gibi) tıklayın.

    Web dağıtımı yapılandırması

    Web dağıtımı yapılandırması

  5. Veritabanı bağlantısını aşağıdaki gibi yapılandırın:

    • Sunucu adı alanına tcp: ön ekini kullanarak SQL Veritabanı sunucu URL'nizi yazın.

    • Kullanıcı adı alanına sunucu yöneticinizin oturum açma adını yazın.

    • Parola'ya sunucu yöneticinizin oturum açma parolasını yazın.

    • Yeni bir veritabanı adı yazın, örneğin: MVC4SampleDB.

      Hedef bağlantı dizesi yapılandırma

      Hedef bağlantı dizesi yapılandırma

  6. Daha sonra, Tamam'a tıklayın. Veritabanını oluşturmanız istendiğinde Evet'e tıklayın.

    Veritabanını oluşturma

    Veritabanını oluşturma

  7. Windows Azure'da SQL Veritabanı bağlanmak için kullanacağınız bağlantı dizesi Varsayılan Bağlantı metin kutusunda gösterilir. İleri seçeneğine tıklayın.

    SQL Veritabanı işaret eden bağlantı dizesi

    SQL Veritabanı işaret eden bağlantı dizesi

  8. Önizleme sayfasında Yayımla'ya tıklayın.

    Web uygulamasını yayımlama

    Web uygulamasını yayımlama

  9. Yayımlama işlemi tamamlandıktan sonra, varsayılan tarayıcınız yayımlanan web sitesini açar.

    Windows Azure'da yayımlanan uygulama

    Azure'da yayımlanan uygulama