'분류 전체보기' 카테고리의 글 목록 (210 Page)

분류 전체보기

[ASP.NET] ASP.NET Web API 2 로 시작하기 (C#) 2017.09.11

[ASP.NET] ASP.NET Web API 2 로 시작하기 (C#)

2017. 9. 11. 21:00

다음 글을 한글로 바꾸었습니다.

Getting Started with ASP.NET Web API 2 (C#)

많이 부족합니다. 참고만 하셔요 ~ ^^

ASP.NET Web API 2 로 시작하기 (C#)

by Mike Wasson

Download Completed Project

HTTP 는 단순히 web Page 만을 serving 하기 위한 프로토콜이 아닙니다. 서비스와 데이터를 노출하기 위한 API 를 구축하는데 강력한 Platform 이기도 합니다.

HTTP 는 간단하고 유연하며 Ubiquitous 합니다. 머리에 떠오르는 거의 모든 Platform 에는 HTTP Library 를 포함하고 있으므로 HTTP Service 는 브라우져를 포함한 모바일 기기, 전통적인 데스크탑 어플리케이션에 이르기 까지 광범위한 클라이언트까지 연결할 수 있습니다.

ASP.NET Web API 는 .NET Framework 기반위에 Web API 를 구축하기 위한 Framework 입니다., 이 Tutorial 에서는 ASP.NET Web API 를 사용하여 Product 목록을 반환하는 Web API 를 생성합니다.

이 Tutorial 에서 사용 된 Software Version

Visual Studio 2017

Web API 2

Web API Project 생성하기

이 Tutorial 에서 ASP.NET Web API 를 사용하여 Product 목록을 반환하는 Web API를 생성합니다.

Front-end web page 는 jQuery 를 사용하여 결과를 표시합니다.

Visual Studio 를 시작하고 Start Page 에서 New Project 를 선택합니다. 또는 File Menu 에서 New 를 선택하고 Project 를 선택합니다.

Template 창에서 설치된 Templates 를 선택하고 Visual C# Node 롤 확장합니다. Visual C# 아래에 Web 을 선택합니다. Project Template 목록에서 ASP.NET Web Application 을 선택합니다. Project Name 에 "ProductsApp" 을 입력하고 OK 를 클릭합니다.

새 ASP.NET Project 대화상자에서 Empty template(빈 템플릿)을 선택합니다.

"Add folders and core reference for"("폴더 및 핵심 참조 추가") 하단의 Web API 를 Check 하고 OK 를 클릭합니다.

[!주목] "Web API" Template 을 사용하여 Web API Project 를 생성할 수도 있습니다.. Web API template 는 ASP.NET MVC 를 사용하여 API Help Page 를 제공합니다. MVC 없이 Web API 를 작성하는 모습을 보여주기 위해 Empty template 을 사용합니다. 일반적으로 Web API 를 사용하기위해 ASP.NET MVC 를 알필요는 없습니다.

Model 추가하기

Model 은 application 에서 Data 를 표현하는 객체입니다. ASP.NET Web API 는 model 을 JSON, XML 또는 다른 형식으로 자동적으로 직렬화해줍니다. 그리고 직렬화된 data를 HTTP Response Message 의 Body 를 작성합니다. Client 가 직렬화된 형식을 읽을 수 있다면 Object 를 Deserialize 할 수 있습니다. 대부분의 Client 들은 XML 이나 JSON 을 Parsing 할 수 있습니다. 게다가 HTTP request Message 의 Accept header 를 설정하여 원하는 format을 표시하는 것도 가능합니다.

그럼, Product 를 나타내는 간단한 Model 을 생성하는 것 부터 시작해 봅시다.

Solution Explorer 가 아직 보이지 않는다면, View Menu를 클릭하여 Solution Explorer 를 선택하십시오.

Models 폴더를 마우스 오른쪽 버튼으로 클릭합니다. 나타난 Context Menu 에서 Add 를 선택하고 Class 를 선택합니다.

Class Name 으로 "Product"를 지정합니다. Product Class 에 다음 Properties 를 추가합니다.

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

Controller 추가하기

Web API 에서 Controller 는 HTTP Request 를 처리하는 객체입니다. 이제 Product 목록 이나 지정한 ID 의 단일 Product 정보를 반환하는 Controller 를 추가합니다.

[!주목] ASP.NET MVC 를 사용해 본적이 있다면 이미 controller 에 익숙할 것입니다. Web API Controller 는 MVC Controller와 유사하지만 Controller class 대신에 ApiController Class 를 상속합니다.

Solution Explorer 에서 Controller folder 를 마우스 오른쪽 버튼을 이용하여 클릭합니다. Add 를 선택한 후 Controller 를 선택합니다.

Add Scaffold 대화상자에서 Web API Controller - Empty 를 선택합니다. Add 를 클릭합니다.

Add Controller 대화상자에서 Controller 이름을 ProductsController 로 지정합니다. Add 를 클릭합니다.

Scaffolding 은 Controller folder 에 ProductsController.cs 라는 이름의 파일을 생성합니다.

[!주목]Controller 파일들을 Controllers 라는 이름의 folder 에 넣지 않아도 됩니다. Folder 이름은 단지 Source 파일들을 구성하기위한 편리한 방법중 하나입니다.

파일이 아직 열려있지 않다면, 파일을 더블클릭하여 엽니다. 열린 파일의 코드를 다음의 코드로 대체합니다.

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

예제를 단순하게 유지하기 위해서 Products 는 Controller Class 내부에 고정된 배열로 저장되어 있습니다. 물론 실제 application 에서는 database 나 다른 외부의 data source 로 부터 Query 하여 사용합니다.

Controller 에서는 Product 를 반환하는 두가지 Method 를 정의합니다.

GetAllProducts Method 는 Ienumerable<Product> 형식의 Product 전체 목록을 반환합니다.
GetProduct Method 는 ID 로 단일 Product 를 조회합니다.

작동하는 Web API 는 이게 다입니다. Controller 의 각 Method 는 하나 이상의 URL 과 일치합니다 :

Controller Method	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

GetProduct Method URL 의 id 는 placeholder 입니다. 얘룰 둘어 ID 가 5인 product 를 조회하는 URL 는 api/products/5.입니다.

Web API 가 HTTP request 를 Controller method 로 Route하는 방법에 대해서는 Routing in ASP.NET Web API 를 참조하십시오.

javascript 와 jQuery 로 web API 호출하기.

이번에는 Web API 를 호출하기위해 AJAX 를 사용하는 HTML page 를 추가합니다. AJAX 호출을 만들고 반환된 결과로 Page 를 Update 하기 위해서 jQuery 를 사용합니다.

솔루션 탐색기에서 Project를 오른쪽 마우스 버튼을 클릭하여 Add 를 선택하고 New Item 을 선택합니다.

New Item 대화상자에서 Visual C# 에 포함된 Web node 를 선택하고 HTML Page item 을 선택합니다. Page 의 이름은 "Index.html" 으로 지정합니다.

이 파일의 모든 내용을 다름 내용으로 바꿉니다 :

<!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="http://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 를 가져오는 방법에는 몇가지방법이 있습니다. 이 예제에서는 Microsoft Ajax CDN 을 사용했습니다. http://jquery.com/ 에서도 다운로드 받을수 있으며, ASP.NET "Web API" project template 에도 jQuery 가 포함되어 있습니다.

Product 목록 가져오기

product 목록을 조회해오기 위해서 "/api/products" 로 HTTP GET Request 를 보냅니다.

jQuery getJSON function 은 AJAX request 를 보냅니다. response 에는 JSON 객체의 배열이 포함되어 있습니다. done function 은 request 가 성공했을 때 호출될 callback 을 지정합니다. callback 에서 product 정보를 가지고 DOM 을 update 합니다.

$(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 로 Product 정보 가져오기

ID 로 Product 정보를 가져오기 위해서는 "/api/products/id" 로 HTTP GET request 를 보냅니다. 여기서 id 는 Product ID 입니다.

AJAX request 를 보내기 위해 이전과 동일하게 getJSON 을 호출합니다. 하지만 이번에는 request URI 에 ID 를 포함시킵니다. 이 request 로 부터 전달된 response 는 단일 Product 로 표현된 JSON 입니다.

Application 실행하기

F5 를 눌러 application debugging 을 시작합니다. 다음과 같이 web page 가 보여야 합니다 :

ID 로 Project 를 조회하기 위해서는 ID 를 입력하고 Search 버튼을 클릭합니다.

유효하지 않은 ID 를 입력하면 server 는 HTTP 오류를 반환합니다.

F12 를 사용하여 HTTP Request 와 Response 내용 보기

HTTP Service 를 이용하는 작업을 할 때 HTTP Request 와 Response Message 를 확인하는 것은 매우 유용합니다. Internet Explorer 9의 F12 개발자도구를 사용하면 이 작업이 가능하다. Internet Explorer 9 에서 F12를 툴러 도구를 엽니다. Network Tab 을 클릭하고 Start Capturing 을 누릅니다. 이제 Web page 로 돌아가서 F5를 눌러 Web page 를 새로고침합니다. Internet Explorer 는 browser 와 web server 간의 traffic 을 capture 합니다. summery page 는 page 에서 일어난 모든 network traffic 을 보여줍니다.

상대경로 URI 중에서 "api/products/" 항목을 찾으십시요. 이 항목을 선택하고 Go to detail view 를 클릭합니다. 상세 View 에 request 와 response 의 header 와 body 를 볼 수 있는 tab 이 있습니다. 예를 들어, Request headers Tab 을 클릭하면 Accept header 속에 client 가 요청한 "application/json" 을 확인할 수 있습니다.

Response body tab 을 클릭하면 product list 가 어떻게 JSON 으로 Serialized 되어 있는지 확인할 수 있습니다. 다른 browser 들고 유사한 기능을 가지고 있습니다. 다른 유용한 Tool 로는 Fiddler 가 있으며 web debugging proxy 입니다. Fiddler 를 사용하여 HTTP traffic 을 볼 수 있으며. HTTP request 를 재구성하여 request 의 HTTP header 를 완벽하게 제어할 수 있게 해줍니다.

Azure 에서 이 App 실행하기

완성된 site 가 실제 구동하는 web app 으로 실행되는 모습을 보는 것은 어떻습니까? 다음 버튼을 간단히 click 하는 것만으로 여러분의 Azure 계정에 앱의 전체 버전을 배포하는 것이 가능합니다.

Azure 에 이 Solution 을 배포하려면 Azure 계정이 필요합니다. 계정을 가지고 있지 않다면, 다음과 같은 옵션을 사용할 수 있습니다 :

무료로 Azure 계정을 여십시오 - 유료 Azure service 를 사용할 수 있는 credits 를 얻습니다. 모두 사용한 후에도 계정을 유지할 수 있으며 무료 Azure service 를 사용할 수 있습니다.
MSDN 구독자 혜택 활성화 - 여러분이 가진 MSDN subscription 은 매월 유료 Azure service 를 사용할 수 있는 credits 을 지급합니다.

다음 단계

POST, PUT, DELETE 를 지원하고 Database 를 작성하는 HTTP service 에 대한 더 많은 예제는 Using Web API 2 with Entity Framework 6 를 참조하십시오.
HTTP service 상에서 작동하는 유동적인 반응형 Web application 을 생성에 대한 자세한 내용은 ASP.NET Single Page Application 를 참조하십시오.

Azure App Service 에 Visual Studio web project 를 배포하는 방법에 대한 정보는 Create an ASP.NET web app in Azure App Service 를 참조하십시오.

행복한 고수되셔요~

woojja ))*

\\\\\\\\\\\\\\\\

PS : OnoNote 에 썼다가 이쪽으로 옮기니 보여지는 글씨들이 맘에 안드네요. ㅡㅡ;

불편하셔도 이해해주셔요. ^^;

저작자표시 비영리 변경금지 (새창열림)

'Web > ASP.NET' 카테고리의 다른 글

[ASP.NET] RoutePrefix Attribute 가 작동하지 않는 경우. (0)	2020.03.19
[ASP.NET] WebAPI 2.0 작성시 Autofac 사용에 필요한 nuget (0)	2018.08.22
[ASP.NET] Web API (0)	2017.09.07
[ASP.NET] MVC와 Web API 간의 주된 차이점 (0)	2017.08.22
[ASP.NET] install the Tool Packages in MVC (0)	2017.02.25

PREV 1 ···207 208 209 210 211 212 213 ···604 NEXT

Jump To VB.NET