teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問ASP.NETのWebApiへajaxでPOST送信する方法

編集履歴

回答編集履歴

1

追記

2018/02/02 03:19

投稿

退会済みユーザー
test CHANGED
@@ -25,3 +25,265 @@
25
25
 
26
26
 
27
27
  質問者さんのコードを見ると JavaScript オブジェクトが data に設定されています。それを JSON 文字列にしてみたらどうなるでしょう？
28
+
29
+
30
+
31
+ **【2018/2/2 12:18 追記】**
32
+
33
+
34
+
35
+ 質問に対する 2018/02/02 11:59 の私のコメントで「別途案を回答欄に追記しておきます」 と書きましたが、それを以下に書きます。
36
+
37
+
38
+
39
+ [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 送信することと理解しての回答です。
40
+
41
+
42
+
43
+ AuthorId と AuthorName を含む以下のクラスが定義されているのですから、アクションメソッドの引数を AuthorDTO 型の変数にして、それに POST 送信されたデータをモデルバインドした方がよさそうです。データアノテーション検証も追加できますから。
44
+
45
+
46
+
47
+ ```
48
+
49
+ [DataContract]
50
+
51
+ public class AuthorDTO
52
+
53
+ {
54
+
55
+ [DataMember]
56
+
57
+ public string AuthorId { get; set; }
58
+
59
+
60
+
61
+ [DataMember]
62
+
63
+ public string AuthorName { get; set; }
64
+
65
+ }
66
+
67
+ ```
68
+
69
+
70
+
71
+ コントローラーは以下のようにします。InsertAuthor アクションメソッドが今回の課題の POST された AuthorId と AuthorName を取得して処置するものです（INSERT 処理は省略してます。前のスレッドでやり方はアドバイス済み）。デバッガでブレークポイントを設けて変数をチェックしてください。POST された AuthorId と AuthorName が確認できるはずです。
72
+
73
+
74
+
75
+ ```
76
+
77
+ using System;
78
+
79
+ using System.Collections.Generic;
80
+
81
+ using System.Linq;
82
+
83
+ using System.Net;
84
+
85
+ using System.Net.Http;
86
+
87
+ using System.Web.Http;
88
+
89
+ using WebAPI.Models;
90
+
91
+
92
+
93
+ namespace WebAPI.Controllers.BizB
94
+
95
+ {
96
+
97
+ [Route("BizB/ListAuthors/{action}")]
98
+
99
+ public class ListAuthorsWebApiController : ApiController
100
+
101
+ {
102
+
103
+ [HttpGet]
104
+
105
+ public List<AuthorDTO> GetAllAuthors()
106
+
107
+ {
108
+
109
+ using (PUBSEntities pubs = new PUBSEntities())
110
+
111
+ {
112
+
113
+ var query = from a in pubs.authors
114
+
115
+ select new AuthorDTO
116
+
117
+ {
118
+
119
+ AuthorId = a.au_id,
120
+
121
+ AuthorName = a.au_fname + " " + a.au_lname
122
+
123
+ };
124
+
125
+ return query.ToList();
126
+
127
+ }
128
+
129
+ }
130
+
131
+
132
+
133
+ [HttpPost]
134
+
135
+ public List<AuthorDTO> InsertAuthor([FromBody]AuthorDTO author)
136
+
137
+ {
138
+
139
+ string id = author.AuthorId;
140
+
141
+ string name = author.AuthorName;
142
+
143
+
144
+
145
+ // insert 処理・・・省略
146
+
147
+
148
+
149
+ using (PUBSEntities pubs = new PUBSEntities())
150
+
151
+ {
152
+
153
+ var query = from a in pubs.authors
154
+
155
+ select new AuthorDTO
156
+
157
+ {
158
+
159
+ AuthorId = a.au_id,
160
+
161
+ AuthorName = a.au_fname + " " + a.au_lname
162
+
163
+ };
164
+
165
+ return query.ToList();
166
+
167
+ }
168
+
169
+ }
170
+
171
+ }
172
+
173
+ }
174
+
175
+ ```
176
+
177
+ 呼び出し側のクライアントスクリプトは以下のようにします。
178
+
179
+
180
+
181
+ ```
182
+
183
+ <div>
184
+
185
+ <input type="button" value="GetAllAuthors" onclick="apiGetAllAuthors();" />
186
+
187
+ <input type="button" value="InsertAuhtor" onclick="apiInsertAuthor();" />
188
+
189
+
190
+
191
+ <ul id="authors"></ul>
192
+
193
+ </div>
194
+
195
+
196
+
197
+ @section Scripts {
198
+
199
+ <script type="text/javascript">
200
+
201
+ //<![CDATA[
202
+
203
+ function apiGetAllAuthors() {
204
+
205
+ $.ajax({
206
+
207
+ type: "GET",
208
+
209
+ url: "BizB/ListAuthors/GetAllAuthors",
210
+
211
+ contentType: "application/json; charset=utf-8",
212
+
213
+ success: function (data) {
214
+
215
+ $('#authors').empty();
216
+
217
+ $.each(data, function (key, val) {
218
+
219
+ var str = val.AuthorId + ': ' + val.AuthorName;
220
+
221
+ $('<li/>', { html: str }).appendTo($('#authors'));
222
+
223
+ });
224
+
225
+ },
226
+
227
+ error: function (jqXHR, textStatus, errorThrown) {
228
+
229
+ $('#authors').empty();
230
+
231
+ $('#authors').text('textStatus: ' + textStatus + ', errorThrown: ' + errorThrown);
232
+
233
+ }
234
+
235
+ });
236
+
237
+ }
238
+
239
+
240
+
241
+ function apiInsertAuthor() {
242
+
243
+ var j = { AuthorId: "123-45-6789", AuthorName: "ガッチャマンの息子" };
244
+
245
+ var jsonString = JSON.stringify(j);
246
+
247
+ $.ajax({
248
+
249
+ type: "POST",
250
+
251
+ url: "BizB/ListAuthors/InsertAuthor",
252
+
253
+ data: jsonString,
254
+
255
+ contentType: "application/json; charset=utf-8",
256
+
257
+ success: function (data) {
258
+
259
+ $('#authors').empty();
260
+
261
+ $.each(data, function (key, val) {
262
+
263
+ var str = val.AuthorId + ': ' + val.AuthorName;
264
+
265
+ $('<li/>', { html: str }).appendTo($('#authors'));
266
+
267
+ });
268
+
269
+ },
270
+
271
+ error: function (jqXHR, textStatus, errorThrown) {
272
+
273
+ $('#authors').empty();
274
+
275
+ $('#authors').text('textStatus: ' + textStatus + ', errorThrown: ' + errorThrown);
276
+
277
+ }
278
+
279
+ });
280
+
281
+ }
282
+
283
+ //]]>
284
+
285
+ </script>
286
+
287
+ }
288
+
289
+ ```