ASP.NET Web API 'SI ile yeniden takip eden API 'Ler oluşturunBuild RESTful APIs with ASP.NET Web API

Web 'de Camps ekibine göreby Web Camps Team

Uygulamalı laboratuvar: bir Contact Manager uygulaması için basit bir REST API derlemek için ASP.NET 4. x içindeki Web API 'sini kullanın.Hands on lab: Use Web API in ASP.NET 4.x to build a simple REST API for a contact manager application. Ayrıca API 'yi kullanmak için bir istemci oluşturacaksınız.You will also build a client to consume the API.

Son yıllarda, HTTP 'nin yalnızca HTML sayfaları sunmak için değil net ' in açık olması gerekir.In recent years, it has become clear that HTTP is not just for serving up HTML pages. Ayrıca, Web API 'Leri oluşturmaya yönelik güçlü bir platformdur, bir dizi fiil (GET, POST, vb.) ve URI 'ler ve üstbilgilergibi birkaç basit kavram vardır.It is also a powerful platform for building Web APIs, using a handful of verbs (GET, POST, and so forth) plus a few simple concepts such as URIs and headers. ASP.NET Web API 'SI, HTTP programlamasını basitleştiren bir bileşen kümesidir.ASP.NET Web API is a set of components that simplify HTTP programming. ASP.NET MVC çalışma zamanının üzerine inşa edildiğinden, Web API 'SI, HTTP 'nin alt düzey aktarım ayrıntılarını otomatik olarak işler.Because it is built on top of the ASP.NET MVC runtime, Web API automatically handles the low-level transport details of HTTP. Aynı zamanda, Web API 'SI HTTP programlama modelini doğal olarak kullanıma sunar.At the same time, Web API naturally exposes the HTTP programming model. Aslında, Web API 'sinin bir hedefi HTTP 'nin gerçekliği dışında bir amaç değildir .In fact, one goal of Web API is to not abstract away the reality of HTTP. Sonuç olarak, Web API 'sinin her ikisi de esnektir ve kolayca genişletilir.As a result, Web API is both flexible and easy to extend. REST mimari stili HTTP 'den yararlanmak için etkili bir yöntem olarak kendini kanıtlamış ve HTTP için geçerli tek yaklaşım olmasa daThe REST architectural style has proven to be an effective way to leverage HTTP - although it is certainly not the only valid approach to HTTP. İlgili kişi Yöneticisi, diğer kişiler arasında kişileri listelemek, eklemek ve kaldırmak için bir daha sunacaktır.The contact manager will expose the RESTful for listing, adding and removing contacts, among others.

Bu laboratuvar, HTTP, REST ve temel bir HTML, JavaScript ve jQuery hakkında temel bir bilginiz olduğunu varsaymaktadır.This lab requires a basic understanding of HTTP, REST, and assumes you have a basic working knowledge of HTML, JavaScript, and jQuery.

Note

ASP.NET Web sitesi, https://asp.net/web-apiADRESINDEKI Web API çerçevesine adanmış bir alana sahiptir.The ASP.NET Web site has an area dedicated to the ASP.NET Web API framework at https://asp.net/web-api. Bu site, Web API 'siyle ilgili en son bilgileri, örnekleri ve haberleri sağlamaya devam edecek, bu nedenle neredeyse tüm cihazlar veya geliştirme çerçevesiyle sunulan özel Web API 'Leri oluşturma sanatı hakkında daha ayrıntılı bilgi almak istiyorsanız, sık sık kontrol edin.This site will continue to provide late-breaking information, samples, and news related to Web API, so check it frequently if you'd like to delve deeper into the art of creating custom Web APIs available to virtually any device or development framework.

ASP.NET MVC 4 ' e benzer ASP.NET Web API 'SI, hizmet katmanını denetleyicilerden ayırmak açısından çok daha fazla esneklik sağlar. Bu, kullanılabilir bağımlılık ekleme çerçevelerinin birkaçını oldukça kolay kullanmanıza olanak tanır.ASP.NET Web API, similar to ASP.NET MVC 4, has great flexibility in terms of separating the service layer from the controllers allowing you to use several of the available Dependency Injection frameworks fairly easy. MSDN 'de, buradanyükleyebileceğiniz bir ASP.NET Web API projesinde bağımlılık ekleme Için neklemesine nasıl kullanacağınızı gösteren iyi bir örnek vardır.There is a good sample in MSDN that shows how to use Ninject for dependency injection in an ASP.NET Web API project that you can download it from here.

Tüm örnek kod ve kod parçacıkları https://go.microsoft.com/fwlink/?LinkID=248297&clcid=0x409adresinden erişilebilen Web Camps eğitim seti ' ne dahildir.All sample code and snippets are included in the Web Camps Training Kit, available at https://go.microsoft.com/fwlink/?LinkID=248297&clcid=0x409.

AmaçlarObjectives

Bu uygulamalı laboratuvarda şunları nasıl yapacağınızı öğreneceksiniz:In this hands-on lab, you will learn how to:

  • Yeniden takip eden bir Web API 'SI uygulamaImplement a RESTful Web API
  • Bir HTML istemcisinden API çağırmaCall the API from an HTML client

ÖnkoşullarPrerequisites

Bu uygulamalı laboratuvarın tamamlanabilmesi için aşağıdakiler gereklidir:The following is required to complete this hands-on lab:

KurulumSetup

Kod parçacıklarını yüklemeInstalling Code Snippets

Kolaylık olması için, bu laboratuvar boyunca yönettiğiniz kodun çoğu Visual Studio kod parçacıkları olarak sunulmaktadır.For convenience, much of the code you will be managing along this lab is available as Visual Studio code snippets. Kod parçacıklarını yüklemek için .\Source\Setup\CodeSnippets.vsi dosyasını çalıştırın.To install the code snippets run .\Source\Setup\CodeSnippets.vsi file.

Visual Studio Code parçacıkları hakkında bilginiz yoksa ve bunları nasıl kullanacağınızı öğrenmek istiyorsanız, Ek A: Ek A: kod parçacıkları"kullanarak bu "belgedeki eke başvurabilirsiniz.If you are not familiar with the Visual Studio Code Snippets, and want to learn how to use them, you can refer to the appendix from this document "Appendix A: Using Code Snippets".

AlıştırmalardaExercises

Bu uygulamalı laboratuvar aşağıdaki Alıştırmayı içerir:This hands-on lab includes the following exercise:

  1. Alıştırma 1: salt okunurdur Web API 'SI oluşturmaExercise 1: Create a Read-Only Web API
  2. Alıştırma 2: okuma/yazma Web API 'SI oluşturmaExercise 2: Create a Read/Write Web API
  3. Alıştırma 3: bir HTML Istemcisinden Web API 'sini kullanmaExercise 3: Consume the Web API from an HTML Client

Note

Her alıştırma, alıştırmaları tamamladıktan sonra elde etmeniz gereken sonuç çözümünü içeren bir son klasör ile birlikte sunulur.Each exercise is accompanied by an End folder containing the resulting solution you should obtain after completing the exercises. Bu çözümü, alýþtýrmalar üzerinden çalışarak daha fazla yardıma ihtiyacınız varsa kılavuz olarak kullanabilirsiniz.You can use this solution as a guide if you need additional help working through the exercises.

Bu Laboratuvarı tamamlamaya yönelik tahmini süre: 60 dakika.Estimated time to complete this lab: 60 minutes.

Alıştırma 1: salt okunurdur Web API 'SI oluşturmaExercise 1: Create a Read-Only Web API

