Q&A
そもそもですが、jsonとsvg どこがどうつながる想定でjsonを作られたのでしょうか？
実現性のサンプルを作成中です。
実現のイメージはあるのですが製造未経験のため引き出しが皆無です。
ご協力をお願いします。
OS:windows7
開発環境:visualstudio2017
言語:c#
フレームワーク:asp.net MVC Framework
DB:Postgresql
やりたいことと実現イメージ
ajax処理。
データベースに定義されている各パーツフィールドのtrue:falseの情報を一定周期でjson形式で取得し値に応じて、対応するパーツの絵（svg）の色（fill）を動的に切替えたい。
今回は変更ボタンを押した際に変更する。
データの形式
json
1Test.json 2 3 { 4 "judge1": true, 5 "judge2": false, 6 "judge3": true 7 } 8 9
現状(ロード時）
下図は上記のjsonファイルをhttpのGETで取得し、load時にage（表示1）とname（表示2）を取得し表示したものになります。*(1 jsonデータ修正したので対応してません。
※urlの部分を自分のローカルで実現したいが実現方法がわからない。
現状のコード(クライアント）
javascript
1 $(function () { 2 $('#btn1').click( 3 function () { 4 $("out6").html("データ取得"); 5 6 7 8 // $(window).load(function () { 9 //$("#sample").html("テストを行います"); 10 11 //1.$.ajaxメソッドで通信を行う 12 // dataでは、フォームの内容をserialize()している 13 // →serialize()の内容は、cs1=custom1&cs2=custom2 14 $.ajax({ 15 url: 'http://www.json-generator.com/api/json/get/cggIIAmKnC?indent=2', 16 type: 'GET', 17 datatype: 'json', 18 //2. doneは通信に成功したときに実行される処理 19 //引数のdata1は通信で取得したデータ 20 //引数のtextstatusは通信結果のステータス 21 //引数のjqzXHRは、XMLHttpRequestオブジェクト 22 }).done(function (data1, textStatus, jqXHR) { 23 $("#out1").html(jqXHR.status); 24 $("#out2").html(textStatus); 25 26 //3. キーを指定して値を表示 27 console.log(data1); 28 $("#out4").html(data1["judge1"]); 29 //取得したageのvalueをrectのid='PA_1'へ設定する 30 //$(function () { 31 // var age = $('#PA_1').val(data1[0]["age"]); 32 // if (age.val > 41) { 33 // console.log('赤') 34 // } else { 35 // console.log('緑') 36 // } 37 //}); 38 39 40 41 42 //4.オブジェクトをjson形式の文字列に変換 43 var data2 = JSON.stringify(data1); 44 console.log(data2);//コンソールへjson形式で表示 45 46 //5.json形式の文字列をオブジェクトにし、キーを指定して値を表示 47 //キーを指定して値(/www.json-generator.com/api/json/)を表示 48 var data3 = JSON.parse(data2); 49 $("#out5").html(data3["judge2"]); 50 51 //6. failは、通信に失敗したときに実行される 52 }).fail(function (jqXHR, textStatus, errorThrown) { 53 $("#out1").html(jqXHR.status); //jqXHR.statusを表示 54 $("#out2").html(textStatus); //textStatusを表示 55 $("#out3").html(errorThrown); //errorThrownを表示 56 57 //7. always は 成功、失敗に関わらず実行 58 59 }).always(function () { 60 $("#out6").html("complete"); //表示3 61 62 }); 63 64 }); 65 });
現状(変更ボタン押下時）
javascript
1 $(function () { 2 3 document.getElementById("change").addEventListener("click", function () { 4 5 var poly = document.getElementById("myPoly"); // 多角形（ポリゴン） 6 poly.setAttribute("fill", "#00ff00"); // 緑色で塗りつぶす 7 poly.setAttribute("stroke", "blue"); // 青色の線にする 8 }, true); 9 10 });
★のsvg
html
1<h6 id="sample">sample</h6> 2<p>jqXHR.statusを表示:<span id="out1"></span></p> 3<p>textStatusを表示:<span id="out2"></span></p> 4<p>errorThrownを表示:<span id="out3"></span></p> 5<p>表示１(out4):<span id="out4"></span></p> 6<p>表示２(out5):<span id="out5"></span></p> 7<p>表示３(out6):<span id="out6"></span></p> 8 9<form> 10 <input type="button" id="change" value="変更"> 11 </form> 12 <svg> 13 <polygon id="myPoly" fill="#FFF000" stroke="#FF0000" points="72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 " /> 14 </svg>
svgのidとjsonで取得したkeyとvalueを結びつけるところ？で詰まっています。そもそもその前にやることがありますでしょうか。
ご教授をお願いいたします。
サーバサイドのコードがさっぱり
c#
1[HttpGet] 2 public ActionResult AjaxTest() 3 { 4 if (Request.IsAjaxRequest()) 5 { 6 7 //ここに書く処理が整理できない 8 } 9 return Content("Ajax通信以外のアクセスはできません。"); 10 } 11 12 13 14 15 }
本物のjsonとsvgは出せないので簡易的なものを用意しました。すみません。本番想定としまして、値が正常であることと異常であることの2パターンしかありません。各機器から「true:false」のデータが入ってきてtrueならその部分は緑、falseなら赤く編集したいのです。
まず、そのようにコードを書かれては？jsonのデータを正しく取り出せるようになったのであれば、あとは分岐だけだと思うのですが、どこがどう分からないのでしょうか？（あとどこをどう理解されているのでしょうか？）https://teratail.com/help/question-tips#questionTips3-5-2
気になったのですが、c#は本質問の課題とはどのような関連性があるのでしょうか？
まずはデータを適正に作り直します！
c#のことに関しては前回の質問で開発環境について詳しく教えて欲しいと質問があったのでその流れで一応書いておいただけです。なのであまり関連性はありません。
ajax でサーバーに要求を出して、サーバー側で何らかのデータを取得して JSON 文字列の応答として返すなら、サーバー側での処置行うために C# または VB.NET は必要でしょう。ASP.NET MVC の話なのだから。今はそこが書いてないから関係ないような気がしてるかもしれませんが。
今回の話と関係ない適当な JSON 文字列をサンプルとして書いて、今回の話と関係のないデータまでを取得するコードを書いているから訳が分からなくなるのだと思います。現実的なストーリーを考えて、そのストーリーを実現するための実装を考えましょう。svg の設定をするため必要なデータだけを ajax 要求に応じてサーバー側で取得してクライアントに応答として返すことから、クライアント側でそれを取得して html に設定するまでの一連の流れを考えて質問することをお勧めします。
SurferOnWwwさん、asp.net MVCでのajax通信でなにか良い資料はないでしょうか。ASP.NET webAPIを使った方法があるならそっちにしたいのです。
本を買って体系的に勉強しましょう。遠回りに見えてそれが多分一番の近道だと思います。ところで、何故 Web API なのですか？ その前に Ajax 要求に対して JSON 文字列を返す MVC のアクションメソッドが書けるよう勉強してください。分からなければ聞いてください。今の時点で Web API のことを考えても発散すると思いますよ。そもそも、そんな必要はなさそうですし。
普通に ASP.NET MVC でのストーリーを想像すると、SQL Server 等の DB のテーブルに true / false の情報を含むフィールドがあって、それを Ajax で取得して表示するというようなことになるかと思うのですが、そのような感じで、ある程度具体的なストーリーを書けないでしょうか？ そうしてもらえると、話が通じやすいと思いますので。
ありがとうございます！そうですね!もう少し具体的になるよう修正します。
JSON 文字列を書き換えたようですが、配列にする意味があるのですか？ なければ見直してください。あと、コードが最初の質問のままで、変更された JSON 文字列と全くつじつまが合わず、余計混乱を招きます。新しい JSON 文字列に合わせて書き直してください。
回答1件
0
ベストアンサー
新しい JSON 文字列に合わせてコードを書き直してくださいとお願いしたのですが、無理なようですので、新しい JSON 文字列をベースにサンプルを書いておきます。
SVG の色を変更するところまでは書いてませんが、アクションメソッドを jQuery ajax で要求して、返ってきた JSON 文字列から judge1 ～ 3 の値を取得するところまでは書きましたので、あとはこれを拡張してください。
(1) JSON 文字列を返すアクションメソッドは以下のようにします。
public ActionResult AjaxTest() { if (Request.IsAjaxRequest()) { // DB から取得するとのことだが、その DB が不明なので、とりあえず // Judge1, Judge2, Judge3 というプロパティを持つ匿名クラスを作る var data = new { Judge1 = true, Judge2 = false, Judge3 = true }; return Json(data, JsonRequestBehavior.AllowGet); } return Content("AJAX を使った非同期呼び出ししかできません。"); }
(2) 上記のアクションメソッドを要求すると以下の JSON 文字列が返ってきます。
{"Judge1":true,"Judge2":false,"Judge3":true}
(3) ボタンクリックで取得するとのことなので、html は以下のようにしてみました。ボタンクリックで JavaScript の showJudgeResults メソッドが呼び出されます。
<input id="Button2" type="button" value="button" onclick="showJudgeResults()" /><br /> <div id="judgeResult"></div>
(4) JavaScript は以下のようにします。上記 (3) のボタンクリックで showJudgeResults メソッドが起動されると、jQuery ajax を利用して上記 (1) のアクションメソッドが呼び出されます。応答の JSON 文字列は JavaScript オブジェクトにパースされ、.done(function (data) ... の data に代入されます。それを $('#judgeResult').append( ... で上記 (3) の div 要素内に書き込みます。
function showJudgeResults() { $.ajax({ type: 'GET', url: '/Customer/AjaxTest' }) .done(function (data) { $('#judgeResult').empty(); $('#judgeResult').append( '<p>' + data.Judge1 + ', ' + data.Judge2 + ', ' + data.Judge3 + '</p>'); }) .fail(function (jqXHR, textStatus, errorThrown) { $('#judgeResult').text('textStatus: ' + textStatus + ', errorThrown: ' + errorThrown); }) }
(5) 上記 (4) の $('#judgeResult').append( ... で書き込んだ結果の div 要素は以下のようになります。
<div id="judgeResult"> <p>true, false, true</p> </div>
投稿2018/05/29 07:16
退会済みユーザー
総合スコア0
大変丁寧に回答いただきましてありがとうございます！！
1つ質問させてください。urlの指定で出てきたCustomerの意味を教えて下さい！localで実行するときの指定化何かなのでしょうか。調べても出てこなかったのでお願いします。
説明不足だったようですみません。Customer はコントローラーの名前です。/Customer の / の意味にも注意してください。
いま動作確認行ってみたのですが、「 url: '/Ajax/AjaxTest'（url: '/コントローラ名/アクション名'）」で実行したところボタンが出る前に【"Ajaxを使った非同期呼び出ししかできません。"】が出るのですが何が考えられますでしょうか。確認したのは、ご教授いただいたコントローラをデフォルトのreturn View()へ変更して試したところボタンは出現しました。
そんなことを言われてもあなたが書いたコードがどうなっているか分からない第三者には分かりません。たぶん、ボタンクリック以外にもアクションメソッドを Ajax を使わず呼び出す何かがあるのではないかということが想像できるぐらいです。前にそんなこと言ってませんでしたか？ 聞く前に少し考えてみませんか？
なるほど！！ボタンを設置しているViewを呼ぶ際にAjaxTestアクションメソッドを呼んでしまっていました。
MVCもよく理解していませんでしたので、大変ありがたいお時間をありがとうございました！！
あなたの回答
tips
プレビュー
