Tworzenie interfejsów API RESTful za pomocą internetowego interfejsu API ASP.NET

Artykuł
07/13/2023

Laboratorium praktyczne: użyj internetowego interfejsu API w ASP.NET 4.x, aby utworzyć prosty interfejs API REST dla aplikacji menedżera kontaktów. Utworzysz również klienta do korzystania z interfejsu API.

W ostatnich latach stało się jasne, że protokół HTTP nie jest przeznaczony tylko do obsługi stron HTML. Jest to również zaawansowana platforma do tworzenia internetowych interfejsów API przy użyciu kilku zleceń (GET, POST itd.) oraz kilku prostych pojęć, takich jak identyfikatory URI i nagłówki. ASP.NET internetowy interfejs API to zestaw składników, które upraszczają programowanie HTTP. Ponieważ jest on oparty na środowisku uruchomieniowym ASP.NET MVC, internetowy interfejs API automatycznie obsługuje szczegóły transportu niskiego poziomu protokołu HTTP. Jednocześnie internetowy interfejs API naturalnie uwidacznia model programowania HTTP. W rzeczywistości jednym z celów internetowego interfejsu API jest nie abstrakcja rzeczywistości protokołu HTTP. W związku z tym internetowy interfejs API jest zarówno elastyczny, jak i łatwy do rozszerzenia. Styl architektury REST okazał się skutecznym sposobem wykorzystania protokołu HTTP — chociaż z pewnością nie jest to jedyne prawidłowe podejście do protokołu HTTP. Menedżer kontaktów uwidoczni między innymi usługę RESTful na potrzeby wyświetlania listy, dodawania i usuwania kontaktów.

To laboratorium wymaga podstawowej wiedzy na temat protokołów HTTP, REST i zakłada, że masz podstawową działającą wiedzę na temat języków HTML, JavaScript i jQuery.

Uwaga

Witryna sieci Web ASP.NET ma obszar przeznaczony dla platformy internetowego interfejsu API ASP.NET pod adresem https://asp.net/web-api. Ta witryna będzie nadal dostarczać informacje o opóźnionych przerwach, próbkach i wiadomościach związanych z internetowym interfejsem API, więc sprawdź ją często, jeśli chcesz zagłębić się w sztukę tworzenia niestandardowych internetowych interfejsów API dostępnych dla praktycznie dowolnego urządzenia lub platformy programistycznej.

ASP.NET internetowy interfejs API, podobny do ASP.NET MVC 4, ma dużą elastyczność w zakresie oddzielania warstwy usług od kontrolerów, co pozwala na użycie kilku dostępnych struktur wstrzykiwania zależności dość łatwo.

Wszystkie przykładowe kod i fragmenty kodu znajdują się w zestawie szkoleniowym Web Camps dostępnym pod adresem https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Cele

W tym praktycznym laboratorium dowiesz się, jak wykonywać następujące działania:

Implementowanie internetowego interfejsu API RESTful
Wywoływanie interfejsu API z klienta HTML

Wymagania wstępne

Do ukończenia tego laboratorium praktycznego wymagane jest wykonanie następujących czynności:

Microsoft Visual Studio Express 2012 dla sieci Web lub superior (przeczytaj dodatek B, aby uzyskać instrukcje dotyczące sposobu instalacji).

Konfigurowanie

Instalowanie fragmentów kodu

Dla wygody większość kodu, którym będziesz zarządzać w tym laboratorium, jest dostępna jako fragmenty kodu programu Visual Studio. Aby zainstalować fragmenty kodu, uruchom plik .\Source\Setup\CodeSnippets.vsi .

Jeśli nie znasz Visual Studio Code fragmentów kodu i chcesz dowiedzieć się, jak ich używać, możesz zapoznać się z dodatkiem z tego dokumentu "Dodatek A: Używanie fragmentów kodu".

Ćwiczenia

To praktyczne laboratorium obejmuje następujące ćwiczenie:

Ćwiczenie 1. Tworzenie internetowego interfejsu API Read-Only
Ćwiczenie 2. Tworzenie internetowego interfejsu API odczytu/zapisu
Ćwiczenie 3. Korzystanie z internetowego interfejsu API z klienta HTML

Uwaga

Każdemu ćwiczeniu towarzyszy folder End zawierający wynikowe rozwiązanie, które należy uzyskać po zakończeniu ćwiczeń. Możesz użyć tego rozwiązania jako przewodnika, jeśli potrzebujesz dodatkowej pomocy podczas wykonywania ćwiczeń.