Bu alıştırmada, Contact Manager için salt okunurdur GET yöntemlerini uygulayacaksınız.In this exercise, you will implement the read-only GET methods for the contact manager.

Görev 1-API projesi oluşturmaTask 1 - Creating the API Project

Bu görevde, yeni ASP.NET Web projesi şablonlarını kullanarak bir Web API web uygulaması oluşturacaksınız.In this task, you will use the new ASP.NET web project templates to create a Web API web application.

  1. Web Için Visual Studio 2012 Express'i çalıştırın. bunu yapmak için başlat 'a gidip Web için vs Express yazın ve ENTERtuşuna basın.Run Visual Studio 2012 Express for Web, to do this go to Start and type VS Express for Web then press Enter.

  2. Dosya menüsünden Yeni proje' yi seçin.From the File menu, select New Project. Görseli C# seçin | Proje türü ağaç görünümünden Web projesi türü, sonra ASP.NET MVC 4 Web uygulaması proje türünü seçin.Select the Visual C# | Web project type from the project type tree view, then select the ASP.NET MVC 4 Web Application project type. Projenin adını ContactManager , çözüm adı olarak ayarlayın ve ardından Tamam'a tıklayın.Set the project's Name to ContactManager and the Solution name to Begin, then click OK.

    Yeni bir ASP.NET MVC 4,0 Web uygulaması projesi oluşturmaCreating a new ASP.NET MVC 4.0 Web Application Project

    Yeni bir ASP.NET MVC 4,0 Web uygulaması projesi oluşturmaCreating a new ASP.NET MVC 4.0 Web Application Project

  3. ASP.NET MVC 4 proje türü iletişim kutusunda Web API 'si proje türünü seçin.In the ASP.NET MVC 4 project type dialog, select the Web API project type. Tamam’a tıklayın.Click OK.

    Web API proje türünü belirtmeSpecifying the Web API project type

    Web API proje türünü belirtmeSpecifying the Web API project type

Görev 2-Contact Manager API denetleyicileri oluşturmaTask 2 - Creating the Contact Manager API Controllers

Bu görevde API yöntemlerinin bulunacağı denetleyici sınıflarını oluşturacaksınız.In this task, you will create the controller classes in which API methods will reside.

  1. ValuesController.cs adlı dosyayı denetleyiciler klasöründe projeden silin.Delete the file named ValuesController.cs within Controllers folder from the project.

  2. Projedeki denetleyiciler klasörüne sağ tıklayın ve Ekle ' yi seçin | Bağlam menüsünden denetleyici.Right-click the Controllers folder in the project and select Add | Controller from the context menu.

    Projeye yeni bir denetleyici ekleniyorAdding a new controller to the project

    Projeye yeni bir denetleyici ekleniyorAdding a new controller to the project

  3. Görüntülenen Denetleyici Ekle iletişim kutusunda, şablon menüsünden boş API denetleyicisi ' ni seçin.In the Add Controller dialog that appears, select Empty API Controller from the Template menu. Denetleyici sınıfına contactcontrolleradını adlandırın.Name the controller class ContactController. Ardından Ekle ' ye tıklayın .Then, click Add.

    Yeni bir Web API denetleyicisi oluşturmak için denetleyici Ekle iletişim kutusunu kullanmaUsing the Add Controller dialog to create a new Web API controller

    Yeni bir Web API denetleyicisi oluşturmak için denetleyici Ekle iletişim kutusunu kullanmaUsing the Add Controller dialog to create a new Web API controller

  4. Contactcontroller'a aşağıdaki kodu ekleyin.Add the following code to the ContactController.

    (Kod parçacığı- Web API Laboratuvarı-Ex01-Get API yöntemi)(Code Snippet - Web API Lab - Ex01 - Get API Method)

    public string[] Get()
    {
        return new string[]
        {
            "Hello",
            "World"
        };
    }
    
  5. Uygulamada hata ayıklamak için F5’e basın.Press F5 to debug the application. Bir Web API projesi için varsayılan giriş sayfası görünmelidir.The default home page for a Web API project should appear.

    Bir ASP.NET Web API uygulamasının varsayılan giriş sayfasıThe default home page of an ASP.NET Web API application

    Bir ASP.NET Web API uygulamasının varsayılan giriş sayfasıThe default home page of an ASP.NET Web API application

  6. Internet Explorer penceresinde, Geliştirici Araçları penceresini açmak için F12 tuşuna basın.In the Internet Explorer window, press the F12 key to open the Developer Tools window. sekmesine tıklayın ve ardından, pencereye ağ trafiği yakalamaya başlamak Için Yakalamayı Başlat düğmesine tıklayın.Click the Network tab, and then click the Start Capturing button to begin capturing network traffic into the window.

    Ağ sekmesini açma ve ağ yakalamayı başlatmaOpening the network tab and initiating network capture

    Ağ sekmesini açma ve ağ yakalamayı başlatmaOpening the network tab and initiating network capture

  7. Tarayıcının adres çubuğuna URL 'YI /api/Contact ile ekleyin ve ENTER tuşuna basın.Append the URL in the browser's address bar with /api/contact and press enter. İletim ayrıntıları ağ yakalama penceresinde görünür.The transmission details will appear in the network capture window. Yanıtın MIME türünün Application/JSONolduğunu unutmayın.Note that the response's MIME type is application/json. Bu, varsayılan çıkış biçiminin JSON olduğunu gösterir.This demonstrates how the default output format is JSON.

    Web API isteğinin çıkışını ağ görünümünde görüntülemeViewing the output of the Web API request in the Network view

    Web API isteğinin çıkışını ağ görünümünde görüntülemeViewing the output of the Web API request in the Network view

    Note

    Internet Explorer 10 ' un bu noktada varsayılan davranışı, kullanıcının Web API çağrısından kaynaklanan akışı kaydetmek veya açmak isteyip istememesini ister.Internet Explorer 10's default behavior at this point will be to ask if the user would like to save or open the stream resulting from the Web API call. Çıktı, Web API URL çağrısının JSON sonucunu içeren bir metin dosyası olacaktır.The output will be a text file containing the JSON result of the Web API URL call. Yanıt içeriğini geliştiriciler araç penceresi aracılığıyla izleyebilmek için iletişim kutusunu iptal etme.Do not cancel the dialog in order to be able to watch the response's content through Developers Tool window.

  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.Click the Go to detailed view button to see more details about the response of this API call.

    Ayrıntılı görünüme geçSwitch to Detailed View

    Ayrıntılı görünüme geçSwitch to Detailed View

  9. Gerçek JSON yanıt metnini görüntülemek için yanıt gövdesi sekmesine tıklayın.Click the Response body tab to view the actual JSON response text.

    Ağ izleyicisinde JSON çıkış metnini görüntülemeViewing the JSON output text in the network monitor

    Ağ izleyicisinde JSON çıkış metnini görüntülemeViewing the JSON output text in the network monitor

Görev 3-Iletişim modellerini oluşturma ve Iletişim denetleyicisi 'ni artırmakTask 3 - Creating the Contact Models and Augment the Contact Controller

