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는 web Api는.NET Framework를 빌드하기 위한 프레임 워크입니다.ASP.NET Web API is a framework for building web APIs on top of the .NET Framework. 이 자습서에서는 제품의 목록을 반환 하는 web 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 및 Windows에 대 한 Visual Studio를 사용 하 여 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

이 자습서에서는 제품의 목록을 반환 하는 web 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. 아래 "폴더를 추가 하 고에 대 한 참조를 핵심", 확인 Web API합니다.Under "Add folders and core references for", check Web API. 확인을 클릭합니다.Click OK.

참고

사용 하 여 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 사용 하지 않고 웹 API를 표시 하려고 하기 때문에 빈 템플릿에이 자습서에 사용 합니다.I'm using the Empty template for this tutorial because I want to show Web API without MVC. 일반적으로 ASP.NET MVC로 웹 API를 사용 하 여 알 필요가 없습니다.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 형식을 읽을 수 있습니다,으로 개체를 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.

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

참고

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.

스 캐 폴딩을 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! Web 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를 사용한 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. AJAX 호출을 수행 하 고 결과 사용 하 여 페이지를 업데이트 하려면 jQuery를 사용 하겠습니다.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 요청을 보낼 "/a p i/제품/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. 예를 들어를 클릭 하면 합니다 요청 헤더 탭에는 클라이언트 요청을 볼 수 있습니다 "application/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 구독자 혜택을 활성화 -MSDN 구독은 크레딧을 매달 제공 유료 Azure 서비스에 사용할 수 있는 합니다.Activate MSDN subscriber benefits - Your MSDN subscription gives you credits every month that you can use for paid Azure services.

다음 단계Next Steps