Создание API RESTful с помощью веб-API ASP.NET

2023-07-13

Практическое руководство. Использование веб-API в ASP.NET 4.x для создания простого REST API для приложения диспетчера контактов. Вы также создадите клиент для использования API.

В последние годы стало ясно, что HTTP не только для обслуживания HTML-страниц. Это также мощная платформа для создания веб-API, используя несколько команд (GET, POST и т. д.), а также несколько простых концепций, таких как URI и заголовки. веб-API ASP.NET — это набор компонентов, упрощающих программирование HTTP. Так как он построен на основе среды выполнения MVC ASP.NET, веб-API автоматически обрабатывает сведения о транспорте HTTP низкого уровня. В то же время веб-API естественно предоставляет модель программирования HTTP. На самом деле, одна из целей веб-API заключается в том, чтобы не абстрагировать реальность HTTP. В результате веб-API является гибким и простым для расширения. Стиль архитектуры REST оказался эффективным способом использования HTTP - хотя это, безусловно, не единственный допустимый подход к HTTP. Диспетчер контактов предоставляет RESTful для перечисления, добавления и удаления контактов, среди прочего.

В этой лаборатории требуется базовое представление о HTTP, REST и предполагается, что у вас есть базовые знания о HTML, JavaScript и jQuery.

Примечание.

Веб-сайт ASP.NET имеет область, посвященную веб-API ASP.NET платформеhttps://asp.net/web-api. Этот сайт будет продолжать предоставлять последние критически важные сведения, примеры и новости, связанные с веб-API, поэтому часто проверьте его, если вы хотите углубиться в искусство создания пользовательских веб-API, доступных практически для любого устройства или платформы разработки.

веб-API ASP.NET, аналогично ASP.NET MVC 4, имеет большую гибкость с точки зрения разделения уровня служб от контроллеров, что позволяет использовать несколько доступных платформ внедрения зависимостей довольно просто.

Все примеры кода и фрагменты кода включены в набор для обучения веб-лагерей, доступный по адресу https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Задачи

В этой практической лаборатории вы узнаете, как:

Реализация веб-API RESTful
Вызов API из HTML-клиента

Необходимые компоненты

Для выполнения этой практической работы требуется следующее:

Microsoft Visual Studio Express 2012 для Интернета или более поздней версии (см . приложение B для инструкций по его установке).

Настройка

Установка фрагментов кода

Для удобства большая часть кода, который вы будете управлять вместе с этой лабораторией, доступна как фрагменты кода Visual Studio. Чтобы установить фрагменты кода, выполните файл .\Source\Setup\CodeSnippets.vsi .

Если вы не знакомы с фрагментами кода Visual Studio Code и хотите узнать, как их использовать, см. в этом документе "Приложение A: использование фрагментов кода".

Упражнения

Эта практическая лаборатория включает в себя следующее упражнение:

Упражнение 1. Создание веб-API только для чтения
Упражнение 2. Создание веб-API чтения и записи
Упражнение 3. Использование веб-API из HTML-клиента

Примечание.

Каждое упражнение сопровождается папкой End , содержащей полученное решение, которое необходимо получить после выполнения упражнений. Это решение можно использовать в качестве руководства, если вам нужна дополнительная помощь в работе с упражнениями.

Предполагаемое время выполнения этой лаборатории: 60 минут.

Упражнение 1. Создание веб-API только для чтения

В этом упражнении вы реализуете методы GET только для чтения для диспетчера контактов.

Задача 1. Создание проекта API

В этой задаче вы будете использовать новые шаблоны веб-проектов ASP.NET для создания веб-приложения ВЕБ-API.

Запустите Visual Studio 2012 Express для Интернета, чтобы перейти к началу и введите VS Express для Интернета, а затем нажмите клавишу ВВОД.
В меню "Файл" выберите "Создать проект". Выберите Visual C# | Тип веб-проекта из представления дерева типов проекта, а затем ASP.NET выберите тип проекта веб-приложения MVC 4. Задайте для проекта имя ContactManager и имя решения на начало, а затем нажмите кнопку "ОК".