Bu görevde API yöntemlerinin bulunacağı denetleyici sınıflarını oluşturacaksınız.In this task, you will create the controller classes in which API methods will reside.

  1. Modeller klasörüne sağ tıklayın ve Ekle ' yi seçin | Sınıf... bağlam menüsünden.Right-click the Models folder and select Add | Class... from the context menu.

    Web uygulamasına yeni model eklemeAdding a new model to the web application

    Web uygulamasına yeni model eklemeAdding a new model to the web application

  2. Yeni öğe Ekle iletişim kutusunda yeni dosyayı Contact.cs olarak adlandırın ve Ekle ' ye tıklayın .In the Add New Item dialog, name the new file Contact.cs and click Add.

    Yeni kişi sınıfı dosyası oluşturuluyorCreating the new Contact class file

    Yeni kişi sınıfı dosyası oluşturuluyorCreating the new Contact class file

  3. Aşağıdaki Vurgulanan kodu kişi sınıfına ekleyin.Add the following highlighted code to the Contact class.

    (Kod parçacığı- Web API Laboratuvarı-Ex01-Contact sınıfı)(Code Snippet - Web API Lab - Ex01 - Contact Class)

    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 Word dizesini seçin ve Word kişisiyazın.In the ContactController class, select the word string in method definition of the Get method, and type the word Contact. Sözcük içine yazıldıktan sonra, sözcük kişisininbaşlangıcında bir gösterge görüntülenir.Once the word is typed in, an indicator will appear at the beginning of the word Contact. CTRL tuşunu basılı tutun ve nokta (.) tuşuna basın ya da farenizi kullanarak, modeller ad alanı için using yönergesini otomatik olarak doldurmanız için farenizi kullanarak simge simgesine tıklayın.Either hold down the Ctrl key and press the period (.) key or click the icon using your mouse to open up the assistance dialog in the code editor, to automatically fill in the using directive for the Models namespace.

    Ad alanı bildirimleri için IntelliSense yardımını kullanma

    Ad alanı bildirimleri için IntelliSense yardımını kullanmaUsing Intellisense assistance for namespace declarations

  5. Get yöntemi için kodu değiştirin, böylece bir iletişim modeli örnekleri dizisi döndürür.Modify the code for the Get method so that it returns an array of Contact model instances.

    (Kod parçacığı- Web API Laboratuvarı-Ex01-kişiler listesi döndürülüyor)(Code Snippet - Web API Lab - Ex01 - Returning a list of contacts)

    public Contact[] Get()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
    
  6. Tarayıcıdaki Web uygulamasında hata ayıklamak için F5 tuşuna basın.Press F5 to debug the web application in the browser. API 'nin yanıt çıkışında yapılan değişiklikleri görüntülemek için aşağıdaki adımları gerçekleştirin.To view the changes made to the response output of the API, perform the following steps.

    1. Tarayıcı açıldıktan sonra geliştirici araçları henüz açık değilse F12 tuşuna basın.Once the browser opens, press F12 if the developer tools are not open yet.

    2. sekmesine tıklayın.Click the Network tab.

    3. Yakalamayı Başlat düğmesine basın.Press the Start Capturing button.

    4. /Api/Contact URL sonekini adres çubuğundaki URL 'ye ekleyin ve ENTER tuşuna basın.Add the URL suffix /api/contact to the URL in the address bar and press the Enter key.

    5. Ayrıntılı görünüme git düğmesine basın.Press the Go to detailed view button.

    6. Yanıt gövdesi sekmesini seçin. Bir kişi örnekleri dizisinin seri hale getirilmiş formunu temsil eden bir JSON dizesi görmeniz gerekir.Select the Response body tab. You should see a JSON string representing the serialized form of an array of Contact instances.

      Karmaşık bir Web API yöntemi çağrısının JSON seri hale getirilmiş çıkışıJSON serialized output of a complex Web API method call

      Karmaşık bir Web API yöntemi çağrısının JSON seri hale getirilmiş çıkışıJSON serialized output of a complex Web API method call

Görev 4-bir hizmet katmanına Işlevsellik ayıklamaTask 4 - Extracting Functionality into a Service Layer

Bu görev, geliştiricilerin hizmet işlevlerini denetleyici katmanından ayırmasını kolaylaştırmak için işlevselliği bir hizmet katmanına nasıl çıkarabileceğinizi gösterir ve böylelikle işi gerçekten yapan hizmetlerin yeniden kullanılabilirliğini sağlar.This task will demonstrate how to extract functionality into a Service layer to make it easy for developers to separate their service functionality from the controller layer, thereby allowing reusability of the services that actually do the work.

  1. Çözüm kökünde yeni bir klasör oluşturun ve BT Hizmetleriolarak adlandırın.Create a new folder in the solution root and name it Services. Bunu yapmak için ContactManager projesi ' ne sağ tıklayın, Yeni | klasör Ekle ' yi seçin, BT Hizmetleriolarak adlandırın.To do this, right-click ContactManager project, select Add | New Folder, name it Services.

    Hizmetler klasörü oluşturuluyorCreating Services folder

    Hizmetler klasörü oluşturuluyorCreating Services folder

  2. Hizmetler klasörüne sağ tıklayın ve Ekle | ' yi seçin. Sınıf... bağlam menüsünden.Right-click the Services folder and select Add | Class... from the context menu.

    Hizmetler klasörüne yeni bir sınıf ekleniyorAdding a new class to the Services folder

    Hizmetler klasörüne yeni bir sınıf ekleniyorAdding a new class to the Services folder

  3. Yeni öğe Ekle iletişim kutusu göründüğünde, yeni sınıf contactrepository adını adlandırın ve Ekle' ye tıklayın.When the Add New Item dialog appears, name the new class ContactRepository and click Add.

    Kişi deposu hizmet katmanının kodunu içeren bir sınıf dosyası oluşturmaCreating a class file to contain the code for the Contact Repository service layer

    Kişi deposu hizmet katmanının kodunu içeren bir sınıf dosyası oluşturmaCreating a class file to contain the code for the Contact Repository service layer

  4. Modeller ad alanını dahil etmek için ContactRepository.cs dosyasına bir using yönergesi ekleyin.Add a using directive to the ContactRepository.cs file to include the models namespace.

    using ContactManager.Models;
    
  5. GetAllContacts metodunu uygulamak için aşağıdaki vurgulanmış kodu ContactRepository.cs dosyasına ekleyin.Add the following highlighted code to the ContactRepository.cs file to implement GetAllContacts method.

    (Kod parçacığı- Web API Laboratuvarı-Ex01-Ilgili kişi deposu)(Code Snippet - Web API Lab - Ex01 - Contact Repository)

    public class ContactRepository
    {
        public Contact[] GetAllContacts()
        {
            return new Contact[]
            {
                new Contact
                {
                    Id = 1,
                    Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2,
                    Name = "Dan Roth"
                }
            };
        }
    }
    
  6. Zaten açık değilse, ContactController.cs dosyasını açın.Open the ContactController.cs file if it is not already open.

  7. Aşağıdaki using ifadesini dosyanın ad alanı bildirimi bölümüne ekleyin.Add the following using statement to the namespace declaration section of the file.

    using ContactManager.Services;
    
  8. Deponun örneğini temsil eden bir özel alan eklemek için ContactController.cs sınıfına aşağıdaki vurgulanmış kodu ekleyin. böylece, sınıf üyelerinin geri kalanı hizmet uygulamasını kullanabilir.Add the following highlighted code to the ContactController.cs class to add a private field to represent the instance of the repository, so that the rest of the class members can make use of the service implementation.

    (Kod parçacığı- Web API Laboratuvarı-Ex01-Ilgili kişi denetleyicisi)(Code Snippet - Web API Lab - Ex01 - Contact Controller)

    public class ContactController : ApiController
    {
        private ContactRepository contactRepository;
    
        public ContactController()
        {
            this.contactRepository = new ContactRepository();
        } 
        ...
    }
    
  9. Get yöntemini, iletişim deposu hizmetini kullanacak şekilde değiştirin.Change the Get method so that it makes use of the contact repository service.

    (Kod parçacığı- Web API Laboratuvarı-Ex01-depo aracılığıyla kişiler listesi döndürülüyor)(Code Snippet - Web API Lab - Ex01 - Returning a list of contacts via the repository)

    public Contact[] Get()
    {
        return contactRepository.GetAllContacts();
    }
    
  10. Contactcontroller'ın Get yöntemi tanımına bir kesme noktası koyun.Put a breakpoint on the ContactController's Get method definition.

