ASP.NET Web API 2 (C#) 시작Get Started with ASP.NET Web API 2 (C#)

으로 Mike Wassonby Mike Wasson

완료 된 프로젝트를 다운로드 합니다.Download Completed Project

HTTP 웹 페이지를 제공 데 사용 되지 않습니다.HTTP is not just for serving up web pages. HTTP은 서비스 및 데이터를 노출 하는 Api를 구축 하기 위한 강력한 플랫폼 이기도 합니다.HTTP is also a powerful platform for building APIs that expose services and data. HTTP 쉽고 유연 하 고, 어디서 나 쉽게는입니다.HTTP is simple, flexible, and ubiquitous. 상상할 수 있는 거의 모든 플랫폼에는 HTTP 라이브러리를 HTTP 서비스에는 다양 한 브라우저, 모바일 장치 및 기존 데스크톱 응용 프로그램을 포함 한 클라이언트를 연결할 수 있으므로 합니다.Almost any platform that you can think of has an HTTP library, so HTTP services can reach a broad range of clients, including browsers, mobile devices, and traditional desktop applications.

ASP.NET Web API는 웹 Api는.NET Framework를 기반으로 구축 하기 위한 프레임 워크.ASP.NET Web API is a framework for building web APIs on top of the .NET Framework. 이 자습서에서는 웹 제품 목록을 반환 하는 API를 만드는 데 ASP.NET Web API를 사용 합니다.In this tutorial, you will use ASP.NET Web API to create a web API that returns a list of products.

자습서에서 사용 되는 소프트웨어 버전Software versions used in the tutorial

참조 ASP.NET Core와 Visual Studio for Windows는 web API를 만드는 이 자습서의 최신 버전에 대 한 합니다.See Create a web API with ASP.NET Core and Visual Studio for Windows for a newer version of this tutorial.

웹 API 프로젝트 만들기Create a Web API Project

이 자습서에서는 웹 제품 목록을 반환 하는 API를 만드는 데 ASP.NET Web API를 사용 합니다.In this tutorial, you will use ASP.NET Web API to create a web API that returns a list of products. 프런트 엔드 웹 페이지 jQuery를 사용 하 여 결과 표시 합니다.The front-end web page uses jQuery to display the results.

Visual Studio를 시작 하 고 선택 새 프로젝트 에서 시작 페이지.Start Visual Studio and select New Project from the Start page. 또는에서 파일 메뉴 선택 새로 차례로 프로젝트합니다.Or, from the File menu, select New and then Project.

템플릿 창 선택 설치 된 템플릿 확장는 Visual C# 노드.In the Templates pane, select Installed Templates and expand the Visual C# node. 아래 **Visual C#**선택, 합니다.Under Visual C#, select Web. 프로젝트 템플릿 목록에서 선택 ASP.NET 웹 응용 프로그램합니다.In the list of project templates, select ASP.NET Web Application. "ProductsApp" 프로젝트 이름을 지정 하 고 클릭 확인합니다.Name the project "ProductsApp" and click OK.

새 ASP.NET 프로젝트 대화 상자에서는 서식 파일입니다.In the New ASP.NET Project dialog, select the Empty template. 아래 "폴더 추가 및에 대 한 참조를 핵심", 확인 웹 API합니다.Under "Add folders and core references for", check Web API. 확인을 클릭합니다.Click OK.

참고

사용 하 여 웹 API 프로젝트를 만들 수도 있습니다는 "웹 API" 템플릿.You can also create a Web API project using the "Web API" template. 웹 API 템플릿은 ASP.NET MVC를 사용 하 여 API 도움말 페이지를 제공 하기.The Web API template uses ASP.NET MVC to provide API help pages. MVC 없이 웹 API를 표시 하려는 때문에이 자습서에 빈 템플릿을 사용 합니다.I'm using the Empty template for this tutorial because I want to show Web API without MVC. 일반적으로 웹 API를 사용 하는 ASP.NET MVC 알 필요가 없습니다.In general, you don't need to know ASP.NET MVC to use Web API.

모델 추가Adding a Model

모델은 응용 프로그램에서 데이터를 나타내는 개체입니다.A model is an object that represents the data in your application. ASP.NET Web API 자동으로 JSON, XML, 또는 다른 형식으로 모델을 직렬화 하 고 HTTP 응답 메시지의 본문에 serialize 된 데이터를 쓸 수 있습니다.ASP.NET Web API can automatically serialize your model to JSON, XML, or some other format, and then write the serialized data into the body of the HTTP response message. 클라이언트에는 serialization 형식을 읽을 수,으로 개체를 역직렬화 할 수 있습니다.As long as a client can read the serialization format, it can deserialize the object. 대부분의 클라이언트에는 XML 또는 JSON 구문 분석할 수 있습니다.Most clients can parse either XML or JSON. 또한 클라이언트는 HTTP 요청 메시지의 Accept 헤더를 설정 하 여 원하는 어떤 형식을 나타낼 수 있습니다.Moreover, the client can indicate which format it wants by setting the Accept header in the HTTP request message.

제품을 나타내는 간단한 모델을 만들어 보겠습니다.Let's start by creating a simple model that represents a product.

솔루션 탐색기 표시 되지 않는 경우 클릭는 보기 메뉴와 선택 솔루션 탐색기합니다.If Solution Explorer is not already visible, click the View menu and select Solution Explorer. 솔루션 탐색기에서 모델 폴더를 마우스 오른쪽 단추로 클릭 합니다.In Solution Explorer, right-click the Models folder. 상황에 맞는 메뉴에서 선택 추가 다음 선택 클래스합니다.From the context menu, select Add then select Class.

클래스의 이름을 "제품"합니다.Name the class "Product". 다음 속성을 추가 Product 클래스입니다.Add the following properties to the Product class.

namespace ProductsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

컨트롤러 추가Adding a Controller

웹 API에는 컨트롤러 는 HTTP 요청을 처리 하는 개체입니다.In Web API, a controller is an object that handles HTTP requests. 제품 목록 또는 ID로 지정 된 단일 제품 중 하나를 반환할 수 있는 컨트롤러 추가We'll add a controller that can return either a list of products or a single product specified by ID.

참고

ASP.NET MVC를 사용한 경우 이미 잘 알고 있다면 컨트롤러입니다.If you have used ASP.NET MVC, you are already familiar with controllers. Web API 컨트롤러 MVC 컨트롤러 유사 하지만 상속 된 ApiController 클래스 대신는 컨트롤러 클래스입니다.Web API controllers are similar to MVC controllers, but inherit the ApiController class instead of the Controller class.

솔루션 탐색기, Controllers 폴더를 마우스 오른쪽 단추로 클릭 합니다.In Solution Explorer, right-click the Controllers folder. 선택 추가 선택한 후 컨트롤러합니다.Select Add and then select Controller.

추가 스 캐 폴드 대화 상자에서 웹 API 컨트롤러-비어 있지합니다.In the Add Scaffold dialog, select Web API Controller - Empty. 추가를 클릭합니다.Click Add.

컨트롤러 추가 대화 상자에서 컨트롤러 이름 "ProductsController"합니다.In the Add Controller dialog, name the controller "ProductsController". 추가를 클릭합니다.Click Add.

스 캐 폴딩을 ProductsController.cs Controllers 폴더의 명명 된 파일을 만듭니다.The scaffolding creates a file named ProductsController.cs in the Controllers folder.

참고

컨트롤러에 컨트롤러 이라는 폴더에 넣이 필요가 없습니다.You don't need to put your controllers into a folder named Controllers. 폴더 이름은 원본 파일을 구성 하는 편리한 방법인을입니다.The folder name is just a convenient way to organize your source files.

이 파일이 열려 있지 않으면 이미 열려는 파일을 두 번 클릭 합니다.If this file is not open already, double-click the file to open it. 이 파일에 코드를 다음으로 바꿉니다.Replace the code in this file with the following:

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };

        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