Создание проекта веб-приложения MVC 4.0 ASP.NET
В диалоговом окне типа проекта ASP.NET MVC 4 выберите тип проекта веб-API . Щелкните OK.

Указание типа проекта веб-API

Задача 2. Создание контроллеров API диспетчера контактов

В этой задаче вы создадите классы контроллеров, в которых будут находиться методы API.

Удалите файл с именем ValuesController.cs в папке Controllers из проекта.
Щелкните правой кнопкой мыши папку "Контроллеры " в проекте и выберите " Добавить| Контроллер из контекстного меню.

Добавление нового контроллера в проект
В появившемся диалоговом окне добавления контроллера выберите пустой контроллер API в меню "Шаблон". Назовите класс контроллера ContactController. Нажмите кнопку Добавить.

Использование диалогового окна "Добавление контроллера" для создания нового контроллера веб-API
Добавьте следующий код в ContactController.

(Фрагмент кода — Лаборатория веб-API — Ex01 — метод get API)
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
Нажмите клавишу F5 для запуска отладки приложения. Должна появиться домашняя страница по умолчанию для проекта веб-API.

Домашняя страница по умолчанию приложения веб-API ASP.NET
В окне Internet Explorer нажмите клавишу F12 , чтобы открыть окно средств разработчика. Перейдите на вкладку "Сеть" и нажмите кнопку "Начать запись ", чтобы начать запись сетевого трафика в окно.

Открытие сетевой вкладки и создание записи сети
Добавьте URL-адрес в адресную строку браузера с помощью /api/contact и нажмите клавишу ВВОД. Сведения о передаче будут отображаться в окне записи сети. Обратите внимание, что тип MIME ответа — application/json. В этом примере показано, как формат выходных данных по умолчанию — JSON.

Просмотр выходных данных запроса веб-API в представлении сети

Примечание.

Поведение internet Explorer 10 по умолчанию на этом этапе будет запрашивать, хотите ли пользователь сохранить или открыть поток, полученный из вызова веб-API. Выходные данные будут текстовым файлом, содержащим результат JSON вызова URL-адреса веб-API. Не отменяйте диалоговое окно, чтобы просмотреть содержимое ответа с помощью окна "Разработчики".
Нажмите кнопку "Перейти к подробному представлению ", чтобы просмотреть дополнительные сведения об ответе этого вызова API.

Переключение на подробное представление
Щелкните вкладку "Текст ответа", чтобы просмотреть фактический текст ответа JSON.

Просмотр выходного текста JSON в сетевом мониторе

Задача 3. Создание моделей контактов и расширение контроллера контактов

В этой задаче вы создадите классы контроллеров, в которых будут находиться методы API.

Щелкните правой кнопкой мыши папку "Модели" и выберите " Добавить | Класс" в контекстном меню.

Добавление новой модели в веб-приложение
В диалоговом окне "Добавить новый элемент" назовите новый файл Contact.cs и нажмите кнопку "Добавить".

Создание файла класса Contact
Добавьте следующий выделенный код в класс Contact .

(Фрагмент кода — Лаборатория веб-API — Ex01 — класс contact)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
В классе ContactController выберите строку слова в определении метода Get и введите слово Contact. После ввода слова индикатор появится в начале слова Contact. Удерживайте клавишу CTRL и нажимайте клавишу (.) или щелкните значок с помощью мыши, чтобы открыть диалоговое окно помощи в редакторе кода, чтобы автоматически заполнить директиву using для пространства имен Models.

Использование помощи Intellisense для объявлений пространства имен
Измените код метода Get таким образом, чтобы он возвращал массив экземпляров модели Contact.