İletişim denetleyicisine kesme noktaları eklemeAdding breakpoints to the contact controller

İletişim denetleyicisine kesme noktaları eklemeAdding breakpoints to the contact controller 11. Uygulamayı çalıştırmak için F5'e basın.Press F5 to run the application. 12. Tarayıcı açıldığında, geliştirici araçlarını açmak için F12 tuşuna basın.When the browser opens, press F12 to open the developer tools. 13. sekmesine tıklayın.Click the Network tab. 14. Yakalamayı Başlat düğmesine tıklayın.Click the Start Capturing button. 15. Adres çubuğuna URL 'YI /api/Contact sonekine ekleyin ve ENTER tuşuna basarak API denetleyicisini yükleyin.Append the URL in the address bar with the suffix /api/contact and press Enter to load the API controller. 16. Get yöntemi yürütülmeye başladıktan sonra Visual Studio 2012 ' i kesmeniz gerekir.Visual Studio 2012 should break once Get method begins execution.

Get yöntemi içinde kesmeBreaking within the Get method

Get yöntemi içinde kesmeBreaking within the Get method 17. Devam etmek için F5 tuşuna basın.Press F5 to continue. 18. Zaten odağa sahip değilse Internet Explorer 'a geri dönün.Go back to Internet Explorer if it is not already in focus. Ağ yakalama penceresini aklınızda edin.Note the network capture window.