예를 간단히 유지 하기 위해 제품 컨트롤러 클래스의 내부 고정된 배열에 저장 됩니다.To keep the example simple, products are stored in a fixed array inside the controller class. 물론, 실제 응용 프로그램에서 데이터베이스를 쿼리 또는 다른 외부 데이터 소스를 사용 하 여가 있습니다.Of course, in a real application, you would query a database or use some other external data source.

컨트롤러는 제품을 반환 하는 두 개의 메서드를 정의 합니다.The controller defines two methods that return products:

  • GetAllProducts 메서드로 제품의 전체 목록을 반환는 IEnumerable<제품> 유형입니다.The GetAllProducts method returns the entire list of products as an IEnumerable<Product> type.
  • GetProduct 단일 제품의 id를 조회 메서드The GetProduct method looks up a single product by its ID.

정말 간단하죠.That's it! 작업 중인 웹 API 해야합니다.You have a working web API. 컨트롤러의 각 메서드에 하나 이상의 Uri에 해당합니다.Each method on the controller corresponds to one or more URIs:

컨트롤러 메서드Controller Method URIURI
GetAllProductsGetAllProducts / api/제품/api/products
GetProductGetProduct /api/products/id/api/products/id

에 대 한는 GetProduct 메서드는 id URI에 자리 표시자입니다.For the GetProduct method, the id in the URI is a placeholder. 예를 들어 ID 5 인 제품을 가져오려면 URI는 api/products/5합니다.For example, to get the product with ID of 5, the URI is api/products/5.