Szacowany czas ukończenia tego laboratorium: 60 minut.

Ćwiczenie 1. Tworzenie internetowego interfejsu API Read-Only

W tym ćwiczeniu zaimplementujesz metody GET tylko do odczytu dla menedżera kontaktów.

Zadanie 1 — Tworzenie projektu interfejsu API

W tym zadaniu użyjesz nowych szablonów projektów internetowych ASP.NET do utworzenia aplikacji internetowej interfejsu API sieci Web.

Uruchom program Visual Studio 2012 Express for Web, aby to zrobić, przejdź do menu Start i wpisz VS Express for Web , a następnie naciśnij klawisz Enter.
W menu Plik wybierz pozycję Nowy projekt. Wybierz język Visual C# | Typ projektu internetowego w widoku drzewa typu projektu, a następnie wybierz typ projektu aplikacji internetowej MVC 4 ASP.NET . Ustaw nazwę projektu na ContactManager i nazwę rozwiązania na Początek, a następnie kliknij przycisk OK.

Tworzenie nowego projektu aplikacji internetowej MVC 4.0 ASP.NET
W oknie dialogowym ASP.NET typ projektu MVC 4 wybierz typ projektu internetowego interfejsu API . Kliknij przycisk OK.

Określanie typu projektu internetowego interfejsu API

Zadanie 2 . Tworzenie kontrolerów interfejsu API programu Contact Manager

W tym zadaniu utworzysz klasy kontrolera, w których będą znajdować się metody interfejsu API.

Usuń plik o nazwie ValuesController.cs w folderze Controllers z projektu.
Kliknij prawym przyciskiem myszy folder Controllers w projekcie i wybierz polecenie Dodaj | Kontroler z menu kontekstowego.

Dodawanie nowego kontrolera do projektu
W wyświetlonym oknie dialogowym Dodawanie kontrolera wybierz pozycję Pusty kontroler interfejsu API z menu Szablon. Nadaj klasie kontrolera nazwę ContactController. Następnie kliknij przycisk Dodaj.

Za pomocą okna dialogowego Dodawanie kontrolera w celu utworzenia nowego kontrolera internetowego interfejsu API
Dodaj następujący kod do kontrolki ContactController.

(Fragment kodu — laboratorium internetowego interfejsu API — Ex01 — Pobierz metodę interfejsu API)
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
Naciśnij klawisz F5, aby debugować aplikację. Powinna zostać wyświetlona domyślna strona główna projektu internetowego interfejsu API.

Domyślna strona główna aplikacji internetowego interfejsu API ASP.NET
W oknie programu Internet Explorer naciśnij klawisz F12 , aby otworzyć okno Narzędzia deweloperskie . Kliknij kartę Sieć , a następnie kliknij przycisk Rozpocznij przechwytywanie , aby rozpocząć przechwytywanie ruchu sieciowego do okna.

Otwieranie karty sieci i inicjowanie przechwytywania sieci
Dołącz adres URL na pasku adresu przeglądarki z ciągiem /api/contact i naciśnij klawisz Enter. Szczegóły transmisji zostaną wyświetlone w oknie przechwytywania sieci. Należy pamiętać, że typ MIME odpowiedzi to application/json. Pokazuje to, jak domyślny format danych wyjściowych to JSON.

Wyświetlanie danych wyjściowych żądania internetowego interfejsu API w widoku sieci

Uwaga

Domyślne zachowanie programu Internet Explorer 10 w tym momencie będzie dotyczyć pytania, czy użytkownik chce zapisać lub otworzyć strumień wynikowy wywołania internetowego interfejsu API. Dane wyjściowe będą plikiem tekstowym zawierającym wynik JSON wywołania adresu URL internetowego interfejsu API. Nie należy anulować okna dialogowego, aby można było watch zawartości odpowiedzi za pomocą okna Narzędzia deweloperów.
Kliknij przycisk Przejdź do szczegółowego widoku , aby wyświetlić więcej szczegółów na temat odpowiedzi tego wywołania interfejsu API.

Przełącz do widoku szczegółowego
Kliknij kartę Treść odpowiedzi , aby wyświetlić rzeczywisty tekst odpowiedzi JSON.

Wyświetlanie tekstu wyjściowego JSON w monitorze sieci

Zadanie 3 . Tworzenie modeli kontaktów i rozszerzanie kontrolera kontaktów