(Фрагмент кода — Лаборатория веб-API — Ex01 — возврат списка контактов)
```
public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}
```
Нажмите клавишу F5 , чтобы отладить веб-приложение в браузере. Чтобы просмотреть изменения, внесенные в выходные данные ответа API, выполните следующие действия.
1. После открытия браузера нажмите клавишу F12 , если средства разработчика еще не открыты.
2. Щелкните вкладку "Сеть ".
3. Нажмите кнопку "Начать запись ".
4. Добавьте URL-суффикс /api/contact к URL-адресу в адресной строке и нажмите клавишу ВВОД .
5. Нажмите кнопку "Перейти к подробному представлению ".
6. Перейдите на вкладку "Текст ответа". Вы увидите строку JSON, представляющую сериализованную форму массива экземпляров Contact.
  
  Сериализованные выходные данные JSON сложного вызова метода веб-API

Задача 4. Извлечение функциональных возможностей на уровне служб

Эта задача продемонстрирует, как извлечь функциональные возможности в уровень служб, чтобы упростить разработчикам отделять их функциональные возможности службы от уровня контроллера, тем самым позволяя повторно использовать службы, которые на самом деле выполняют эту работу.

Создайте папку в корневом каталоге решения и назовите ее службами. Для этого щелкните правой кнопкой мыши проект ContactManager, выберите "Добавить | новую папку", назовите ее службами.

Создание папки служб
Щелкните правой кнопкой мыши папку "Службы " и выберите " Добавить | Класс" в контекстном меню.

Добавление нового класса в папку "Службы"
Когда появится диалоговое окно "Добавить новый элемент" , назовите новый класс ContactRepository и нажмите кнопку "Добавить".

Создание файла класса, содержащего код для уровня службы "Репозиторий контактов"
Добавьте директиву using в файл ContactRepository.cs , чтобы включить пространство имен моделей.
```
using ContactManager.Models;
```

Добавьте следующий выделенный код в файл ContactRepository.cs для реализации метода GetAllContacts.

(Фрагмент кода — Лаборатория веб-API — Ex01 — репозиторий контактов)

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

Откройте файл ContactController.cs, если он еще не открыт.
Добавьте следующую инструкцию using в раздел объявления пространства имен файла.
```
using ContactManager.Services;
```
Добавьте следующий выделенный код в класс ContactController.cs , чтобы добавить частное поле для представления экземпляра репозитория, чтобы остальные члены класса могли использовать реализацию службы.

(Фрагмент кода — Лаборатория веб-API — Ex01 — контроллер контактов)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
Измените метод Get , чтобы он использовал службу репозитория контактов.

(Фрагмент кода — Лаборатория веб-API — Ex01 — возврат списка контактов через репозиторий)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
Поместите точку останова в определение метода Get ContactController.

Добавление точек останова в контроллер контактов

Добавление точек останова в контроллер контактов 11. Нажмите клавишу F5 , чтобы запустить приложение. 12. Когда откроется браузер, нажмите клавишу F12 , чтобы открыть средства разработчика. 13. Щелкните вкладку "Сеть ". 14. Нажмите кнопку "Начать запись ". 15. Добавьте URL-адрес в адресную строку с суффиксом /api/contact и нажмите клавишу ВВОД , чтобы загрузить контроллер API. 16. Visual Studio 2012 должен прервать работу после начала выполнения метода Get .

Нарушение в методе Get

Нарушение метода Get 17. Нажмите клавишу F5 , чтобы продолжить. 18. Вернитесь в Internet Explorer, если он еще не находится в фокусе. Обратите внимание на окно захвата сети.

Сетевое представление в Internet Explorer с результатами вызова веб-API

Сетевое представление в Internet Explorer с результатами вызова веб-API 19. Нажмите кнопку "Перейти к подробному представлению ". 20. Перейдите на вкладку "Текст ответа". Обратите внимание на выходные данные JSON вызова API и как он представляет два контакта, полученных уровнем службы.

Просмотр выходных данных JSON из веб-API в окне средств разработчика

Просмотр выходных данных JSON из веб-API в окне средств разработчика

Упражнение 2. Создание веб-API чтения и записи

