車の情報まとめアプリ06（車両情報_ASP.NET(ScriptManager)とJavascript）

■車両情報の表示について修正する。
前回でひとまず下のようにHTMLのボタンを押して、画面上に車両情報を出せるところまでできた。車両情報は2つ目のドロップダウンリストを操作することで、HiddenFieldに入れて、そこに入った情報を取り出すようにしている。ただ、この方法の場合、2つ目のドロップダウンリストに入っている情報が1つだけの時、リストの値を変更できないので情報が入らない問題がある。そのため、やはりボタンを押して情報を取得、表示できないか見てみる。

Webで調べると、ASP.NETのボタンから javascript の function を実行する方法や、javascript の中でASP.NETの function を実行する方法などがあった。

ASP.NETのボタンから実行する方法では、ScriptManager を追加した後、下のように<script></script>内で addHandler を使ってASP.NETのボタンと javascript 内の function を紐づける。

    <script language="javascript" src="Scripts/jquery-3.4.1.min.js"></script>
    <script>

        function pageLoad() {
            Sys.UI.DomEvent.addHandler($get("Button1"), "click", popupVehicleSpec);
        }

        function popupVehicleSpec() {
            window.alert("ababababababab")
            let vehicleName = document.getElementById('<%= DropDownList2.ClientID %>').value
            let sampleData = PageMethods.getVehicleSpec(vehicleName);
　　　　以下省略

この方法の場合、Button1 のASP.NETの function が上書きされるようで、それは実行されなくなる。

javascript からASP.NETの function を実行する方法では、ScriptManagerのプロパティEnablePageMethods をTrueにした後、

javascript (<script></script>内)とASP.NETに下のようなコードを入れた。

javascript

  let sampleData = PageMethods.getVehicleSpec(vehicleName);

ASP. NET

  <System.Web.Services.WebMethod(True)>
    Public Shared Function getVehicleSpec(ByVal vehicleName As String) As String
        Dim vehicleSpec As String = ""
　　　　途中省略
        Return vehicleSpec
    End Function

ここで javascript からASP.NET内の getVehicleSpec が呼び出され、Returnで戻った値が sampleData に入る。これも ScriptManager が必須。

これらを使って、ボタンを押した後に、ASP.NETから情報を取得し javascript で表示といったことができるはず。

実際に動かしてみるとデータがうまく取得できない。おそらく、ASP.NET側へデータ送信した後、それが返ってくるのを待たずに次へ進むためかと思う。この辺りをもう少し調べてみる。

ScriptManager は、.net framework 3.5 から出てきている技術で相当古いだろうけど、今はもっと便利なフレームワークとかあるのかな。