W tym zadaniu utworzysz klasy kontrolera, w których będą znajdować się metody interfejsu API.

Kliknij prawym przyciskiem myszy folder Models i wybierz polecenie Dodaj | Klasa... z menu kontekstowego.

Dodawanie nowego modelu do aplikacji internetowej
W oknie dialogowym Dodawanie nowego elementu nazwij nowy plik Contact.cs i kliknij przycisk Dodaj.

Tworzenie nowego pliku klasy Contact
Dodaj następujący wyróżniony kod do klasy Contact .

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex01 — Klasa kontaktu)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
W klasie ContactController wybierz ciąg wyrazu w definicji metody Get i wpisz wyraz Contact. Po wpiseniu wyrazu wskaźnik pojawi się na początku słowa Kontakt. Przytrzymaj klawisz Ctrl i naciśnij klawisz kropki (.) lub kliknij ikonę za pomocą myszy, aby otworzyć okno dialogowe pomocy w edytorze kodu, aby automatycznie wypełnić dyrektywę using dla przestrzeni nazw Modele.

Korzystanie z pomocy funkcji IntelliSense dla deklaracji przestrzeni nazw

Zmodyfikuj kod metody Get , aby zwracał tablicę wystąpień modelu Kontakt.

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex01 — Zwracanie listy kontaktów)

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

Naciśnij klawisz F5 , aby debugować aplikację internetową w przeglądarce. Aby wyświetlić zmiany wprowadzone w danych wyjściowych odpowiedzi interfejsu API, wykonaj następujące kroki.
1. Po otwarciu przeglądarki naciśnij klawisz F12 , jeśli narzędzia deweloperskie nie są jeszcze otwarte.
2. Kliknij kartę Sieć .
3. Naciśnij przycisk Rozpocznij przechwytywanie .
4. Dodaj sufiks adresu URL /api/contact do adresu URL na pasku adresu i naciśnij klawisz Enter .
5. Naciśnij przycisk Przejdź do widoku szczegółowego .
6. Wybierz kartę Treść odpowiedzi . Powinien zostać wyświetlony ciąg JSON reprezentujący serializowaną formę tablicy wystąpień kontaktów.
  
  Dane wyjściowe serializacji JSON złożonego wywołania metody internetowego interfejsu API

Zadanie 4 . Wyodrębnianie funkcji do warstwy usługi

To zadanie pokaże, jak wyodrębnić funkcje do warstwy usługi, aby ułatwić deweloperom oddzielenie ich funkcjonalności usługi od warstwy kontrolera, co pozwala na ponowne korzystanie z usług, które rzeczywiście wykonują pracę.

Utwórz nowy folder w katalogu głównym rozwiązania i nadaj mu nazwę Services. Aby to zrobić, kliknij prawym przyciskiem myszy projekt ContactManager , wybierz pozycję Dodaj | nowy folder, nadaj mu nazwę Usługi.

Tworzenie folderu usług
Kliknij prawym przyciskiem myszy folder Usługi i wybierz polecenie Dodaj | Klasa... z menu kontekstowego.

Dodawanie nowej klasy do folderu Usługi
Po wyświetleniu okna dialogowego Dodawanie nowego elementu nadaj nowej klasie nazwę ContactRepository i kliknij przycisk Dodaj.

Tworzenie pliku klasy zawierającego kod warstwy usługi Contact Repository
Dodaj dyrektywę using do pliku ContactRepository.cs , aby uwzględnić przestrzeń nazw modeli.
```
using ContactManager.Models;
```

Dodaj następujący wyróżniony kod do pliku ContactRepository.cs , aby zaimplementować metodę GetAllContacts.

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex01 — Repozytorium kontaktów)

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

Otwórz plik ContactController.cs , jeśli nie został jeszcze otwarty.
Dodaj następującą instrukcję using do sekcji deklaracji przestrzeni nazw pliku.
```
using ContactManager.Services;
```
Dodaj następujący wyróżniony kod do klasy ContactController.cs , aby dodać pole prywatne reprezentujące wystąpienie repozytorium, aby reszta składowych klas mogła korzystać z implementacji usługi.

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex01 — Kontroler kontaktu)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
Zmień metodę Get , aby korzystała z usługi repozytorium kontaktów.

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex01 — Zwracanie listy kontaktów za pośrednictwem repozytorium)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
Umieść punkt przerwania w definicji metody GetContactController.