<span data-ttu-id="fa1f3-254">![Web API çağrısının sonuçlarını gösteren Internet Explorer 'da ağ görünümü](build-restful-apis-with-aspnet-web-api/_static/image19.png "Web API çağrısının sonuçlarını gösteren Internet Explorer 'da ağ görünümü")</span><span class="sxs-lookup"><span data-stu-id="fa1f3-254">![Network view in Internet Explorer showing results of the Web API call](build-restful-apis-with-aspnet-web-api/_static/image19.png "Network view in Internet Explorer showing results of the Web API call")</span></span>

<span data-ttu-id="fa1f3-255">*Web API çağrısının sonuçlarını gösteren Internet Explorer 'da ağ görünümü*</span><span class="sxs-lookup"><span data-stu-id="fa1f3-255">*Network view in Internet Explorer showing results of the Web API call*</span></span>
  1. Ayrıntılı görünüme git düğmesine tıklayın.Click the Go to detailed view button.

  2. Yanıt gövdesi sekmesine tıklayın. API çağrısının JSON çıkışını ve hizmet katmanının aldığı iki kişiyi nasıl temsil ettiğini aklınızda edin.Click the Response body tab. Note the JSON output of the API call, and how it represents the two contacts retrieved by the service layer.

    Web API 'sindeki JSON çıkışını Geliştirici Araçları penceresinde görüntülemeViewing the JSON output from the Web API in the developer tools window

    Web API 'sindeki JSON çıkışını Geliştirici Araçları penceresinde görüntülemeViewing the JSON output from the Web API in the developer tools window

Alıştırma 2: okuma/yazma Web API 'SI oluşturmaExercise 2: Create a Read/Write Web API

Bu alıştırmada, veri düzenlemesi özellikleriyle etkinleştirmek üzere ilgili kişi Yöneticisi için POST ve PUT yöntemlerini uygulayacaksınız.In this exercise, you will implement POST and PUT methods for the contact manager to enable it with data-editing features.

Görev 1-Web API projesi açılıyorTask 1 - Opening the Web API Project

Bu görevde, alıştırma 1 ' de oluşturulan Web API projesini geliştirmeye hazırlanacaktır, böylece kullanıcı girişi kabul edebilir.In this task, you will prepare to enhance the Web API project created in Exercise 1 so that it can accept user input.

  1. Web Için Visual Studio 2012 Express'i çalıştırın. bunu yapmak için başlat 'a gidip Web için vs Express yazın ve ENTERtuşuna basın.Run Visual Studio 2012 Express for Web, to do this go to Start and type VS Express for Web then press Enter.

  2. Kaynak/Ex02-ReadWriteWebAPI/BEGIN/ Folder konumunda bulunan Başlangıç çözümünü açın.Open the Begin solution located at Source/Ex02-ReadWriteWebAPI/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  3. Hizmetler/ContactRepository. cs dosyasını açın.Open the Services/ContactRepository.cs file.

Görev 2-Ilgili kişi deposu uygulamasına veri kalıcılığı özellikleri eklemeTask 2 - Adding Data-Persistence Features to the Contact Repository Implementation

Bu görevde, alıştırma 1 ' de oluşturulan Web API projesinin ContactRepository sınıfını, Kullanıcı girişini ve yeni Iletişim örneklerini kalıcı hale getirebilmesi için kullanacaksınız.In this task, you will augment the ContactRepository class of the Web API project created in Exercise 1 so that it can persist and accept user input and new Contact instances.

  1. Bu alıştırmada daha sonra Web sunucusu önbellek öğesi anahtar adının adını temsil etmek için Contactrepository sınıfına aşağıdaki sabiti ekleyin.Add the following constant to the ContactRepository class to represent the name of the web server cache item key name later in this exercise.

    private const string CacheKey = "ContactStore";
    
  2. Contactrepository öğesine aşağıdaki kodu içeren bir Oluşturucu ekleyin.Add a constructor to the ContactRepository containing the following code.

    (Kod parçacığı- Web API Laboratuvarı-Ex02-kişi deposu Oluşturucusu)(Code Snippet - Web API Lab - Ex02 - Contact Repository Constructor)

    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. Getallcontacts yönteminin kodunu aşağıda gösterildiği gibi değiştirin.Modify the code for the GetAllContacts method as demonstrated below.

    (Kod parçacığı- Web API Laboratuvarı-Ex02-tüm kişileri al)(Code Snippet - Web API Lab - Ex02 - Get All Contacts)

    public Contact[] GetAllContacts()
    {
        var ctx = HttpContext.Current;
    
        if (ctx != null)
        {
            return (Contact[])ctx.Cache[CacheKey];
        }
    
        return new Contact[]
            {
                new Contact
                {
                    Id = 0,
                    Name = "Placeholder"
                }
            };
    }
    

    Note

    Bu örnek, tanıtım amaçlıdır ve Web sunucusunun önbelleğini bir depolama ortamı olarak kullanacaktır. böylece, değerler oturum depolama mekanizması veya Istek depolama ömrü kullanmak yerine birden fazla istemciye aynı anda kullanılabilir olacaktır.This example is for demonstration purposes and will use the web server's cache as a storage medium, so that the values will be available to multiple clients simultaneously, rather than use a Session storage mechanism or a Request storage lifetime. Bunlardan biri, Web sunucusu önbelleğinin Entity Framework, XML depolama alanını veya başka bir çeşitliliğini kullanabilir.One could use Entity Framework, XML storage, or any other variety in place of the web server cache.

  4. Kişi kaydetme işini yapmak için Contactrepository sınıfına savecontact adlı yeni bir yöntem uygulayın.Implement a new method named SaveContact to the ContactRepository class to do the work of saving a contact. Savecontact yöntemi tek bir iletişim parametresi almalıdır ve başarılı veya başarısız olduğunu belirten bir Boole değeri döndürmelidir.The SaveContact method should take a single Contact parameter and return a Boolean value indicating success or failure.

    (Kod parçacığı- Web API Laboratuvarı-Ex02-SaveContact metodunu uygulama)(Code Snippet - Web API Lab - Ex02 - Implementing the SaveContact Method)

    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: bir HTML Istemcisinden Web API 'sini kullanmaExercise 3: Consume the Web API from an HTML Client

Bu alıştırmada, Web API 'sini çağırmak için bir HTML İstemcisi oluşturacaksınız.In this exercise, you will create an HTML client to call the Web API. Bu istemci JavaScript kullanarak Web API 'SI ile veri değişimi kolaylaştırır ve sonuçları HTML biçimlendirmesi kullanarak bir Web tarayıcısında görüntüler.This client will facilitate data exchange with the Web API using JavaScript and will display the results in a web browser using HTML markup.

Görev 1-kişileri görüntülemek için bir GUI sağlamak üzere dizin görünümünü değiştirmeTask 1 - Modifying the Index View to Provide a GUI for Displaying Contacts

Bu görevde, Web uygulamasının varsayılan dizin görünümünü, mevcut kişilerin listesini bir HTML tarayıcısında görüntüleme gereksinimini destekleyecek şekilde değiştirirsiniz.In this task, you will modify the default Index view of the web application to support the requirement of displaying the list of existing contacts in an HTML browser.

  1. Zaten açık değilse, Web Için Visual Studio 2012 Express 'i açın.Open Visual Studio 2012 Express for Web if it is not already open.

  2. Kaynak/Ex03-ConsumingWebAPI/BEGIN/ Folder konumunda bulunan Başlangıç çözümünü açın.Open the Begin solution located at Source/Ex03-ConsumingWebAPI/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  3. Görünümler/giriş klasöründe bulunan Index. cshtml dosyasını açın.Open the Index.cshtml file located at Views/Home folder.

  4. Div öğesi içindeki HTML kodunu, aşağıdaki koda benzeymek üzere ID gövdesi ile değiştirin.Replace the HTML code within the div element with id body so that it looks like the following code.

    <div id="body">
        <ul id="contacts"></ul>
    </div>
    
  5. Web API 'sine HTTP isteği gerçekleştirmek için, dosyanın alt kısmına aşağıdaki JavaScript kodunu ekleyin.Add the following Javascript code at the bottom of the file to perform the HTTP request to the Web API.

    @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. Zaten açık değilse, ContactController.cs dosyasını açın.Open the ContactController.cs file if it is not already open.

  7. Contactcontroller sınıfının Get yöntemine bir kesme noktası koyun.Place a breakpoint on the Get method of the ContactController class.

    API denetleyicisinin Get yöntemine bir kesme noktası yerleştirmePlacing a breakpoint on the Get method of the API controller

    API denetleyicisinin Get yöntemine bir kesme noktası yerleştirmePlacing a breakpoint on the Get method of the API controller

  8. Projeyi çalıştırmak için F5 tuşuna basın.Press F5 to run the project. Tarayıcı, HTML belgesini yükler.The browser will load the HTML document.

    Note

    Uygulamanızın kök URL 'sine göz attığınızdan emin olun.Ensure that you are browsing to the root URL of your application.

  9. Sayfa yüklendiğinde ve JavaScript yürütüldükten sonra, kesme noktası isabet eder ve kod yürütmesi denetleyicide duraklatılır.Once the page loads and the JavaScript executes, the breakpoint will be hit and the code execution will pause in the controller.

    Web için VS Express kullanarak Web API çağrılarında hata ayıklamaDebugging into the Web API calls using VS Express for Web

    Web için Visual Studio 2012 Express kullanarak Web API çağrısında hata ayıklamaDebugging into the Web API call using Visual Studio 2012 Express for Web

  10. Görünümü tarayıcıda yüklemeye devam etmek için kesme noktasını kaldırın ve F5 'e veya hata ayıklama araç çubuğunun devam düğmesine basın.Remove the breakpoint and press F5 or the debugging toolbar's Continue button to continue loading the view in the browser. Web API çağrısı tamamlandıktan sonra, Web API çağrısından döndürülen kişileri tarayıcıda liste öğeleri olarak görürsünüz.Once the Web API call completes you should see the contacts returned from the Web API call displayed as list items in the browser.

    Tarayıcıda liste öğeleri olarak görünen API çağrısının sonuçlarıResults of the API call displayed in the browser as list items

    Tarayıcıda liste öğeleri olarak görünen API çağrısının sonuçlarıResults of the API call displayed in the browser as list items

  11. Hata ayıklamayı durdurun.Stop debugging.

Görev 2-kişi oluşturmak için bir GUI sağlamak üzere dizin görünümünü değiştirmeTask 2 - Modifying the Index View to Provide a GUI for Creating Contacts

Bu görevde, MVC uygulamasının dizin görünümünü değiştirmeye devam edersiniz.In this task, you will continue to modify the Index view of the MVC application. HTML sayfasına kullanıcı girişini yakalayan ve yeni bir kişi oluşturmak için Web API 'sine gönderecek bir form eklenir ve GUI 'den tarihi toplamak için yeni bir Web API denetleyicisi yöntemi oluşturulur.A form will be added to the HTML page that will capture user input and send it to the Web API to create a new Contact, and a new Web API controller method will be created to collect date from the GUI.

  1. ContactController.cs dosyasını açın.Open the ContactController.cs file.

  2. Aşağıdaki kodda gösterildiği gibi, Post adlı denetleyici sınıfına yeni bir yöntem ekleyin.Add a new method to the controller class named Post as shown in the following code.

    (Kod parçacığı- Web API Laboratuvarı-Ex03-post yöntemi)(Code Snippet - Web API Lab - Ex03 - Post Method)

    public HttpResponseMessage Post(Contact contact)
    {
        this.contactRepository.SaveContact(contact);
    
        var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);
    
        return response;
    }
    
  3. Zaten açık değilse, Index. cshtml dosyasını Visual Studio 'da açın.Open the Index.cshtml file in Visual Studio if it is not already open.

  4. Önceki göreve eklediğiniz sıralanmamış listeden hemen sonra, aşağıdaki HTML kodunu dosyaya ekleyin.Add the HTML code below to the file just after the unordered list you added in the previous task.

    <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 alt kısmındaki komut dosyası öğesi içinde, bir HTTP POST çağrısı kullanarak verileri Web API 'sine gönderecek olan düğme tıklama olaylarını işlemek için aşağıdaki vurgulanmış kodu ekleyin.Within the script element at the bottom of the document, add the following highlighted code to handle button-click events, which will post the data to the Web API using an HTTP POST call.

    <script type="text/javascript">
    ... 
    $('#saveContact').click(function()
             {
                  $.post("api/contact",
                        $("#saveContactForm").serialize(),
                        function(value)
                        {
                             $('#contacts').append('<li>' + value.Name + '</li>');
                        },
                        "json"
                  );
             });
    </script>
    
  6. ContactController.csiçinde Post yöntemine bir kesme noktası koyun.In ContactController.cs, place a breakpoint on the Post method.

  7. Uygulamayı tarayıcıda çalıştırmak için F5 tuşuna basın.Press F5 to run the application in the browser.

  8. Sayfa tarayıcıya yüklendikten sonra, yeni bir kişi adı ve kimliği yazın ve Kaydet düğmesine tıklayın.Once the page is loaded in the browser, type in a new contact name and Id and click the Save button.

    Tarayıcıda yüklenen istemci HTML belgesiThe client HTML document loaded in the browser

    Tarayıcıda yüklenen istemci HTML belgesiThe client HTML document loaded in the browser

  9. Post yönteminde hata ayıklayıcı penceresi kesildiğinde, iletişim parametresinin özelliklerine göz atın.When the debugger window breaks in the Post method, take a look at the properties of the contact parameter. Değerler, forma girdiğiniz verilerle eşleşmelidir.The values should match the data you entered in the form.

    İstemciden Web API 'sine gönderilen kişi nesnesiThe Contact object being sent to the Web API from the client

    İstemciden Web API 'sine gönderilen kişi nesnesiThe Contact object being sent to the Web API from the client

  10. Yanıt değişkeni oluşturuluncaya kadar hata ayıklayıcıdaki yöntemi adım adım yapın.Step through the method in the debugger until the response variable has been created. Hata ayıklayıcıda Yereller penceresinde İnceleme yapıldığında tüm özelliklerin ayarlandığını görürsünüz.Upon inspection in the Locals window in the debugger, you'll see that all the properties have been set.

