車の情報まとめアプリ07（車両情報_PageMethodsの使用）
■車両情報の表示について修正する（その２）。
ASP.NETのボタンから javascript の function を実行する方法や、javascript の中でASP.NETの function を実行する方法があることが分かったけど、まだ思うように動かせない。
ASP.NETのボタンから javascript を実行する方法では、関数の中でjQueryのappendを使ってHTMLの<body>に構文を追加するけど、追加後になぜかすぐ消えてしまう。実行を、ASP.NETのボタンからHTMLのボタンにするとこの現象は消える。理由はよく分からないけど、ASP.NETのボタンを無理に使う必要もないため、この方法はやめる。
次に、javascript の中でASP.NET を実行する方法では、データがうまく取れなかった。
下のようなコードで、引数に車両の名前を入れて、ASP.NET の function の中でその車両のスペックデータを取りだすことを考えていたけど、sampleDataが undefined になってしまう。
let sampleData = PageMethods.getVehicleSpec(vehicleName);
前回は、サーバ側の処理が完了する前に次に進んでしまいsampleDataにデータが入らないのかと思っていたけど、どうやらPageMethodsの構文が違っていたよう。
下のように、OnSuccess と OnError を入れると OnSuccess の response として、スペックデータが返ってきた。
PageMethods.getVehicleSpec(vehicleName, OnSuccess, OnError);
function OnSuccess(response) {
sampleData = response;
}
function OnError(error) {
alert(error);
}
また、この function OnSuccess (response) は、ASP.NETで処理した後、そのレスポンスが返ってきたときに実行されるようで、これらの下に javascript を記述していると、それが先に実行される。そのため、OnSuccess 内にHTMLへの構文の追加などの処理も入れて、最終的に下のようなコードにした。
<script>
function popupVehicleSpec() {
let vehicleName = document.getElementById('<%= DropDownList2.ClientID %>').value
PageMethods.getVehicleSpec(vehicleName, OnSuccess, OnError);
function OnSuccess(response) {
sampleData = response;
$(function () {
if ($('#sampleLayer').length) {
$('#sampleLayer').show()
}
else {
$("body").append("<div id='sampleLayer'>" + sampleData + "</div>")
let sampleLayerCss = {
opacity: "80%",
width: "300px",
height: "200px",
"background-color": "white",
border: "dotted",
position: "absolute",
top: "200px",
left: "10px",
}
$('#sampleLayer').css(sampleLayerCss);
}
$('#sampleLayer').click(function () {
$(this).hide()
$('#sampleLayer').hide()
})
});
}
function OnError(error) {
alert(error);
}
}
</script>
HTMLのボタンを押すことで、popupVehicleSpec の関数が実行される。
実行結果が下のもの。少し動かしてみたけど、問題なく情報が更新されているよう。
情報表示についてはこれで終わり。あとは情報登録について少し考えてみる。
