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

Mike Wassonby Mike Wasson

완료 된 프로젝트 다운로드Download Completed Project

이 자습서에서는 ASP.NET Web API를 사용 하 여 제품 목록을 반환 하는 Web API를 만듭니다.In this tutorial, you will use ASP.NET Web API to create a web API that returns a list of products.

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은 .NET Framework을 기반으로 웹 Api를 빌드하기 위한 프레임 워크입니다.ASP.NET Web API is a framework for building web APIs on top of the .NET Framework.

자습서에서 사용 되는 소프트웨어 버전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

이 자습서에서는 ASP.NET Web API를 사용 하 여 제품 목록을 반환 하는 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.

템플릿 창에서 설치 된 템플릿 을 선택 하 고 C# 시각적 노드를 확장 합니다.In the Templates pane, select Installed Templates and expand the Visual C# node. 시각적 개체 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. "에 대 한 "폴더 및 핵심 참조 추가에서 WEB API를 선택 합니다.Under "Add folders and core references for", check Web API. 확인을 클릭합니다.Click OK.

Note

"Web API" 템플릿을 사용 하 여 Web API 프로젝트를 만들 수도 있습니다.You can also create a Web API project using the "Web API" template. Web API 템플릿에서는 ASP.NET MVC를 사용 하 여 API 도움말 페이지를 제공 합니다.The Web API template uses ASP.NET MVC to provide API help pages. MVC 없이 Web API를 표시 하려고 하기 때문에이 자습서에 빈 템플릿을 사용 합니다.I'm using the Empty template for this tutorial because I want to show Web API without MVC. 일반적으로 Web 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. JSON, XML 또는 다른 형식으로 모델을 자동으로 serialize 한 다음, serialize 된 데이터를 HTTP 응답 메시지의 본문에 쓸 ASP.NET Web API 있습니다.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 형식을 읽을 수 있으면 개체를 deserialize 할 수 있습니다.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. 솔루션 탐색기에서 Models 폴더를 마우스 오른쪽 단추로 클릭합니다.In Solution Explorer, right-click the Models folder. 상황에 맞는 메뉴에서 추가를 선택한 다음 클래스를 선택합니다.From the context menu, select Add then select Class.

클래스 이름을 Product""합니다.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

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

Note

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.

스캐폴드 추가 대화 상자에서 Web 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.

스 캐 폴딩은 Controllers 폴더에 ProductsController.cs 라는 파일을 만듭니다.The scaffolding creates a file named ProductsController.cs in the Controllers folder.

Note

컨트롤러를 컨트롤러 라는 폴더에 배치할 필요가 없습니다.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<Product> 형식으로 반환 합니다.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 메서드Controller Method URIURI
GetAllProductsGetAllProducts /api/제품/api/products
GetProductGetProduct /api/products/id/api/products/id

GetProduct 메서드의 경우 URI의 id 는 자리 표시자입니다.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.

웹 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를 사용 하 여 Web 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.

새 항목 추가 대화 상자에서 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/에서 다운로드할 수 있으며, ASP.NET "Web API" 프로젝트 템플릿에는 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/products"보냅니다.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 개체의 배열이 포함 되어 있습니다.The 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/products/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);
        });
}

AJAX 요청을 보내기 위해 getJSON를 호출 하지만 이번에는 요청 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 response 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/products/" 항목을 찾습니다.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. 예를 들어 요청 헤더 탭을 클릭 하면 클라이언트가 Accept 헤더에 "application/json" 요청한 것을 확인할 수 있습니다.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 구독자 혜택 활성화 -msdn 구독은 유료 Azure 서비스에 사용할 수 있는 크레딧을 매달 제공 합니다.Activate MSDN subscriber benefits - Your MSDN subscription gives you credits every month that you can use for paid Azure services.

다음 단계Next Steps