Hata ayıklayıcıda oluşturma sonrasında yanıtThe response following creation in the debugger

Hata ayıklayıcıda oluşturma sonrasında yanıtThe response following creation in the debugger 11. F5 tuşuna basarsanız veya hata ayıklayıcıda devam et ' e tıkladığınızda istek tamamlanır.If you press F5 or click Continue in the debugger the request will complete. Tarayıcıya geri döndüğünüzde, yeni kişi Contactrepository uygulamasıyla depolanan kişiler listesine eklenir.Once you switch back to the browser, the new contact has been added to the list of contacts stored by the ContactRepository implementation.

Tarayıcı, yeni kişi örneğinin başarıyla oluşturulmasını yansıtırThe browser reflects successful creation of the new contact instance

Tarayıcı, yeni kişi örneğinin başarıyla oluşturulmasını yansıtırThe browser reflects successful creation of the new contact instance

Note

Ayrıca, bu uygulamayı Azure 'a dağıtmak için Ek C: Web dağıtımı kullanarak bir ASP.NET MVC 4 uygulaması yayımlama.Additionally, you can deploy this application to Azure following Appendix C: Publishing an ASP.NET MVC 4 Application using Web Deploy.


ÖzetSummary

Bu laboratuvar, sizi yeni ASP.NET Web API çerçevesine ve Framework kullanan yeniden Web API 'Lerinin uygulamasına sunmaktadır.This lab has introduced you to the new ASP.NET Web API framework and to the implementation of RESTful Web APIs using the framework. Buradan, bu laboratuvara bir örnek olarak sağlanmaktansa, hizmetin herhangi bir sayıda mekanizmayı ve bir düzeyini kullanarak veri kalıcılığını kolaylaştıran yeni bir depo oluşturabilirsiniz.From here, you could create a new repository that facilitates data persistence using any number of mechanisms and wire that service up rather than the simple one provided as an example in this lab. Web API 'SI, HTTP ve JSON veya XML 'yi destekleyen herhangi bir dilde yazılmış HTML olmayan istemcilerden gelen iletişimi etkinleştirme gibi birçok ek özelliği destekler.Web API supports a number of additional features, such as enabling communication from non-HTML clients written in any language that supports HTTP and JSON or XML. Bir Web API 'sini tipik bir Web uygulaması dışında barındırma özelliği de mümkündür ve bunun yanı sıra kendi serileştirme biçimlerinizi oluşturabilir.The ability to host a Web API outside of a typical web application is also possible, as well as is the ability to create your own serialization formats.

