teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2018/02/02 03:19

投稿

退会済みユーザー
answer CHANGED
@@ -11,4 +11,135 @@
11
11
 
12
12
  質問者さんのケースに当てはまるかどうか分かりませんが、自分が知る限り ASP.NET Web API では JSON 文字列を data に設定する必要がありました。
13
13
 
14
- 質問者さんのコードを見ると JavaScript オブジェクトが data に設定されています。それを JSON 文字列にしてみたらどうなるでしょう?
14
+ 質問者さんのコードを見ると JavaScript オブジェクトが data に設定されています。それを JSON 文字列にしてみたらどうなるでしょう?
15
+
16
+ **【2018/2/2 12:18 追記】**
17
+
18
+ 質問に対する 2018/02/02 11:59 の私のコメントで「別途案を回答欄に追記しておきます」 と書きましたが、それを以下に書きます。
19
+
20
+ [https://channel9.msdn.com/Events/de-code/decode-2015/DEV-011](https://channel9.msdn.com/Events/de-code/decode-2015/DEV-011) を参考にしてサンプルを作っていて、今の課題は AuthorId と AuthorName を POST 送信することと理解しての回答です。
21
+
22
+ AuthorId と AuthorName を含む以下のクラスが定義されているのですから、アクションメソッドの引数を AuthorDTO 型の変数にして、それに POST 送信されたデータをモデルバインドした方がよさそうです。データアノテーション検証も追加できますから。
23
+
24
+ ```
25
+ [DataContract]
26
+ public class AuthorDTO
27
+ {
28
+ [DataMember]
29
+ public string AuthorId { get; set; }
30
+
31
+ [DataMember]
32
+ public string AuthorName { get; set; }
33
+ }
34
+ ```
35
+
36
+ コントローラーは以下のようにします。InsertAuthor アクションメソッドが今回の課題の POST された AuthorId と AuthorName を取得して処置するものです(INSERT 処理は省略してます。前のスレッドでやり方はアドバイス済み)。デバッガでブレークポイントを設けて変数をチェックしてください。POST された AuthorId と AuthorName が確認できるはずです。
37
+
38
+ ```
39
+ using System;
40
+ using System.Collections.Generic;
41
+ using System.Linq;
42
+ using System.Net;
43
+ using System.Net.Http;
44
+ using System.Web.Http;
45
+ using WebAPI.Models;
46
+
47
+ namespace WebAPI.Controllers.BizB
48
+ {
49
+ [Route("BizB/ListAuthors/{action}")]
50
+ public class ListAuthorsWebApiController : ApiController
51
+ {
52
+ [HttpGet]
53
+ public List<AuthorDTO> GetAllAuthors()
54
+ {
55
+ using (PUBSEntities pubs = new PUBSEntities())
56
+ {
57
+ var query = from a in pubs.authors
58
+ select new AuthorDTO
59
+ {
60
+ AuthorId = a.au_id,
61
+ AuthorName = a.au_fname + " " + a.au_lname
62
+ };
63
+ return query.ToList();
64
+ }
65
+ }
66
+
67
+ [HttpPost]
68
+ public List<AuthorDTO> InsertAuthor([FromBody]AuthorDTO author)
69
+ {
70
+ string id = author.AuthorId;
71
+ string name = author.AuthorName;
72
+
73
+ // insert 処理・・・省略
74
+
75
+ using (PUBSEntities pubs = new PUBSEntities())
76
+ {
77
+ var query = from a in pubs.authors
78
+ select new AuthorDTO
79
+ {
80
+ AuthorId = a.au_id,
81
+ AuthorName = a.au_fname + " " + a.au_lname
82
+ };
83
+ return query.ToList();
84
+ }
85
+ }
86
+ }
87
+ }
88
+ ```
89
+ 呼び出し側のクライアントスクリプトは以下のようにします。
90
+
91
+ ```
92
+ <div>
93
+ <input type="button" value="GetAllAuthors" onclick="apiGetAllAuthors();" />
94
+ <input type="button" value="InsertAuhtor" onclick="apiInsertAuthor();" />
95
+
96
+ <ul id="authors"></ul>
97
+ </div>
98
+
99
+ @section Scripts {
100
+ <script type="text/javascript">
101
+ //<![CDATA[
102
+ function apiGetAllAuthors() {
103
+ $.ajax({
104
+ type: "GET",
105
+ url: "BizB/ListAuthors/GetAllAuthors",
106
+ contentType: "application/json; charset=utf-8",
107
+ success: function (data) {
108
+ $('#authors').empty();
109
+ $.each(data, function (key, val) {
110
+ var str = val.AuthorId + ': ' + val.AuthorName;
111
+ $('<li/>', { html: str }).appendTo($('#authors'));
112
+ });
113
+ },
114
+ error: function (jqXHR, textStatus, errorThrown) {
115
+ $('#authors').empty();
116
+ $('#authors').text('textStatus: ' + textStatus + ', errorThrown: ' + errorThrown);
117
+ }
118
+ });
119
+ }
120
+
121
+ function apiInsertAuthor() {
122
+ var j = { AuthorId: "123-45-6789", AuthorName: "ガッチャマンの息子" };
123
+ var jsonString = JSON.stringify(j);
124
+ $.ajax({
125
+ type: "POST",
126
+ url: "BizB/ListAuthors/InsertAuthor",
127
+ data: jsonString,
128
+ contentType: "application/json; charset=utf-8",
129
+ success: function (data) {
130
+ $('#authors').empty();
131
+ $.each(data, function (key, val) {
132
+ var str = val.AuthorId + ': ' + val.AuthorName;
133
+ $('<li/>', { html: str }).appendTo($('#authors'));
134
+ });
135
+ },
136
+ error: function (jqXHR, textStatus, errorThrown) {
137
+ $('#authors').empty();
138
+ $('#authors').text('textStatus: ' + textStatus + ', errorThrown: ' + errorThrown);
139
+ }
140
+ });
141
+ }
142
+ //]]>
143
+ </script>
144
+ }
145
+ ```