Dodawanie punktów przerwania do kontrolera kontaktów

Dodawanie punktów przerwania do kontrolera kontaktu 11. Naciśnij klawisz F5 , aby uruchomić aplikację. 12. Po otwarciu przeglądarki naciśnij klawisz F12 , aby otworzyć narzędzia deweloperskie. 13. Kliknij kartę Sieć . 14. Kliknij przycisk Rozpocznij przechwytywanie . 15. Dołącz adres URL na pasku adresu z sufiksem /api/contact i naciśnij klawisz Enter , aby załadować kontroler interfejsu API. 16. Program Visual Studio 2012 powinien przerwać po rozpoczęciu wykonywania metody Get .

Niezgodność metody Get

Niezgodność w metodzie Get 17. Naciśnij klawisz F5 , aby kontynuować. 18. Wstecz do programu Internet Explorer, jeśli nie ma jeszcze fokusu. Zanotuj okno przechwytywania sieci.

Widok sieciowy w programie Internet Explorer przedstawiający wyniki widoku sieć wywołania internetowego interfejsu API

Widok sieciowy w programie Internet Explorer przedstawiający wyniki wywołania internetowego interfejsu API 19. Kliknij przycisk Przejdź do widoku szczegółowego . 20. Kliknij kartę Treść odpowiedzi . Zwróć uwagę na dane wyjściowe JSON wywołania interfejsu API i sposób przedstawiania dwóch kontaktów pobranych przez warstwę usługi.

Wyświetlanie danych wyjściowych JSON z internetowego interfejsu API w oknie narzędzi deweloperskich Wyświetlanie danych wyjściowych

Wyświetlanie danych wyjściowych JSON z internetowego interfejsu API w oknie narzędzi deweloperskich

Ćwiczenie 2. Tworzenie internetowego interfejsu API odczytu/zapisu

W tym ćwiczeniu zaimplementujesz metody POST i PUT dla menedżera kontaktów, aby włączyć je za pomocą funkcji edytowania danych.

Zadanie 1 — otwieranie projektu internetowego interfejsu API

W tym zadaniu przygotujesz się do ulepszenia projektu internetowego interfejsu API utworzonego w ćwiczeniu 1, aby umożliwić akceptowanie danych wejściowych użytkownika.

Uruchom program Visual Studio 2012 Express for Web, aby to zrobić, przejdź do pozycji Start i wpisz VS Express for Web , a następnie naciśnij klawisz Enter.
Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex02-ReadWriteWebAPI/Begin/ . W przeciwnym razie możesz kontynuować korzystanie z rozwiązania Końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Po otwarciu podanego rozwiązania Begin należy pobrać niektóre brakujące pakiety NuGet przed kontynuowaniem. Aby to zrobić, kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij przycisk Przywróć , aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj | rozwiązanie.
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego należy uruchomić te kroki po otwarciu istniejącego rozwiązania z tego laboratorium.
Otwórz plik Services/ContactRepository.cs .

Zadanie 2 . Dodawanie funkcji Data-Persistence do implementacji repozytorium kontaktów

W tym zadaniu rozszerzysz klasę ContactRepository projektu internetowego interfejsu API utworzonego w ćwiczeniu 1, aby umożliwić utrwalanie i akceptowanie danych wejściowych użytkownika oraz nowych wystąpień kontaktów.

Dodaj następującą stałą do klasy ContactRepository , aby reprezentować nazwę klucza elementu pamięci podręcznej serwera sieci Web w dalszej części tego ćwiczenia.
```
private const string CacheKey = "ContactStore";
```

Dodaj konstruktor do repozytorium ContactRepository zawierającego następujący kod.

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex02 — Konstruktor repozytorium kontaktów)

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

Zmodyfikuj kod metody GetAllContacts , jak pokazano poniżej.

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex02 — Pobieranie wszystkich kontaktów)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

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

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

Ten przykład służy do celów demonstracyjnych i będzie używać pamięci podręcznej serwera internetowego jako nośnika magazynu, dzięki czemu wartości będą dostępne dla wielu klientów jednocześnie, zamiast używać mechanizmu magazynu sesji lub okresu istnienia magazynu żądania. Można użyć programu Entity Framework, magazynu XML lub innej odmiany zamiast pamięci podręcznej serwera internetowego.