Web API 컨트롤러 메서드를 HTTP 요청을 라우팅하 하는 방법에 대 한 자세한 내용은 참조 ASP.NET Web API에서 라우팅합니다.For more information about how Web API routes HTTP requests to controller methods, see Routing in ASP.NET Web API.

Javascript 및 jQuery를 사용 하 여 웹 API를 호출합니다.Calling the Web API with Javascript and jQuery

이 섹션에서는 AJAX를 사용 하 여 web API를 호출 하는 HTML 페이지를 추가 합니다.In this section, we'll add an HTML page that uses AJAX to call the web API. JQuery AJAX 호출을 수행 하 고 결과 페이지를 업데이트 하려면 사용 합니다.We'll use jQuery to make the AJAX calls and also to update the page with the results.

솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 선택 추가을 선택한 후 새 항목합니다.In Solution Explorer, right-click the project and select Add, then select New Item.

새 항목 추가 대화 상자에서는 노드 아래의 **Visual C#**를 선택한 후는 HTML 페이지 항목입니다.In the Add New Item dialog, select the Web node under Visual C#, and then select the HTML Page item. 페이지 이름을 "index.html"합니다.Name the page "index.html".

이 파일의 모든 개체를 다음과 같이 바꿉니다.Replace everything in this file with the following:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Product App</title>
</head>
<body>

  <div>
    <h2>All Products</h2>
    <ul id="products" />
  </div>
  <div>
    <h2>Search by ID</h2>
    <input type="text" id="prodId" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
  </div>

  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  <script>
    var uri = 'api/products';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });

    function formatItem(item) {
      return item.Name + ': $' + item.Price;
    }

    function find() {
      var id = $('#prodId').val();
      $.getJSON(uri + '/' + id)
          .done(function (data) {
            $('#product').text(formatItem(data));
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
          });
    }
  </script>
</body>
</html>

여러 가지 방법으로 jQuery를 가져올 수 있습니다.There are several ways to get jQuery. 이 예에서 사용 된 Microsoft Ajax CDN합니다.In this example, I used the Microsoft Ajax CDN. 다운로드할 수도 있습니다 http://jquery.com/ , 및 "웹 API" ASP.NET 프로젝트 템플릿에 jQuery도 포함 됩니다.You can also download it from http://jquery.com/, and the ASP.NET "Web API" project template includes jQuery as well.

제품 목록 가져오기Getting a List of Products

제품 목록이 받으려면 다음으로 HTTP GET 요청을 보내 "/api/제품"합니다.To get a list of products, send an HTTP GET request to "/api/products".

JQuery getJSON 함수 AJAX 요청을 보냅니다.The jQuery getJSON function sends an AJAX request. 응답에 대 한 JSON 개체 배열을 포함합니다.For response contains array of JSON objects. done 함수 요청이 성공 하면 호출 되는 콜백을 지정 합니다.The done function specifies a callback that is called if the request succeeds. 콜백에서 제품 정보 DOM 업데이트 됩니다.In the callback, we update the DOM with the product information.

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

ID 별로 제품 가져오기Getting a Product By ID

ID 별로 제품을 받으려면 다음으로 HTTP GET 요청을 보내 "/api/제품/id"여기서 id 제품 ID입니다.To get a product by ID, send an HTTP GET request to "/api/products/id", where id is the product ID.

