ASP.NET 接收 Javascript 處理的資料

 延續上一篇  ASP.NET 建立 Javascript function 並傳遞資料

可以將資料傳到 JS , 那如何取得 JS 處理過後的資料呢 ? 簡單的步驟如下

1. 在 html 建立一個隱藏的 input
2. 在 html 套用的 script 後面再建立一個傳出的 script , 主要將資料傳出到隱藏的 input
3. ASP.net 接收 input 資料處理

以下為範例程式

一、在 html 建立一個隱藏的 input

<div>

...

<%-- 這邊可以把 type 先改為 text 查看傳入的資料是否正確 --%>

<%-- 如果沒有問題,再把 type 改回 hidden 隱藏起來就行了 --%>

<%-- id 記得要跟之後的傳回 Javascript function 寫的一樣 --%>

<input type="hidden" id="JS_Data" runat="server" value="" />

<asp:Button ID="Button3" runat="server" Text="取得 JS 回傳資料" />

...

</div>

二、在 html 套用的 script 後面再建立一個傳出的 script , 主要將資料傳出到隱藏的 input

這邊要注意一下,處理的變數為 strListData

    <script>

        //----------------------------------------------------------

        //直接新增一小段 script 在原有的 script 下面,避免破壞原有 JS 的寫法,

        //因為處理資料的程式可能會由別人更新過,造成不一致狀況.

        //然後利用 Javascript 的特性,變數在最上層宣告後,之後的 script 都可以使用,

        //所以可以將處理過的資料 strListData 放到隱藏欄位,讓後臺接收

        //----------------------------------------------------------

        putJS_Data();

        function putJS_Data() {

            //這個 id 記得要跟 html 寫一致

            let js_data = document.getElementById("JS_Data");

            let strJSON = JSON.stringify(strListData);

            js_data.value = strJSON;

        }

        //----------------------------------------------------------

    </script>

三、ASP.net 接收 input 資料處理

    Protected Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click

        '顯示接收到的資料

        MsgBox("主機端接收JS處理過的字串:" & vbCrLf & JS_Data.Value)

        '使用 json 還原解碼之後的資料

        Dim I As Integer = 0

        Dim J As Integer = 0

        Dim strData As String = ""

        '宣告接收的型態

        '注意 !! 要知道原來回傳的是甚麼型態 , 不然會出錯

        '這邊是用JSON接收字串陣列的方法

        Dim JS_Array As New List(Of String())

        JS_Array = JsonConvert.DeserializeObject(Of List(Of String()))(JS_Data.Value)

        '偵錯,查看JS處理過回傳的陣列是否正確

        strData = ""

        For I = 0 To JS_Array.Count - 1

            strData = strData & "ASP.net 接收到的資料[" & I & "]:"

            For J = 0 To JS_Array(I).GetLength(0) - 1

                strData = strData & "," & JS_Array(I)(J)

            Next

            strData = strData & vbCrLf

        Next

        MsgBox("主機端解析後的陣列:" & vbCrLf & strData)

    End Sub

四、將上一篇接收的 script , 增加處理的過程 , 可取代上一篇的 script

    <script>

        //用來接收資料的變數

        let myData = asp_array();

        //----------------------------------------------------------

        //偵錯,查看接收的資料有沒有問題

        //----------------------------------------------------------

        for (i = 0; i < myData.length; i++) {

            let strListData = "";

            for (j = 0 ; j < myData[i].length; j++) {

                strListData += "," + myData[i][j];

            }

            document.write(strListData + "<br>");

        }

        //----------------------------------------------------------

        //----------------------------------------------------------

        //模擬 JS 的程式,將 myData 處理為 strListData 的過程

        //----------------------------------------------------------

        //宣告,將 myData 處理過後的變數 strListData

        let strListData = Array(myData.length - 1);

        for (i = 0; i < myData.length; i++) {

            let newArray = Array(myData[i].length);

            newArray[0] = "JS Row:" + i;

            for (j = 0  ; j < myData[i].length; j++) {

                newArray[j + 1] = "JS" + myData[i][j] ;

            }

            strListData[i] = newArray;

        }

        //----------------------------------------------------------

    </script>