C# code behind 怎麼把陣列傳到javascript

c# asp.net

神威 2022-11-13 19:50:55 ‧ 1508 瀏覽

分享至

各位好:
我在後端有作一些SQL的查詢，想把查詢的結果(LIST)傳到前端javascript

後端test.cs

//code 省略，查詢SQL資料，存入datatable dr中....
List<string>name=new List<string>
 name = dt.Select().Select(dr => dr["name"].ToString().Trim()).ToList();

前端test.aspx

  <script type="text/javascript">
     
        var myFilters = [
            
                {
                    id: '1',
                        label: '1',
                            type: 'string'
                },
             
        ];
         
        var musicList ="<%= this.name %>";//這裡會錯誤，我都抓不到值，會讓整個js出不來
        for (var i = 0; i < musicList.length; i++) {
          
            myFilters.push({
                id: musicList[i],
                label: musicList[i],
                type: 'string'
            },
            );
        }
        </script>

謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

Samuel

iT邦好手 1 級 ‧ 2022-11-13 20:24:04

jQuery Ajax
去呼叫後端web method
可能是一種好方法

https://coolmandiary.blogspot.com/2021/03/aspnetjquery-ajaxjquery-sortablediv.html

https://coolmandiary.blogspot.com/2021/03/aspnetdropdownlistjquery.html

回應 1
分享
檢舉

神威 iT邦研究生 4 級 ‧ 2022-11-13 20:47:01 檢舉

如果我只想單純把陣列傳到前端可行嗎?

登入發表回應

w4560000

iT邦研究生 5 級 ‧ 2022-11-14 10:53:06

後端

List<string> a = new List<string>() { "test" };
string json = JsonConvert.SerializeObject(a);
ScriptManager.RegisterStartupScript(this, GetType(), "", $"test({json})", true);

前端

<script type="text/javascript">
    var temp = [];

    function test(data) {
        temp = data;
    }
</script>

回應
分享
檢舉

登入發表回應

alien663

iT邦研究生 5 級 ‧ 2022-11-14 14:57:11

認同Samuel所說的，透過http method會比較方便。

在後端取得DT之後，直接轉成JSON String輸出，等到了前端再由Javascript去處理結構化資料會比較輕鬆。

DataTable dtResult = new DataTable();
string JSONString=string.Empty;  
return(JSONConvert.SerializeObject(table));

後端傳給前端時，沒有必要糾結於陣列，javascript有很多處理這種結構性資料的語法，硬要轉成陣列不會比較好做，map、filter之類的語法可以多了解一下。

const data = [
    {
        "TID": 4,
        "TName": "我不會飛",
        "TDes": "abcd"
    },
    {
        "TID": 5,
        "TName": "abcd",
        "TDes": "abcd"
    },
    {
        "TID": 8,
        "TName": "A1",
        "TDes": "B1"
    },
    {
        "TID": 9,
        "TName": "A2",
        "TDes": "B2"
    },
    {
        "TID": 10,
        "TName": "A3",
        "TDes": "B3"
    },
    {
        "TID": 11,
        "TName": "A4",
        "TDes": "B4"
    }
]

data.map(item => {return item.TID})

回應 1
分享
檢舉

神威 iT邦研究生 4 級 ‧ 2022-11-19 12:57:52 檢舉

alien663，w4560000，poison3804，Samuel感謝各位熱情回復，因為最近被抓去做其他任務，一直沒時間，可能下星期再試試看各位的方法，並回報

登入發表回應

poison3804

iT邦新手 4 級 ‧ 2022-11-15 16:13:34

我猜你點不到name的原因，可能是因為你的變數是放在function裡面
如果前端要點到後端的變數的話，要用public欄位或是用protected欄位。
只是你可能要考慮一下生命週期的問題，或許不一定會照你如期的方式在運作。

public partial class Index : Page
{
    protected int globalInt { get;set; } //欄位，這種前端才點的到
    
    protected void Page_Load(object sender, EventArgs e)
    {
        globalInt = 5; //畫面建立時，數值為5
    }
    
    protected void Btn_Click(object sender, EventArgs e)
    {
        int localInt; //區域變數，前端點不到
        globalInt = 10; //執行function後，數值為10
    }
}

但其實更好的方式真的就是像上面說的，寫一個API用非同步去呼叫一個json回來，
可以試試看用ashx去寫非同步的service，應該會方便許多。