ASP.NET Web sitesi, [https://asp.net/web-api](https://asp.net/web-api)ADRESINDEKI Web API çerçevesine adanmış bir alana sahiptir.The ASP.NET Web site has an area dedicated to the ASP.NET Web API framework at [https://asp.net/web-api](https://asp.net/web-api). Bu site, Web API 'siyle ilgili en son bilgileri, örnekleri ve haberleri sağlamaya devam edecek, bu nedenle neredeyse tüm cihazlar veya geliştirme çerçevesiyle sunulan özel Web API 'Leri oluşturma sanatı hakkında daha ayrıntılı bilgi almak istiyorsanız, sık sık kontrol edin.This site will continue to provide late-breaking information, samples, and news related to Web API, so check it frequently if you'd like to delve deeper into the art of creating custom Web APIs available to virtually any device or development framework.

Ek A: kod parçacıkları kullanmaAppendix A: Using Code Snippets

Kod parçacıkları ile, ihtiyacınız olan tüm koda parmaklarınızın elinizin altında olmasını sağlayabilirsiniz.With code snippets, you have all the code you need at your fingertips. Laboratuvar belgesi, aşağıdaki şekilde gösterildiği gibi, bunları yalnızca ne zaman kullanacağınızı söyleyecektir.The lab document will tell you exactly when you can use them, as shown in the following figure.

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanmaUsing Visual Studio code snippets to insert code into your project

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanmaUsing Visual Studio code snippets to insert code into your project

Klavyeyi kullanarak bir kod parçacığı eklemek için (C# yalnızca)To add a code snippet using the keyboard (C# only)

  1. Kodu eklemek istediğiniz yere imleci yerleştirin.Place the cursor where you would like to insert the code.

  2. Kod parçacığı adını yazmaya başlayın (boşluk veya tire olmadan).Start typing the snippet name (without spaces or hyphens).

  3. IntelliSense, eşleşen kod parçacıklarının adlarını gösterdiği gibi izleyin.Watch as IntelliSense displays matching snippets' names.

  4. Doğru kod parçacığını seçin (veya tüm kod parçacığının adı seçilene kadar yazmaya devam edin).Select the correct snippet (or keep typing until the entire snippet's name is selected).

  5. Kod parçacığını imleç konumuna eklemek için SEKME tuşuna iki kez basın.Press the Tab key twice to insert the snippet at the cursor location.

    Kod parçacığı adını yazmaya başlayınStart typing the snippet name

    Kod parçacığı adını yazmaya başlayınStart typing the snippet name

    Vurgulanan parçacığı seçmek için Tab tuşuna basınPress Tab to select the highlighted snippet

    Vurgulanan parçacığı seçmek için Tab tuşuna basınPress Tab to select the highlighted snippet

    Sekmeye tekrar basın ve kod parçacığı genişletilirPress Tab again and the snippet will expand

    Sekmeye tekrar basın ve kod parçacığı genişletilirPress Tab again and the snippet will expand

Fareyi kullanarak bir kod parçacığı eklemek için (C#, VISUAL BASIC ve XML)To add a code snippet using the mouse (C#, Visual Basic and XML)

  1. Kod parçacığını eklemek istediğiniz yere sağ tıklayın.Right-click where you want to insert the code snippet.

  2. Kod parçacığı Ekle ' yi ve ardından kod parçacıklarınıseçin.Select Insert Snippet followed by My Code Snippets.

  3. Listeden tıklatarak ilgili kod parçacığını seçin.Pick the relevant snippet from the list, by clicking on it.

    Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve parçacığı Ekle ' yi seçin.Right-click where you want to insert the code snippet and select Insert Snippet

    Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve parçacığı Ekle ' yi seçin.Right-click where you want to insert the code snippet and select Insert Snippet

    Listeden tıklatarak ilgili kod parçacığını seçinPick the relevant snippet from the list, by clicking on it

    Listeden tıklatarak ilgili kod parçacığını seçinPick the relevant snippet from the list, by clicking on it

Ek B: Web için Visual Studio Express 2012 yüklemeAppendix B: Installing Visual Studio Express 2012 for Web

Microsoft Web Platformu Yükleyicisi kullanarak Web için Microsoft Visual Studio Express 2012 veya başka bir "Express" sürümü yükleyebilirsiniz.You can install Microsoft Visual Studio Express 2012 for Web or another "Express" version using the Microsoft Web Platform Installer. Aşağıdaki yönergeler Microsoft Web Platformu Yükleyicisikullanarak Web Için Visual Studio Express 2012 ' i yüklemek için gereken adımlarda size yol gösterir.The following instructions guide you through the steps required to install Visual studio Express 2012 for Web using Microsoft Web Platform Installer.

  1. [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)gidin.Go to [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatif olarak, Web Platformu Yükleyicisi zaten yüklüyse, Azure SDK"Ile Web için Visual Studio Express 2012 "ürün için arama yapabilirsiniz.Alternatively, if you already have installed Web Platform Installer, you can open it and search for the product "Visual Studio Express 2012 for Web with Azure SDK".

  2. Şimdi yüklensin' e tıklayın.Click on Install Now. Web platformu yükleyicinizi yoksa, önce indirmek ve yüklemek üzere yönlendirilirsiniz.If you do not have Web Platform Installer you will be redirected to download and install it first.

  3. Web Platformu Yükleyicisi açıkken, kurulum 'u başlatmak için yükleme ' ye tıklayın.Once Web Platform Installer is open, click Install to start the setup.

    Visual Studio Express yüklensinInstall Visual Studio Express

    Visual Studio Express yüklensinInstall Visual Studio Express

  4. Tüm ürünlerin lisanslarını ve koşullarını okuyun ve devam etmek için kabul ediyorum ' a tıklayın.Read all the products' licenses and terms and click I Accept to continue.

    Lisans koşullarını kabul etme

    Lisans koşullarını kabul etmeAccepting the license terms

  5. İndirme ve yükleme işlemi tamamlanana kadar bekleyin.Wait until the downloading and installation process completes.

    Yükleme ilerleme durumu

    Yükleme ilerleme durumuInstallation progress

  6. Yükleme tamamlandığında son' a tıklayın.When the installation completes, click Finish.

    Yükleme tamamlandı

    Yükleme tamamlandıInstallation completed

  7. Web Platformu Yükleyicisi 'ni kapatmak için Çıkış ' a tıklayın.Click Exit to close Web Platform Installer.

  8. Web için Visual Studio Express açmak için Başlangıç ekranına gidin ve "vs Express"yazmaya başlayın ve ardından Web için vs Express kutucuğuna tıklayın.To open Visual Studio Express for Web, go to the Start screen and start writing "VS Express", then click on the VS Express for Web tile.

    Web için VS Express kutucuğu

    Web için VS Express kutucuğuVS Express for Web tile

Ek C: Web Dağıtımı kullanarak ASP.NET MVC 4 uygulaması yayımlamaAppendix C: Publishing an ASP.NET MVC 4 Application using Web Deploy

Bu ek, Azure portalından yeni bir Web sitesi oluşturmayı ve Azure tarafından sunulan Web Dağıtımı yayımlama özelliğinden yararlanarak Laboratuvarı izleyerek edindiğiniz uygulamayı yayımlamayı gösterir.This appendix will show you how to create a new web site from the Azure Portal and publish the application you obtained by following the lab, taking advantage of the Web Deploy publishing feature provided by Azure.

Görev 1-Azure portalından yeni bir Web sitesi oluşturmaTask 1 - Creating a New Web Site from the Azure Portal

  1. Azure yönetim portalı gidin ve aboneliğinizle ilişkili Microsoft kimlik bilgilerini kullanarak oturum açın.Go to the Azure Management Portal and sign in using the Microsoft credentials associated with your subscription.

    Note

    Azure ile 10 ASP.NET Web sitesini ücretsiz olarak barındırabilir ve ardından trafiğiniz büyüdükçe ölçeklendirebilirsiniz.With Azure you can host 10 ASP.NET Web Sites for free and then scale as your traffic grows. Buradankaydolabilirsiniz.You can sign up here.

    Windows Azure portal oturum açınLog on to Windows Azure portal

    Portalda oturum açınLog on to Portal

  2. Komut çubuğunda Yeni ' ye tıklayın.Click New on the command bar.

    Yeni bir Web sitesi oluşturmaCreating a new Web Site

    Yeni bir Web sitesi oluşturmaCreating a new Web Site

  3. İşlem | Web sitesi' ne tıklayın.Click Compute | Web Site. Sonra hızlı oluştur seçeneğini belirleyin.Then select Quick Create option. Yeni Web sitesi için kullanılabilir bir URL sağlayın ve Web sitesi oluştur' a tıklayın.Provide an available URL for the new web site and click Create Web Site.

    Note

    Azure, bulutta çalışan ve yönetebileceğiniz bir Web uygulaması için ana bilgisayar.Azure is the host for a web application running in the cloud that you can control and manage. Hızlı oluştur seçeneği, tamamlanmış bir Web uygulamasını Azure 'a Portal dışından dağıtmanıza izin verir.The Quick Create option allows you to deploy a completed web application to the Azure from outside the portal. Bir veritabanı ayarlamaya yönelik adımları içermez.It does not include steps for setting up a database.

    Hızlı oluşturma kullanarak yeni bir Web sitesi oluşturmaCreating a new Web Site using Quick Create

    Hızlı oluşturma kullanarak yeni bir Web sitesi oluşturmaCreating a new Web Site using Quick Create

  4. Yeni Web sitesi oluşturuluncaya kadar bekleyin.Wait until the new Web Site is created.

  5. Web sitesi oluşturulduktan sonra URL sütununun altındaki bağlantıya tıklayın.Once the Web Site is created click the link under the URL column. Yeni Web sitesinin çalışıp çalışmadığını denetleyin.Check that the new Web Site is working.

    Yeni Web sitesine göz atmaBrowsing to the new web site

    Yeni Web sitesine göz atmaBrowsing to the new web site

    Web sitesi çalışıyorWeb site running

    Web sitesi çalışıyorWeb site running

  6. Portala geri dönün ve yönetim sayfalarını göstermek için ad sütununun altındaki Web sitesinin adına tıklayın.Go back to the portal and click the name of the web site under the Name column to display the management pages.

    Web sitesi yönetim sayfalarını açmaOpening the web site management pages

    Web sitesi yönetim sayfalarını açmaOpening the Web Site management pages

  7. Pano sayfasında, Hızlı bakış bölümünde, Yayımlama profilini indir bağlantısına tıklayın.In the Dashboard page, under the quick glance section, click the Download publish profile link.

    Note

    Yayımlama profili , her etkin yayımlama yöntemi için bir Web uygulamasını Azure 'da yayımlamak için gereken tüm bilgileri içerir.The publish profile contains all of the information required to publish a web application to a Azure for each enabled publication method. Yayımlama profili, bir yayımlama yönteminin etkinleştirildiği her bir uç noktasına bağlanmak ve kimlik doğrulaması yapmak için gereken URL'leri, kullanıcı kimlik bilgilerini ve veritabanı dizelerini içerir.The publish profile contains the URLs, user credentials and database strings required to connect to and authenticate against each of the endpoints for which a publication method is enabled. Microsoft WebMatrix 2, Web için Microsoft Visual Studio Express ve Microsoft Visual Studio 2012 , Web uygulamalarını Azure 'da yayımlamaya yönelik bu programların yapılandırılmasını otomatik hale getirmek için yayımlama profillerini okumayı destekler.Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web and Microsoft Visual Studio 2012 support reading publish profiles to automate configuration of these programs for publishing web applications to Azure.

    Web sitesi yayımlama profili indiriliyorDownloading the web site publish profile

    Web sitesi yayımlama profili indiriliyorDownloading the Web Site publish profile

  8. Yayımlama profili dosyasını bilinen bir konuma indirin.Download the publish profile file to a known location. Bu alıştırmada, Visual Studio 'dan Azure 'da bir Web uygulaması yayınlamak için bu dosyayı nasıl kullanacağınızı göreceksiniz.Further in this exercise you will see how to use this file to publish a web application to Azure from Visual Studio.

    Yayımlama profili dosyası kaydediliyorSaving the publish profile file

    Yayımlama profili dosyası kaydediliyorSaving the publish profile file

Görev 2-veritabanı sunucusunu yapılandırmaTask 2 - Configuring the Database Server

Uygulamanız SQL Server veritabanlarını kullanıyorsa, bir SQL veritabanı sunucusu oluşturmanız gerekir.If your application makes use of SQL Server databases you will need to create a SQL Database server. SQL Server kullanmayan basit bir uygulama dağıtmak istiyorsanız bu görevi atlayabilirsiniz.If you want to deploy a simple application that does not use SQL Server you might skip this task.

  1. Uygulama veritabanını depolamak için bir SQL veritabanı sunucusuna ihtiyacınız olacaktır.You will need a SQL Database server for storing the application database. SQL veritabanı sunucularını aboneliğinizden Azure Yönetim Portalı ' nda SQL veritabanları | sunucuları | Sunucu panosu' nda görüntüleyebilirsiniz.You can view the SQL Database servers from your subscription in the Azure Management portal at Sql Databases | Servers | Server's Dashboard. Oluşturulmuş bir sunucunuz yoksa, komut çubuğunda Ekle düğmesini kullanarak bir tane oluşturabilirsiniz.If you do not have a server created, you can create one using the Add button on the command bar. Sunucu adını ve URL 'yi, yönetici oturum açma adını ve parolayı, bunları bir sonraki görevlerde kullanacaksınız gibi bir yere göz atın.Take note of the server name and URL, administrator login name and password, as you will use them in the next tasks. Daha sonraki bir aşamada oluşturulacak şekilde veritabanını henüz oluşturmayın.Do not create the database yet, as it will be created in a later stage.

    SQL veritabanı sunucu panosuSQL Database Server Dashboard

    SQL veritabanı sunucu panosuSQL Database Server Dashboard

  2. Sonraki görevde, Visual Studio 'dan veritabanı bağlantısını test edersiniz. bu nedenle, yerel IP adresinizi sunucunun Izin VERILEN IP adreslerilistesine eklemeniz gerekir.In the next task you will test the database connection from Visual Studio, for that reason you need to include your local IP address in the server's list of Allowed IP Addresses. Bunu yapmak için, Yapılandır' a tıklayın, geçerli ISTEMCI IP adresinden IP ADRESINI seçin ve Başlangıç IP adresi ve bitiş IP adresi metin kutularına yapıştırın ve Add-Client-ip-Address-ok-Button düğmesine tıklayın.To do that, click Configure, select the IP address from Current Client IP Address and paste it on the Start IP Address and End IP Address text boxes and click the add-client-ip-address-ok-button button.

    Istemci IP adresi ekleniyor

    Istemci IP adresi ekleniyorAdding Client IP Address

  3. ISTEMCI IP adresi ızın verilen IP adresleri listesine eklendikten sonra, değişiklikleri onaylamak için Kaydet ' e tıklayın.Once the Client IP Address is added to the allowed IP addresses list, click on Save to confirm the changes.

    Değişiklikleri Onayla

    Değişiklikleri OnaylaConfirm Changes

Görev 3-Web Dağıtımı kullanarak bir ASP.NET MVC 4 uygulaması yayımlamaTask 3 - Publishing an ASP.NET MVC 4 Application using Web Deploy

  1. ASP.NET MVC 4 çözümüne geri dönün.Go back to the ASP.NET MVC 4 solution. Çözüm GezginiWeb sitesi projesine sağ tıklayın ve Yayımla' yı seçin.In the Solution Explorer, right-click the web site project and select Publish.

    Uygulama yayımlanıyorPublishing the Application

    Web sitesi yayımlanıyorPublishing the web site

  2. İlk görevde kaydettiğiniz yayımlama profilini içeri aktarın.Import the publish profile you saved in the first task.

    Yayımlama profilini içeri aktarmaImporting the publish profile

    Yayımlama profili içeri aktarılıyorImporting publish profile

  3. Bağlantıyı doğrula' ya tıklayın.Click Validate Connection. Doğrulama tamamlandıktan sonra İleri' ye tıklayın.Once Validation is complete click Next.

    Note

    Bağlantıyı Doğrula düğmesinin yanında yeşil bir onay işareti gördüğünüzde doğrulama tamamlanır.Validation is complete once you see a green checkmark appear next to the Validate Connection button.

    Bağlantı doğrulanıyorValidating connection

    Bağlantı doğrulanıyorValidating connection

  4. Ayarlar sayfasında, veritabanları bölümü altında, veritabanı bağlantınızın metin kutusunun yanındaki düğmeye (yani DefaultConnection) tıklayın.In the Settings page, under the Databases section, click the button next to your database connection's textbox (i.e. DefaultConnection).

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

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

  5. Veritabanı bağlantısını aşağıdaki şekilde yapılandırın:Configure the database connection as follows:

    • Sunucu adı ' nda, TCP: önekini kullanarak SQL veritabanı sunucunuzun URL 'nizi yazın.In the Server name type your SQL Database server URL using the tcp: prefix.

    • Kullanıcı adı ' nda Sunucu Yöneticisi oturum açma adınızı yazın.In User name type your server administrator login name.

    • Parola alanına Sunucu Yöneticisi oturum açma parolanızı yazın.In Password type your server administrator login password.

    • Yeni bir veritabanı adı yazın, örneğin: MVC4SampleDB.Type a new database name, for example: MVC4SampleDB.

      Hedef bağlantı dizesi yapılandırılıyorConfiguring destination connection string

      Hedef bağlantı dizesi yapılandırılıyorConfiguring destination connection string

  6. Daha sonra, Tamam'a tıklayın.Then click OK. Veritabanını oluşturmak isteyip istemediğiniz sorulduğunda Evet' e tıklayın.When prompted to create the database click Yes.

    Veritabanı oluşturmaCreating the database

    Veritabanı oluşturmaCreating the database

  7. Windows Azure 'da SQL veritabanı 'na bağlanmak için kullanacağınız bağlantı dizesi varsayılan bağlantı metin kutusu içinde gösterilir.The connection string you will use to connect to SQL Database in Windows Azure is shown within Default Connection textbox. Ardından İleri'ye tıklayın.Then click Next.

    SQL veritabanı 'na işaret eden bağlantı dizesiConnection string pointing to SQL Database

    SQL veritabanı 'na işaret eden bağlantı dizesiConnection string pointing to SQL Database

  8. Önizleme sayfasında Yayımla' ya tıklayın.In the Preview page, click Publish.

    Web uygulaması yayımlanıyorPublishing the web application

    Web uygulaması yayımlanıyorPublishing the web application

  9. Yayımlama işlemi tamamlandıktan sonra varsayılan tarayıcınız yayınlanan Web sitesini açar.Once the publishing process finishes, your default browser will open the published web site.

    Windows Azure 'da yayımlanan uygulamaApplication published to Windows Azure

    Azure 'da yayımlanan uygulamaApplication published to Azure