당근천국
오늘
어제
전체
본문에 별다른 표시가 없을시 이 조건을 사용합니다.
2016. 10. 27. 15:00
'Web API'와 'Jquery'는 따로 다루는 게 맞습니다만....
빠른 테스트를 위해서 같이 다루도록 하겠습니다.
이 포스팅의 주요 내용은 'Asp.net'의 'Web API'기능을 활용하는 방법입니다.
제이쿼리(Jquery)는 덤이죠 ㅎㅎㅎㅎ
0. 테스트 프로젝트 준비
프로젝트는 빈 템플릿에 'Web API'만 참조하여 생성합니다.
'App_Start'의 'WebApiConfig.cs'를 열어 라우터를 아래와 같이 수정합니다.
|
1
2
3
4
5 |
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
); |
cs |
'Web API'만 참조하는 경우 '{action}'이 빠져있어 평상시 MVC처럼 사용하면 문제가 발생합니다.
그래서 '{action}'을 추가해 줘야 하죠.
1. 데이터 객체 만들기
CRUD 테스트에 사용할 모델과 리스트를 만들어 봅시다.
1-1. 모델(Model) 만들기
'UserData'라는 이름으로 클래스를 하나 만듭니다.
이 클래스는 유저의 데이터를 넣기 위한 클래스입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
/// <summary>
/// 아이템
/// </summary>
public class UserData
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime WriteDate { get; set; }
public UserData(int nId, string sName, DateTime dateWrite)
{
this.Id = nId;
this.Name = sName;
this.WriteDate = dateWrite;
}
}//end UserData |
cs |
1-2. 리스트 만들기
리스트를 만들고 위에서 만든 'UserData'를 리스트로 관리하기 위한 클래스를 만듭니다.
'CList'라는 이름으로 클래스를 하나 생성합니다.
내용은 싱글톤으로 리스트객체를 만들고 관리해줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 |
public sealed class CList
{
#region 싱글톤 처리
private static readonly CList m_instance = new CList();
private CList()
{
List = new List<UserData>();
}
/// <summary>
///
/// </summary>
public static CList Instance
{
get
{
return m_instance;
}
}
#endregion
/// <summary>
/// 사용할 리스트
/// </summary>
private List<UserData> List = null;
/// <summary>
/// 리스트를 받는다.
/// </summary>
/// <returns></returns>
public List<UserData> GetList()
{
return this.List;
}
/// <summary>
/// 지정한 인덱스의 아이템을 가지고 온다.
/// </summary>
/// <param name="nIndex"></param>
/// <returns></returns>
public UserData GetItem(int nIndex)
{
return this.List[nIndex];
}
/// <summary>
/// 데이터를 추가 한다.
/// </summary>
/// <param name="nId"></param>
/// <param name="sName"></param>
/// <param name="dateWrite"></param>
public void Add(int nId, string sName, DateTime dateWrite)
{
this.Add(new UserData(nId, sName, dateWrite));
}
public void Add(UserData oData)
{
this.List.Add(oData);
}
/// <summary>
/// 지정한 인덱스의 아이템을 지웁니다.
/// </summary>
/// <param name="nIndex"></param>
/// <returns></returns>
public void Remove(int nIndex)
{
this.List.RemoveAt(nIndex);
}
}//end CList |
cs |
2. 컨트롤러 만들기
'Controllers'폴더에 'IndexController'를 생성해 줍니다.
아래 코드를 넣어 줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62 |
public class IndexController : ApiController
{
#region GET 방식
[HttpGet]
public IEnumerable<UserData> GetList_Get()
{
return CList.Instance.GetList().ToList();
}
[HttpGet]
public UserData GetItem_Get(int id)
{
return CList.Instance.GetItem(id);
}
[HttpGet]
public void Add_Get(int id, string sName)
{
CList.Instance.Add(id, sName, DateTime.Now);
}
[HttpGet]
public void Remove_Get(int id)
{
CList.Instance.Remove(id);
}
#endregion
#region POST 방식
[HttpPost]
public IEnumerable<UserData> GetList_Post()
{
return CList.Instance.GetList().ToList();
}
[HttpPost]
public UserData GetItem_Post([FromBody]int nIndex)
{
return CList.Instance.GetItem(nIndex);
}
[HttpPost]
public void Add_Post([FromBody]object objData)
{
dynamic m = JsonConvert.DeserializeObject<dynamic>(objData.ToString());
CList.Instance.Add( (int)m.nId, (string)m.sName, DateTime.Now);
}
[HttpPost]
public void Add_Post2([FromBody]UserData oData)
{
oData.WriteDate = DateTime.Now;
CList.Instance.Add(oData);
}
[HttpPost]
public void Remove_Post([FromBody]int nIndex)
{
CList.Instance.Remove(nIndex);
}
#endregion
} |
cs |
'Get'방식과 'Post'방식을 테스트하기 위해서 이렇게 만듭니다 ㅎㅎ
여기서 주의할 점은 포스트(Post)방식의 경우 파라미터를 1개만 읽을 수 있습니다.
(참고 : Microsoft ASP.NET - Parameter Binding in ASP.NET Web API )
그러므로 2가지 방법을 사용할 수 있는데
'Add_Post'가 사용한 방법 : 오브젝트로 받아서 제이썬(Json)으로 변환하여 다이나믹(dynamic)변수로 만들어 사용하는 방법
'Add_Post2'가 사용한 방법 : 미리 만들어둔 클래스에 제이썬을 자동으로 바인딩해주는 것을 이용하는 방법
입니다.
3. Html 작성
테스트를 위해 간단하게UI를 작성하고 제이쿼리(jquery)를 통해 Web API를 호출해 봅시다.
3-1. UI 작성
'Index.html'파일을 생성하고 아래 코드를 넣어 줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
</script>
<style>
body {
line-height: 30px;
}
.InputTable {
float: left;
border: 3px solid #0094ff;
}
.InputTable tr td {
border-bottom: 1px solid #0094ff;
}
.InputTable_Input {
width: 250px;
}
.divResult {
}
.divResult div {
display: block;
float: left;
border: 3px solid #ff6a00;
}
</style>
</head>
<body>
<div>
<table class="InputTable">
<tr>
<td><h3>Get 방식</h3></td>
<td></td>
</tr>
<tr>
<td></td>
<td><button onclick="funGetList_Get()">리스트 호출</button></td>
</tr>
<tr>
<td class="InputTable_Input">
id : <input id="txtID_Get" type="text" /><br />
name : <input id="txtName_Get" type="text" />
</td>
<td><button onclick="funAdd_Get()">아이템 추가</button></td>
</tr>
<tr>
<td>index : <input id="txtIndex_Get" type="text" /></td>
<td>
<button onclick="funGetItem_Get()">아이템 가저오기</button><br />
<button onclick="funRemove_Get()">아이템 지우기</button>
</td>
</tr>
</table>
<table class="InputTable">
<tr>
<td><h3>Post 방식</h3></td>
<td></td>
</tr>
<tr>
<td></td>
<td><button onclick="funGetList_Post()">리스트 호출</button></td>
</tr>
<tr>
<td>
id : <input id="txtID_Post" type="text" /> <br />
name : <input id="txtName_Post" type="text" />
</td>
<td><button onclick="funAdd_Post()">아이템 추가</button></td>
</tr>
<tr>
<td><input id="txtIndex_Post" type="text" /></td>
<td>
<button onclick="funGetItem_Post()">아이템 가저오기</button>
<br />
<button onclick="funRemove_Post()">아이템 지우기</button>
</td>
</tr>
</table>
</div>
<br />
<br />
<br />
<br />
<div class="divResult">
<div>
<h3>조회된 리스트</h3><br />
<table id="tbPerson"></table>
</div>
<div>
<h3>조회된 아이템</h3>
아이디 : <input id="txtID_Result" type="text" /><br />
이름 : <input id="txtName_Result" type="text" /><br />
생성날짜 : <input id="txtDate_Result" type="text" /><br />
</div>
</div>
</body>
</html> |
cs |
이걸 실행해보면 아래와 같이 출력됩니다.
3-2. 자바스크립트 작성하기
자바스크립트는 제이쿼리를 이용하여 'Web API'를 호출해 줍니다.
위에 UI코드에 비워둔 스크립트에 아래 코드를 넣어 줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126 |
/* GET 방식 ◐◐◐◐◐◐◐◐◐◐◐◐◐◐◐◐◐◐◐ */
var funGetList_Get = function () {
$.ajax({
url: "/api/Index/GetList_Get",
type: "GET",
success: function (data) {
$('#tbPerson').empty();
for (var i = 0; i < data.length; i++) {
$("#tbPerson").append("<tr><td>" + data[i].Id + "</td><td>" + data[i].Name + "</td><td>" + data[i].WriteDate + "</td></tr>");
}
},
error: function (msg) {
alert(msg.responseText);
}
});
}
var funGetItem_Get = function () {
$.ajax({
url: "/api/Index/GetItem_Get/" + $("#txtIndex_Get").val(),
type: "GET",
success: function (data) {
$("#txtID_Result").val(data.Id);
$("#txtName_Result").val(data.Name);
$("#txtDate_Result").val(data.WriteDate);
alert('아이템 가저오기 성공');
},
error: function (msg) {
alert(msg.responseText);
}
});
}
var funAdd_Get = function () {
$.ajax({
url: "/api/Index/Add_Get/" + $("#txtID_Get").val()
+ "/?sName=" + $("#txtName_Get").val(),
type: "GET",
success: function (data) {
alert('아이템 추가 성공');
},
error: function (msg) {
alert(msg.responseText);
}
});
}
var funRemove_Get = function () {
$.ajax({
url: "/api/Index/Remove_Get/" + $("#txtIndex_Get").val(),
type: "GET",
success: function (data) {
alert('아이템 지우기 성공');
},
error: function (msg) {
alert(msg.responseText);
}
});
}
/* POST 방식 ◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑◑ */
var funGetList_Post = function () {
$.ajax({
url: "/api/Index/GetList_Post",
type: "POST",
success: function (data) {
$('#tbPerson').empty();
for (var i = 0; i < data.length; i++) {
$("#tbPerson").append("<tr><td>" + data[i].Id + "</td><td>" + data[i].Name + "</td><td>" + data[i].WriteDate + "</td></tr>");
}
},
error: function (msg) {
alert(msg.responseText);
}
});
}
var funGetItem_Post = function () {
$.ajax({
url: "/api/Index/GetItem_Post/",
data: JSON.stringify($("#txtIndex_Post").val()),
type: "POST",
contentType: "application/json",
success: function (data) {
$("#txtID_Result").val(data.Id);
$("#txtName_Result").val(data.Name);
$("#txtDate_Result").val(data.WriteDate);
alert('아이템 가저오기 성공');
},
error: function (msg) {
alert(msg.responseText);
}
});
}
var funAdd_Post = function () {
$.ajax({
url: "/api/Index/Add_Post/",
data: JSON.stringify({ nId: $("#txtID_Post").val(), sName: $("#txtName_Post").val() }),
type: "POST",
contentType: "application/json",
success: function (data) {
alert('아이템 추가 성공');
},
error: function (msg) {
alert(msg.responseText);
}
});
}
var funRemove_Post = function () {
$.ajax({
url: "/api/Index/Remove_Post/",
data: JSON.stringify($("#txtIndex_Post").val()),
type: "POST",
contentType: "application/json",
success: function (data) {
alert('아이템 지우기 성공');
},
error: function (msg) {
alert(msg.responseText);
}
});
} |
cs |
4. 테스트 해보기
이제 동작하는 것을 확인해 봅시다.
잘됩니다.
마무리
테스트 프로젝트 입니다.
WebAPIJquery.zip
이건 코드를 붙여넣기 쉬우라고 대충 만든 것도 있고 해서 코드가 복잡합니다. (중복코드가 ㅋㅋㅋㅋ)
어떻게 'Web API'를 호출하고 사용하는지를 보여주기 위한 예제이니 어떻게 사용하는지만 봅시다 ㅎㅎ