Zaimplementuj nową metodę o nazwie SaveContact do klasy ContactRepository , aby wykonać pracę podczas zapisywania kontaktu. Metoda SaveContact powinna przyjmować pojedynczy parametr Contact i zwracać wartość logiczną wskazującą powodzenie lub niepowodzenie.

(Fragment kodu — Web API Lab — Ex02 — Implementowanie metody SaveContact)

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

Ćwiczenie 3. Korzystanie z internetowego interfejsu API z poziomu klienta HTML

W tym ćwiczeniu utworzysz klienta HTML w celu wywołania internetowego interfejsu API. Ten klient ułatwi wymianę danych z internetowym interfejsem API przy użyciu języka JavaScript i wyświetli wyniki w przeglądarce internetowej przy użyciu znaczników HTML.

Zadanie 1 . Modyfikowanie widoku indeksu w celu udostępnienia graficznego interfejsu użytkownika do wyświetlania kontaktów

W tym zadaniu zmodyfikujesz domyślny widok indeksu aplikacji internetowej, aby obsługiwać wymaganie wyświetlenia listy istniejących kontaktów w przeglądarce HTML.

Otwórz program Visual Studio 2012 Express for Web , jeśli nie jest jeszcze otwarty.
Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex03-ConsumingWebAPI/Begin/ . W przeciwnym razie możesz kontynuować korzystanie z rozwiązania Końcowego uzyskanego przez ukończenie poprzedniego ćwiczenia.
1. Po otwarciu podanego rozwiązania Begin należy pobrać niektóre brakujące pakiety NuGet przed kontynuowaniem. Aby to zrobić, kliknij menu Projekt i wybierz pozycję Zarządzaj pakietami NuGet.
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij przycisk Przywróć , aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycję Kompiluj | rozwiązanie.
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium należy wykonać te kroki.
Otwórz plik Index.cshtml znajdujący się w folderze Views/Home .
Zastąp kod HTML w elemencie div treścią identyfikatora , tak aby wyglądał jak poniższy kod.
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

Dodaj następujący kod JavaScript w dolnej części pliku, aby wykonać żądanie HTTP do internetowego interfejsu 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>
}

Otwórz plik ContactController.cs , jeśli nie został jeszcze otwarty.
Umieść punkt przerwania w metodzie Get klasy ContactController .

Umieszczenie punktu przerwania w metodzie Get kontrolera interfejsu API
Naciśnij klawisz F5 , aby uruchomić projekt. Przeglądarka załaduje dokument HTML.

Uwaga

Upewnij się, że przeglądasz główny adres URL aplikacji.
Po załadowaniu strony i wykonaniu skryptu JavaScript punkt przerwania zostanie trafiony, a wykonanie kodu zostanie wstrzymane w kontrolerze.

Debugowanie wywołania internetowego interfejsu API przy użyciu programu Visual Studio 2012 Express for Web
Usuń punkt przerwania i naciśnij klawisz F5 lub przycisk Kontynuuj na pasku narzędzi debugowania, aby kontynuować ładowanie widoku w przeglądarce. Po zakończeniu wywołania internetowego interfejsu API powinny zostać wyświetlone kontakty zwrócone z wywołania internetowego interfejsu API wyświetlane jako elementy listy w przeglądarce.

Wyniki wywołania interfejsu API wyświetlane w przeglądarce jako elementy listy
Zatrzymaj debugowanie.

Zadanie 2 . Modyfikowanie widoku indeksu w celu udostępnienia graficznego interfejsu użytkownika do tworzenia kontaktów

W tym zadaniu będziesz nadal modyfikować widok indeksu aplikacji MVC. Formularz zostanie dodany do strony HTML, która będzie przechwytywała dane wejściowe użytkownika i wysyłała je do internetowego interfejsu API w celu utworzenia nowego kontaktu, a nowa metoda kontrolera internetowego interfejsu API zostanie utworzona w celu zebrania daty z graficznego interfejsu użytkownika.

Otwórz plik ContactController.cs .

Dodaj nową metodę do klasy kontrolera o nazwie Post , jak pokazano w poniższym kodzie.

(Fragment kodu — Laboratorium internetowego interfejsu API — Ex03 — Metoda post)

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

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

    return response;
}

Otwórz plik Index.cshtml w programie Visual Studio, jeśli nie został jeszcze otwarty.

Dodaj poniższy kod HTML do pliku tuż po nieurządzanej liście dodanej w poprzednim zadaniu.

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