В этом упражнении вы реализуете методы POST и PUT для диспетчера контактов, чтобы включить его с функциями редактирования данных.

Задача 1. Открытие проекта веб-API

В этой задаче вы подготовите проект веб-API, созданный в упражнении 1, чтобы он смог принять входные данные пользователя.

Запустите Visual Studio 2012 Express для Интернета, чтобы перейти к началу и введите VS Express для Интернета, а затем нажмите клавишу ВВОД.
Откройте решение Begin, расположенное в папке Source/Ex02-ReadWriteWebAPI/Begin/Begin. В противном случае можно продолжить использование решения End , полученного путем выполнения предыдущего упражнения.
1. Если вы открыли предоставленное решение Begin , перед продолжением необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".
2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.
3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |
  
  Примечание.
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.
Откройте файл Services/ContactRepository.cs.

Задача 2. Добавление функций сохраняемости данных в реализацию репозитория контактов

В этой задаче вы добавите класс ContactRepository проекта веб-API, созданного в упражнении 1, чтобы он смог сохранить и принять входные данные пользователя и новые экземпляры контакта.

Добавьте следующую константу в класс ContactRepository , чтобы представить имя ключа ключа элемента кэша веб-сервера позже в этом упражнении.
```
private const string CacheKey = "ContactStore";
```

Добавьте конструктор в ContactRepository , содержащий следующий код.

(Фрагмент кода — Лаборатория веб-API — Ex02 — конструктор репозитория контактов)

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

Измените код для метода GetAllContacts , как показано ниже.

