다음 글을 한글로 바꾸었습니다.
Getting Started with ASP.NET Web API 2 (C#)
많이 부족합니다. 참고만 하셔요 ~ ^^
ASP.NET Web API 2 로 시작하기 (C#)
by Mike Wasson
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
- 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 를 추가합니다.
{
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 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" 으로 지정합니다.
이 파일의 모든 내용을 다름 내용으로 바꿉니다 :
<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 합니다.
// 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 입니다.
var id = $('#prodId').val();
$.getJSON(apiUrl + '/' + id)
.done(function (data) {
$('#product').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}
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 에 썼다가 이쪽으로 옮기니 보여지는 글씨들이 맘에 안드네요. ㅡㅡ;
불편하셔도 이해해주셔요. ^^;
'.NET > ASP.NET' 카테고리의 다른 글
| [ASP.NET] ASP.NET Web API 2 로 시작하기 (C#) (0) | 2017.09.11 |
|---|---|
| [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 |
| [ASP.NET] ViewBag, TempData, ViewData, Session 의 수명 (0) | 2016.05.12 |
| [ASP.NET] Repeater 나 ListView 에서 RadioButton 사용하기 (0) | 2012.03.12 |