W elemecie script w dolnej części dokumentu dodaj następujący wyróżniony kod w celu obsługi zdarzeń kliknięcia przycisku, które będą publikować dane w internetowym interfejsie API przy użyciu wywołania HTTP POST.

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

W pliku ContactController.cs umieść punkt przerwania w metodzie Post .
Naciśnij klawisz F5 , aby uruchomić aplikację w przeglądarce.
Po załadowaniu strony w przeglądarce wpisz nową nazwę kontaktu i identyfikator, a następnie kliknij przycisk Zapisz .

Dokument HTML klienta załadowany w przeglądarce
Gdy okno debugera przerywa działanie metody Post , przyjrzyj się właściwościom parametru kontaktu . Wartości powinny być zgodne z danymi wprowadzonymi w formularzu.

Obiekt Contact wysyłany do internetowego interfejsu API z klienta
Wykonaj kroki metody w debugerze do momentu utworzenia zmiennej odpowiedzi . Po inspekcji w oknie Ustawienia lokalne w debugerze zobaczysz, że wszystkie właściwości zostały ustawione.

Odpowiedź po utworzeniu w debugerze odpowiedź

Odpowiedź po utworzeniu w debugerze 11. Po naciśnięciu klawisza F5 lub kliknięciu przycisku Kontynuuj w debugerze żądanie zostanie zakończone. Po powrocie do przeglądarki nowy kontakt został dodany do listy kontaktów przechowywanych przez implementację repozytorium kontaktów .

Przeglądarka odzwierciedla pomyślne utworzenie nowego wystąpienia kontaktu Przeglądarka

Przeglądarka odzwierciedla pomyślne utworzenie nowego wystąpienia kontaktu

Uwaga

Ponadto tę aplikację można wdrożyć na platformie Azure, korzystając z dodatku C: Publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy.

Podsumowanie

W tym laboratorium przedstawiono nową platformę internetowego interfejsu API ASP.NET oraz implementację internetowych interfejsów API RESTful przy użyciu platformy . W tym miejscu można utworzyć nowe repozytorium, które ułatwia trwałość danych przy użyciu dowolnej liczby mechanizmów i przewodów, które obsługuje, a nie proste, podane jako przykład w tym laboratorium. Internetowy interfejs API obsługuje wiele dodatkowych funkcji, takich jak włączanie komunikacji z klientów innych niż HTML napisanych w dowolnym języku obsługującym kod HTTP i JSON lub XML. Możliwość hostowania internetowego interfejsu API poza typową aplikacją internetową jest również możliwa, a także możliwość tworzenia własnych formatów serializacji.