function find() {
    var id = $('#prodId').val();
    $.getJSON(apiUrl + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}

여전히 호출 getJSON AJAX 요청 하지만이 이번에 보내도록 요청 URI의에서 ID 입력 합니다.We still call getJSON to send the AJAX request, but this time we put the ID in the request URI. 이 요청은 응답에는 단일 제품의 JSON 표현입니다.The response from this request is a JSON representation of a single product.

응용 프로그램 실행Running the Application

F5 키를 눌러 응용 프로그램 디버깅을 시작 합니다.Press F5 to start debugging the application. 웹 페이지는 다음과 같이 표시 됩니다.The web page should look like the following:

제품 id를 얻으려면 ID를 입력 하 고 선택은 취소:To get a product by ID, enter the ID and click Search:

잘못 된 ID를 입력 하면 서버에서 HTTP 오류를 반환 합니다.If you enter an invalid ID, the server returns an HTTP error:

F12 키를 사용 하 여 HTTP 요청 및 응답을 보려면Using F12 to View the HTTP Request and Response

HTTP 서비스를 사용 하는 경우에 HTTP 요청을 보고 요청 메시지에 매우 유용할 수 있습니다.When you are working with an HTTP service, it can be very useful to see the HTTP request and request messages. Internet Explorer 9의 F12 개발자 도구를 사용 하 여이 수행할 수 있습니다.You can do this by using the F12 developer tools in Internet Explorer 9. Internet Explorer 9에서 누릅니다 F12 는 도구를 엽니다.From Internet Explorer 9, press F12 to open the tools. 클릭는 네트워크 탭 및 키를 눌러 캡처 시작합니다.Click the Network tab and press Start Capturing. 웹 페이지 및 키를 눌러로 돌아가서 이제 F5 웹 페이지를 다시 로드 합니다.Now go back to the web page and press F5 to reload the web page. Internet Explorer 브라우저와 웹 서버 사이의 HTTP 트래픽을 캡처합니다.Internet Explorer will capture the HTTP traffic between the browser and the web server. 요약 보기에는 페이지에 대 한 모든 네트워크 트래픽을 표시합니다.The summary view shows all the network traffic for a page:

상대 URI에 대 한 항목을 찾습니다 "api/제품 /"입니다.Locate the entry for the relative URI "api/products/". 이 항목을 선택 하 고 클릭 자세히 보기로 이동합니다.Select this entry and click Go to detailed view. 세부 정보 뷰에서 요청 및 응답 헤더 및 본문을 보려면 탭이 있습니다.In the detail view, there are tabs to view the request and response headers and bodies. 예를 들어, 클릭는 요청 헤더 탭에서 클라이언트 요청 됨을 확인할 수 있습니다 "응용 프로그램/json" Accept 헤더에 있습니다.For example, if you click the Request headers tab, you can see that the client requested "application/json" in the Accept header.

응답 본문 탭을 클릭 하면 JSON으로 제품 목록을 serialize 하는 방법을 확인할 수 있습니다.If you click the Response body tab, you can see how the product list was serialized to JSON. 다른 브라우저에 비슷한 기능이 있습니다.Other browsers have similar functionality. 또 다른 유용한 도구는 Fiddler, 웹 디버깅 프록시입니다.Another useful tool is Fiddler, a web debugging proxy. 사용할 수 있습니다 Fiddler HTTP 트래픽을 볼 수 및 HTTP 요청을 작성 하 요청에 HTTP 헤더에 대 한 모든 권한을 제공.You can use Fiddler to view your HTTP traffic, and also to compose HTTP requests, which gives you full control over the HTTP headers in the request.

Azure에서 실행 되는이 응용 프로그램 참조See this App Running on Azure

실시간 웹 앱으로 실행 하는 완료 된 사이트를 참조 하 시겠습니까?Would you like to see the finished site running as a live web app? 다음 단추 클릭 하 여 Azure 계정에 완전 한 버전의 앱을 배포할 수 있습니다.You can deploy a complete version of the app to your Azure account by simply clicking the following button.

Azure에이 솔루션을 배포 하려면 Azure 계정이 필요 합니다.You need an Azure account to deploy this solution to Azure. 계정이 아직 없는 경우 다음 옵션:If you do not already have an account, you have the following options:

  • 무료 Azure 계정을 개설 -크레딧을 얻게 유료 Azure 서비스를 실행 해 사용할 수 있으며, 사용 후에 최대 계정 등에 사용 가능한 Azure 서비스입니다.Open an Azure account for free - You get credits you can use to try out paid Azure services, and even after they're used up you can keep the account and use free Azure services.
  • MSDN 구독자 혜택을 활성화 -Your MSDN을 구독 하면 크레딧 매달 유료 Azure 서비스에 사용할 수 있습니다.Activate MSDN subscriber benefits - Your MSDN subscription gives you credits every month that you can use for paid Azure services.

다음 단계Next Steps