(Фрагмент кода — Лаборатория веб-API — Ex02 — получение всех контактов)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

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

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}
```
Примечание.

Этот пример предназначен для демонстрации и будет использовать кэш веб-сервера в качестве носителя хранилища, чтобы значения были доступны нескольким клиентам одновременно, а не использовать механизм хранения сеансов или время существования хранилища запросов. Можно использовать Entity Framework, хранилище XML или любое другое разнообразие вместо кэша веб-сервера.

Реализуйте новый метод SaveContact в классе ContactRepository для сохранения контакта. Метод SaveContact должен принимать один параметр Contact и возвращать логическое значение, указывающее на успех или сбой.

(Фрагмент кода — Лаборатория веб-API — Ex02 — реализация метода 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;
}

Упражнение 3. Использование веб-API из HTML-клиента

В этом упражнении вы создадите HTML-клиент для вызова веб-API. Этот клиент упрощает обмен данными с веб-API с помощью JavaScript и отображает результаты в веб-браузере с помощью разметки HTML.

Задача 1. Изменение представления индекса для предоставления графического интерфейса для отображения контактов

В этой задаче вы измените представление индекса по умолчанию веб-приложения, чтобы обеспечить поддержку отображения списка существующих контактов в браузере HTML.

Откройте Visual Studio 2012 Express для Интернета , если оно еще не открыто.
Откройте решение Begin, расположенное в папке Source/Ex03-ConsumingWebAPI/Begin/. В противном случае можно продолжить использование решения End , полученного путем выполнения предыдущего упражнения.
1. Если вы открыли предоставленное решение Begin , перед продолжением необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".
2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.
3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |
  
  Примечание.
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.
Откройте файл Index.cshtml, расположенный в папке Views/Home.
Замените HTML-код в элементе div текстом идентификатора, чтобы он выглядел следующим образом.
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

Добавьте следующий код Javascript в нижней части файла, чтобы выполнить HTTP-запрос к веб-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>
}

Откройте файл ContactController.cs, если он еще не открыт.
Поместите точку останова в метод Get класса ContactController.

Размещение точки останова в методе Get контроллера API
Нажмите клавишу F5, чтобы запустить проект. Браузер загрузит HTML-документ.

Примечание.

Убедитесь, что вы просматриваете корневой URL-адрес приложения.
После загрузки страницы и выполнения JavaScript точка останова будет достигнута, а выполнение кода будет приостановлено в контроллере.

Отладка в вызове веб-API с помощью Visual Studio 2012 Express для Интернета
Удалите точку останова и нажмите клавишу F5 или кнопку "Продолжить отладку", чтобы продолжить загрузку представления в браузере. После завершения вызова веб-API вы увидите контакты, возвращенные из вызова веб-API, отображаемые в качестве элементов списка в браузере.

Результаты вызова API, отображаемого в браузере в виде элементов списка
Остановите отладку.

Задача 2. Изменение представления индекса для предоставления графического интерфейса для создания контактов

В этой задаче вы продолжите изменять представление индекса приложения MVC. Форма будет добавлена на HTML-страницу, которая будет записывать входные данные пользователя и отправлять его в веб-API для создания нового контакта, а для сбора даты из графического интерфейса будет создан новый метод контроллера веб-API.

Откройте файл ContactController.cs.
Добавьте новый метод в класс контроллера с именем Post , как показано в следующем коде.

(Фрагмент кода — Лаборатория веб-API — Ex03 — метод Post)
```
public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

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

    return response;
}
```
Откройте файл Index.cshtml в Visual Studio, если он еще не открыт.

Добавьте приведенный ниже код HTML в файл сразу после неупорядоченного списка, добавленного в предыдущей задаче.

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

В элементе скрипта в нижней части документа добавьте следующий выделенный код для обработки событий нажатия кнопки, которые будут отправлять данные в веб-API с помощью вызова HTTP POST.

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

В ContactController.cs поместите точку останова в методе Post .
Нажмите клавишу F5 , чтобы запустить приложение в браузере.
После загрузки страницы в браузере введите новое имя контакта и идентификатор и нажмите кнопку "Сохранить ".

HTML-документ клиента, загруженный в браузере
При разрыве окна отладчика в методе Post просмотрите свойства параметра контакта . Значения должны соответствовать данным, введенным в форме.

Объект Contact, отправляемый в веб-API клиента
Пошаговое выполнение метода в отладчике до создания переменной ответа . После проверки в окне "Локальные" в отладчике вы увидите, что все свойства заданы.

Ответ после создания в отладчике

Ответ после создания в отладчике 11. Если нажать клавишу F5 или нажать кнопку "Продолжить " в отладчике, запрос завершится. После перехода в браузер новый контакт будет добавлен в список контактов, хранящихся реализацией ContactRepository .

Браузер отражает успешное создание нового экземпляра контакта

Браузер отражает успешное создание нового экземпляра контакта

Примечание.

Кроме того, это приложение можно развернуть в Azure в следующем приложении C. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания.

Итоги

Эта лаборатория представила вам новую платформу веб-API ASP.NET и реализацию ВЕБ-API RESTful с помощью платформы. Здесь можно создать новый репозиторий, который упрощает сохранение данных с помощью любого количества механизмов и проводов, которые обслуживаются, а не простой, предоставленный в качестве примера в этой лаборатории. Веб-API поддерживает ряд дополнительных функций, таких как включение обмена данными от клиентов, отличных от HTML, написанных на любом языке, поддерживающем HTTP и JSON или XML. Также возможна возможность размещения веб-API вне типичного веб-приложения, а также возможность создавать собственные форматы сериализации.

Веб-сайт ASP.NET имеет область, выделенную для платформы веб-API ASP.NET по адресу [https://asp.net/web-api](https://asp.net/web-api). Этот сайт будет продолжать предоставлять последние критически важные сведения, примеры и новости, связанные с веб-API, поэтому часто проверьте его, если вы хотите углубиться в искусство создания пользовательских веб-API, доступных практически для любого устройства или платформы разработки.

Приложение A. Использование фрагментов кода

При использовании фрагментов кода у вас есть весь код, который вам нужен на пальцах. В документе лаборатории вы узнаете, когда их можно использовать, как показано на следующем рисунке.

Использование фрагментов кода Visual Studio для вставки кода в проект

Использование фрагментов кода Visual Studio для вставки кода в проект

Добавление фрагмента кода с помощью клавиатуры (только для C#)

Поместите курсор, в который вы хотите вставить код.
Начните вводить имя фрагмента кода (без пробелов или дефисов).
Посмотрите, как IntelliSense отображает соответствующие имена фрагментов.
Выберите правильный фрагмент кода (или продолжайте вводить текст до тех пор, пока не будет выбрано имя всего фрагмента кода).
Дважды нажмите клавишу TAB, чтобы вставить фрагмент в расположение курсора.

Начните вводить имя фрагмента кода

Нажмите клавишу TAB, чтобы выбрать выделенный фрагмент кода

Нажмите клавишу TAB еще раз, и фрагмент будет развернут

Добавление фрагмента кода с помощью мыши (C#, Visual Basic и XML)

Щелкните правой кнопкой мыши место вставки фрагмента кода.
Выберите " Вставить фрагмент кода" , за которым следует фрагменты кода.
Выберите соответствующий фрагмент из списка, щелкнув его.

Щелкните правой кнопкой мыши место вставки фрагмента кода и выберите "Вставить фрагмент кода"

Выберите соответствующий фрагмент из списка, щелкнув его

Приложение B. Установка Visual Studio Express 2012 для Интернета

Вы можете установить Microsoft Visual Studio Express 2012 для Интернета или другой версии Express с помощью установщика веб-платформа Майкрософт. Ниже приведены инструкции по установке Visual Studio Express 2012 для Интернета с помощью установщика веб-платформа Майкрософт.

Перейдите в раздел [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Кроме того, если вы уже установили установщик веб-платформы, его можно открыть и найти в продукте Visual Studio Express 2012 для Интернета с помощью пакета SDK Для Azure.
Нажмите кнопку "Установить сейчас". Если у вас нет установщика веб-платформы, вы будете перенаправлены, чтобы скачать и установить его сначала.
После открытия установщика веб-платформы нажмите кнопку "Установить ", чтобы запустить настройку.

Установка Visual Studio Express
Прочитайте все лицензии и условия продуктов и нажмите кнопку "Принять ", чтобы продолжить.

Принятие условий лицензии
Дождитесь завершения процесса загрузки и установки.

Ход установки
После завершения установки нажмите кнопку "Готово".

Завершена установка
Нажмите кнопку " Выйти" , чтобы закрыть установщик веб-платформы.
Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните писать "VS Express", а затем щелкните элемент VS Express для веб-страницы.

Плитка VS Express для веб-сайта

Приложение C. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания

В этом приложении показано, как создать веб-сайт на портале Azure и опубликовать приложение, полученное после лаборатории, используя функцию публикации веб-развертывания, предоставляемую Azure.

Задача 1. Создание веб-сайта на портале Azure

Перейдите на портал управления Azure и войдите с помощью учетных данных Майкрософт, связанных с подпиской.

Примечание.

С помощью Azure можно разместить 10 ASP.NET веб-сайты бесплатно, а затем масштабировать по мере роста трафика. Вы можете зарегистрироваться здесь.

Вход на портал
Нажмите кнопку "Создать" на панели команд.

Создание нового веб-сайта
Щелкните "Вычислительный | веб-сайт". Затем нажмите кнопку быстрого создания . Укажите доступный URL-адрес для нового веб-сайта и нажмите кнопку "Создать веб-сайт".

Примечание.

Azure — это узел веб-приложения, работающего в облаке, который можно управлять ими. Параметр быстрого создания позволяет развернуть завершенное веб-приложение в Azure за пределами портала. Он не включает шаги по настройке базы данных.

Создание нового веб-сайта с помощью быстрого создания
Дождитесь создания нового веб-сайта .
После создания веб-сайта щелкните ссылку в столбце URL-адреса . Убедитесь, что новый веб-сайт работает.

Просмотр нового веб-сайта

Запущенный веб-сайт
Вернитесь на портал и щелкните имя веб-сайта в столбце "Имя ", чтобы отобразить страницы управления.

Открытие страниц управления веб-сайтами
На странице "Панель мониторинга" в разделе быстрого просмотра щелкните ссылку "Скачать профиль публикации".

Примечание.

Профиль публикации содержит все сведения, необходимые для публикации веб-приложения в Azure для каждого включенного метода публикации. Профиль публикации содержит URL-адреса, учетные данные пользователя и строки базы данных, необходимые для подключения к каждой конечной точке, для которой включен метод публикации. Microsoft WebMatrix 2, Microsoft Visual Studio Express для Web и Microsoft Visual Studio 2012 поддерживают чтение профилей публикации для автоматизации настройки этих программ для публикации веб-приложений в Azure.

Скачивание профиля публикации веб-сайта
Скачайте файл профиля публикации в известное расположение. Далее в этом упражнении вы узнаете, как использовать этот файл для публикации веб-приложения в Azure из Visual Studio.

Сохранение файла профиля публикации

Задача 2. Настройка сервера базы данных

Если приложение использует базы данных SQL Server, вам потребуется создать сервер База данных SQL. Если вы хотите развернуть простое приложение, которое не использует SQL Server, может пропустить эту задачу.

Для хранения базы данных приложения потребуется сервер База данных SQL. Вы можете просмотреть серверы База данных SQL из подписки на портале управления Azure на панели мониторинга Сервера баз данных | Sql Server | . Если у вас нет сервера, его можно создать с помощью кнопки "Добавить " на панели команд. Запишите имя сервера и URL-адрес, имя входа администратора и пароль, так как они будут использоваться в следующих задачах. Пока не создайте базу данных, так как она будет создана на более позднем этапе.

панель мониторинга сервера База данных SQL
В следующей задаче вы протестируете подключение к базе данных из Visual Studio, по этой причине необходимо включить локальный IP-адрес в список разрешенных IP-адресов сервера. Для этого нажмите кнопку "Настроить", выберите IP-адрес из текущего IP-адреса клиента и вставьте его в текстовые поля "Начальный IP-адрес" и "Конечный IP-адрес".

Добавление IP-адреса клиента
После добавления IP-адреса клиента в список разрешенных IP-адресов нажмите кнопку "Сохранить", чтобы подтвердить изменения.

Подтверждение изменений

Задача 3. Публикация приложения MVC 4 ASP.NET с помощью веб-развертывания

Вернитесь к решению MVC 4 ASP.NET. В Обозреватель решений щелкните правой кнопкой мыши проект веб-сайта и выберите "Опубликовать".

Публикация веб-сайта
Импортируйте профиль публикации, сохраненный в первой задаче.

Импорт профиля публикации
Нажмите кнопку "Проверить подключение". После завершения проверки нажмите кнопку "Далее".

Примечание.

После завершения проверки появится зеленая галочка рядом с кнопкой "Проверить подключение".

Проверка подключения
На странице "Параметры" в разделе "Базы данных" нажмите кнопку рядом с текстовым полем подключения к базе данных (т. е. DefaultConnection).

Конфигурация веб-развертывания
Настройте подключение к базе данных следующим образом:
- В поле "Имя сервера" введите URL-адрес сервера База данных SQL с помощью префикса TCP.
- В поле "Имя пользователя" введите имя входа администратора сервера.
- Введите пароль для входа администратора сервера.
- Введите новое имя базы данных, например MVC4SampleDB.
  
  Настройка конечного строка подключения
Затем нажмите кнопку ОК. При появлении запроса на создание базы данных нажмите кнопку "Да".

Создание базы данных
Строка подключения, который будет использоваться для подключения к База данных SQL в Windows Azure, отображается в текстовом поле "Подключение по умолчанию". Затем нажмите Далее.

Строка подключения, указывающая на База данных SQL
На странице предварительного просмотра нажмите кнопку "Опубликовать".

Публикация веб-приложения
После завершения процесса публикации браузер по умолчанию откроет опубликованный веб-сайт.

Приложение, опубликованное в Azure