Witryna sieci Web ASP.NET ma obszar przeznaczony dla platformy internetowego interfejsu API ASP.NET pod adresem [https://asp.net/web-api](https://asp.net/web-api). Ta witryna będzie nadal dostarczać informacje o opóźnionych przerwach, próbkach i wiadomościach związanych z internetowym interfejsem API, więc sprawdź ją często, jeśli chcesz zagłębić się w sztukę tworzenia niestandardowych internetowych interfejsów API dostępnych dla praktycznie dowolnego urządzenia lub platformy programistycznej.

Dodatek A: Używanie fragmentów kodu

Dzięki fragmentom kodu masz cały potrzebny kod na wyciągnięcie ręki. Dokument laboratorium zawiera informacje o tym, kiedy można ich używać, jak pokazano na poniższej ilustracji.

Używanie fragmentów kodu w programie Visual Studio Code do wstawiania kodu do projektu

Wstawianie kodu do projektu przy użyciu fragmentów kodu w programie Visual Studio Code

Aby dodać fragment kodu przy użyciu klawiatury (tylko w języku C#)

Umieść kursor, w którym chcesz wstawić kod.
Zacznij wpisywać nazwę fragmentu kodu (bez spacji lub łączników).
Obserwuj, jak funkcja IntelliSense wyświetla pasujące nazwy fragmentów kodu.
Wybierz poprawny fragment kodu (lub kontynuuj wpisywanie do momentu wybrania nazwy całego fragmentu kodu).
Naciśnij dwukrotnie klawisz Tab, aby wstawić fragment kodu w lokalizacji kursora.

Zacznij wpisywać nazwę fragmentu kodu

Naciśnij klawisz Tab, aby wybrać wyróżniony fragment kodu

Naciśnij ponownie klawisz Tab, a fragment kodu zostanie rozwinąć

Aby dodać fragment kodu przy użyciu myszy (C#, Visual Basic i XML)

Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu.
Wybierz pozycję Wstaw fragment kodu , a następnie pozycję Moje fragmenty kodu.
Wybierz odpowiedni fragment kodu z listy, klikając go.

fragment kodu fragment kodu

Kliknij prawym przyciskiem myszy miejsce, w którym chcesz wstawić fragment kodu, a następnie wybierz polecenie Wstaw fragment kodu

Wybierz odpowiedni fragment kodu z listy, klikając go

Dodatek B: Instalowanie Visual Studio Express 2012 dla sieci Web

Możesz zainstalować program Microsoft Visual Studio Express 2012 dla sieci Web lub innej wersji "Express" przy użyciu Instalator platformy Microsoft Web. Poniższe instrukcje przeprowadzą Cię przez kroki wymagane do zainstalowania programu Visual Studio Express 2012 for Web przy użyciu Instalator platformy Microsoft Web.

Przejdź do strony [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatywnie, jeśli masz już zainstalowany Instalator platformy internetowej, możesz go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web with Azure SDK" (Visual Studio Express 2012 dla sieci Web przy użyciu zestawu Azure SDK).
Kliknij pozycję Zainstaluj teraz. Jeśli nie masz Instalatora platformy internetowej , nastąpi przekierowanie do pobrania i zainstalowania go najpierw.
Po otwarciu Instalatora platformy internetowej kliknij przycisk Zainstaluj , aby rozpocząć instalację.

Instalowanie Visual Studio Express
Przeczytaj wszystkie licencje i postanowienia dotyczące produktów, a następnie kliknij przycisk Akceptuję , aby kontynuować.

Akceptowanie postanowień licencyjnych
Poczekaj na zakończenie procesu pobierania i instalacji.

Postęp instalacji
Po zakończeniu instalacji kliknij przycisk Zakończ.

Instalacja została ukończona
Kliknij przycisk Zakończ, aby zamknąć Instalatora platformy sieci Web.
Aby otworzyć Visual Studio Express dla sieci Web, przejdź do ekranu startowego i zacznij pisać "VS Express", a następnie kliknij kafelek VS Express for Web.

Kafelek programu VS Express dla sieci Web

Dodatek C: publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy

W tym dodatku pokazano, jak utworzyć nową witrynę internetową w witrynie Azure Portal i opublikować aplikację uzyskaną za pomocą laboratorium, korzystając z funkcji publikowania web deploy udostępnionej przez platformę Azure.

Zadanie 1 . Tworzenie nowej witryny sieci Web w witrynie Azure Portal

Przejdź do portalu zarządzania Azure i zaloguj się przy użyciu poświadczeń firmy Microsoft skojarzonych z subskrypcją.

Uwaga

Za pomocą platformy Azure możesz hostować 10 ASP.NET witryn internetowych bezpłatnie, a następnie skalować w miarę wzrostu ruchu. Możesz zarejestrować się tutaj.

Zaloguj się do portalu
Kliknij pozycję Nowy na pasku poleceń.

Tworzenie nowej witryny sieci Web
Kliknij pozycję Compute Web Site ( Obliczanie | witryny sieci Web). Następnie wybierz opcję Szybkie tworzenie . Podaj dostępny adres URL nowej witryny sieci Web i kliknij pozycję Utwórz witrynę sieci Web.

Uwaga

Platforma Azure jest hostem aplikacji internetowej działającej w chmurze, którą możesz kontrolować i zarządzać. Opcja Szybkie tworzenie umożliwia wdrożenie ukończonej aplikacji internetowej na platformie Azure spoza portalu. Nie obejmuje on kroków konfigurowania bazy danych.

Tworzenie nowej witryny sieci Web przy użyciu szybkiego tworzenia
Poczekaj na utworzenie nowej witryny sieci Web .
Po utworzeniu witryny sieci Web kliknij link w kolumnie ADRES URL . Sprawdź, czy nowa witryna sieci Web działa.

Przechodzenie do nowej witryny sieci Web

Uruchomiona witryna sieci Web
Wstecz do portalu i kliknij nazwę witryny sieci Web w kolumnie Nazwa, aby wyświetlić strony zarządzania.

Otwieranie stron zarządzania witrynami sieci Web
Na stronie Pulpit nawigacyjny w sekcji Szybki rzut oka kliknij link Pobierz profil publikowania .

Uwaga

Profil publikowania zawiera wszystkie informacje wymagane do opublikowania aplikacji internetowej na platformie Azure dla każdej metody publikacji z włączoną obsługą. Profil publikowania zawiera adresy URL, poświadczenia użytkownika i ciągi bazy danych wymagane do nawiązania połączenia z poszczególnymi punktami końcowymi, dla których jest włączona metoda publikacji. Program Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web i Microsoft Visual Studio 2012 obsługują odczytywanie profilów publikowania w celu zautomatyzowania konfiguracji tych programów do publikowania aplikacji internetowych na platformie Azure.

Pobieranie profilu publikowania witryny sieci Web
Pobierz plik profilu publikowania do znanej lokalizacji. W tym ćwiczeniu zobaczysz, jak używać tego pliku do publikowania aplikacji internetowej na platformie Azure z poziomu programu Visual Studio.

Zapisywanie pliku profilu publikowania

Zadanie 2 — Konfigurowanie serwera bazy danych

Jeśli aplikacja korzysta z SQL Server baz danych, musisz utworzyć serwer SQL Database. Jeśli chcesz wdrożyć prostą aplikację, która nie korzysta z SQL Server możesz pominąć to zadanie.

Do przechowywania bazy danych aplikacji potrzebny będzie serwer SQL Database. Serwery SQL Database można wyświetlić z subskrypcji w witrynie Azure Management Portal napulpicie nawigacyjnym serweraSql Databases | Server | . Jeśli nie masz utworzonego serwera, możesz go utworzyć za pomocą przycisku Dodaj na pasku poleceń. Zanotuj nazwę serwera i adres URL, nazwę logowania administratora i hasło, ponieważ będą one używane w następnych zadaniach. Nie twórz jeszcze bazy danych, ponieważ zostanie ona utworzona w późniejszym etapie.

pulpit nawigacyjny serwera SQL Database
W następnym zadaniu przetestujesz połączenie bazy danych z programu Visual Studio, dlatego musisz uwzględnić lokalny adres IP na liście dozwolonych adresów IP serwera. Aby to zrobić, kliknij przycisk Konfiguruj, wybierz adres IP z bieżącego adresu IP klienta i wklej go w polach tekstowych Początkowy adres IP i Końcowy adres IP , a następnie kliknij .

Dodawanie adresu IP klienta
Po dodaniu adresu IP klienta do listy dozwolonych adresów IP kliknij pozycję Zapisz , aby potwierdzić zmiany.

Potwierdzanie zmian

Zadanie 3 . Publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy

Wstecz do rozwiązania ASP.NET MVC 4. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt witryny internetowej i wybierz pozycję Publikuj.

Publikowanie witryny sieci Web
Zaimportuj profil publikowania zapisany w pierwszym zadaniu.

Importowanie profilu publikowania
Kliknij pozycję Weryfikuj połączenie. Po zakończeniu walidacji kliknij przycisk Dalej.

Uwaga

Walidacja zostanie ukończona po wyświetleniu zielonego znacznika wyboru obok przycisku Weryfikuj połączenie.

Weryfikowanie połączenia
Na stronie Ustawienia w sekcji Bazy danych kliknij przycisk obok pola tekstowego połączenia bazy danych (tj. DefaultConnection).

Konfiguracja

Konfiguracja wdrażania sieci Web
Skonfiguruj połączenie bazy danych w następujący sposób:
- W polu Nazwa serwera wpisz adres URL serwera SQL Database przy użyciu prefiksu tcp: .
- W polu Nazwa użytkownika wpisz nazwę logowania administratora serwera.
- W polu Hasło wpisz hasło logowania administratora serwera.
- Wpisz nową nazwę bazy danych, na przykład : MVC4SampleDB.
  
  Konfigurowanie parametrów połączenia docelowego
Następnie kliknij przycisk OK. Po wyświetleniu monitu o utworzenie bazy danych kliknij przycisk Tak.

Tworzenie bazy danych
Parametry połączenia używane do nawiązywania połączenia z SQL Database na platformie Windows Azure są wyświetlane w polu tekstowym Domyślne połączenie. Następnie kliknij przycisk Dalej.

Parametry połączenia wskazujące SQL Database
Na stronie Podgląd kliknij pozycję Publikuj.

Publikowanie aplikacji internetowej
Po zakończeniu procesu publikowania domyślna przeglądarka otworzy opublikowaną witrynę internetową.

Aplikacja opublikowana na platformie Azure