ASP.NET（C#）からJavascriptへ配列を渡してJavascriptを実行したい

Question

ASP.NET（C#）からJavascriptへ配列を渡してJavascriptを実行したい。

サーバー側でデータ取得及び配列（ListArray型：多次元配列）にするまでは終了しました。
その後どうしたらいいか、さっぱりわかりません。。。
どなたかご教授お願い致します。

開発環境：VisualStudio2017
DB：Oracle

///* ===================================================
// * カレンダー生成
// * ===================================================*/
function setCalendar(progressList) {    

    var yy, mm, column;
    // yy,mmが未定義なら（つまり一番最初にページを開いたときに）そのときの年月を変数yy,mmに付与する
    if (!yy && !mm) {
        var yy = new Date().getFullYear();
        var mm = new Date().getMonth();
        mm = mm - (-1); // mmは前月を指してしまうのでプラス1してあげる（-(-1)はJavaScriptが足し算苦手なため）
    }
    var zdate = new Date(yy, mm - 1, 0); // 前月末
    var tdate = new Date(yy, mm, 0); // 当月末
    zedd = zdate.getDate(); // 前月末日
    zedy = zdate.getDay(); // 前月末曜日
    tedd = tdate.getDate(); // 当月末日
    tedy = tdate.getDay(); // 当月末曜日

    // カレンダーに埋める数字を配列daysに格納する（5行で済めば35要素、6行なら42要素）
    var days = [];

    // 前月末が土曜日以外（日曜日から0,1,2・・・土曜日が6）
    if (zedy != 6) {
        // 前月最終日曜日から月末曜日までの日付（for逆回しに注意）
        for (var i = zedy; i >= 0; i--) {
            days[zedy - i] = (zedd - i);
        }
        // 当月日付
        for (var i = 1; i <= tedd; i++) {
            days[zedy + i] = i;
        }
        // 当月末が35番目までに終了
        if ((zedy + tedd) <= 34) {
            // 翌月日付
            for (var i = 1; i < 35 - zedy - tedd; i++) {
                days[zedy + tedd + i] = i;
            }
            // 当月末が35番目を超えて終了
        } else if ((zedy + tedd) > 34) {
            // 翌月日付
            for (var i = 1; i < 42 - zedy - tedd; i++) {
                days[zedy + tedd + i] = i;
            }
        }

        // 前月末が土曜日（何月であろうと5行で足りる）
    } else if (zedy == 6) {
        // 当月日付
        for (var i = 1; i <= tedd; i++) {
            days[i - 1] = i;
        }
        // 翌月日付
        for (var i = 0; i < 35 - tedd; i++) {
            days[tedd + i] = i + 1;
        }
    }

    // DOM生成（いよいよ描画）
    var out = "<table class='clsaln'>";

    out += "<caption>";
    out += "<div class='clsCalenderMonth'>"
    // 今月へ戻るリンク
    //out += "<a href='#' onclick='setCalendar();return false;'>今月 </a>";
    // 前月へ移動リンク
    out += "<a href='#' yy='" + yy + "' mm='" + mm + "' onclick='backmm(this);return false;'>\< </a>";
    out += yy + '年' + mm + '月';
    // 翌月へ移動リンク
    out += "<a href='#' yy='" + yy + "' mm='" + mm + "' onclick='nextmm(this);return false;'>\></a>";
    out += "</div>"
    out += "</caption>";

    var youbi = ["日", "月", "火", "水", "木", "金", "土"];
    out += "<tr class='clsalnHeader'>";
    for (var i in youbi) {
        out += "<td>" + youbi[i] + "</td>";
    }

    // ここからさきほど作った配列daysの中身を展開していく

    // columnセット
    var column = "";

    // 行数を計算する
    var row = days.length / 7;
    // 行数分だけ回す
    for (var i = 1; i <= row; i++) {
        out += "<tr class='clsalnBody'>";
        // うまく説明できないが行の変動に対応できるように何とかして回す
        for (var j = 7 * i - 6; j <= 7 * i; j++) {
            // あとでいろいろいじれるように属性やイベントを混ぜておく
            out += "<td class='clsTdLink' row='" + i + "' yy='" + yy + "' mm='" + mm + "' dd='" + days[j - 1] + "' onclick='show(this);return false;'>" + "<div class='clsDay'>" + days[j - 1] + "</div>" + "<div class='clsSetHosu'>" + column + "</div>" + "</td>";
        }
        out += "</tr>";
    }
    out += "</table>";

    // 最後にhtmlへどかっと渡す
    document.getElementById("idResultMap").innerHTML = out;
    //document.getElementById("idResultStep").innerHTML = out;
    //document.getElementById("idResultWeight").innerHTML = out;
    //document.getElementById("idResultWaist").innerHTML = out;
}

// 前月へ移動（年度をまたぐときはyyを調整する必要がある点に留意）
function backmm(e) {
    var yy = e.getAttribute('yy');
    var mm = e.getAttribute('mm');
    if (mm != 1) {
        mm = mm - 1;
    } else if (mm == 1) {
        mm = 12;
        yy = yy - 1;
    }
    setCalendar(yy, mm);
}

// 翌月へ移動
function nextmm(e) {
    var yy = e.getAttribute('yy');
    var mm = e.getAttribute('mm');
    if (mm != 12) {
        mm = parseInt(mm) + 1; // mm-(-1)でも同じだがparseIntを使ってみた
    } else if (mm == 12) {
        mm = 1;
        yy = parseInt(yy) + 1;
    }
    setCalendar(yy, mm);
}

// 日付をクリックしたときに日付をアラートさせる（年と月の拾い方、年またぎに注意）
function show(e) {
    var row = e.getAttribute('row');
    var yy = e.getAttribute('yy');
    var mm = e.getAttribute('mm');
    var dd = e.getAttribute('dd');
    // クリック対象が1行目かつ前月の日付  
    if (row == 1 && dd > 7) {
        if (mm != 1) {
            mm = mm - 1;
        } else if (mm == 1) {
            yy = yy - 1;
            mm = 12;
        }
    }
    // クリック対象が最終行かつ翌月の日付
    if ((row == 5 || row == 6) && dd < 7) {
        if (mm != 12) {
            mm = parseInt(mm) + 1;
        } else if (mm == 12) {
            yy = parseInt(yy) + 1;
            mm = 1;
        }
    }
    disp();
}

Comments

[退会済みユーザー]

ASP.NET と言っても Web Forms, MVC, Web Pages, Web API などいろいろありますが何ですか？　それから、自分の開発環境（OS, IIS, .NET のバージョン、ブラウザは何かなど）を書いてください。質問するときのイロハのイです。

[退会済みユーザー]

そして、質問内容ですが、長くて意味が分からない JavaScript のコードをベタっと貼ってそれを読めというのでは回答者の負担が重すぎです。サーバー側からのデータの渡し方が分からないということのようですが、具体的にサーバー側のどのようなデータをどのタイミングでスクリプトのどこに渡せばいいか、文章で書いて説明していただけませんか。

[退会済みユーザー]

大変失礼致しました。ご指摘ありがとうございます。 > ASP.NET と言っても Web Forms, MVC, Web Pages, Web API ⇒WebPagesです。 >OS, IIS, .NET のバージョン、ブラウザは何かなど ⇒Windows、IIS7、 .NET4系 >サーバー側のどのようなデータをどのタイミングでスクリプトのどこに渡せばいいか ⇒DBから取得したString型の配列をPage_Load時(C#側)に 　JavaScriptの引数に渡したいです。 　 　「function setCalendar(progressList) {} 」 　 　"progressList"の部分になります。

[退会済みユーザー]

> WebPagesです ← それは確かですか？　WebPages と言うのはこれ→ https://msdn.microsoft.com/ja-jp/library/hh396384(v=vs.111).aspx ですけど間違いないですか？　Page_Load とかが出てくるということは Web Forms のような気がするのですが・・・

Answer 1

C#で生成した配列をJSに渡したいと言って、JSをゴリッと張られてもよく分かりません。
普通にやるんであれば以下の手順では？

• 生成した配列データをNewtonsoft等を使ってJSONシリアライズ
• シリアライズしたデータをHTML側のinput hiddenに詰める
• 詰めたデータをJS側で読み込んでjson.parse
• 後は煮るなり焼くなりなんなりと

※Page_LoadとあるのでASP.NETを想定
※jQueryなしでもいいですが有ったほうがやりやすいかな

Comments

[退会済みユーザー]

質問者さんによると、

> DBから取得したString型の配列をPage_Load時(C#側)に 　JavaScriptの引数に渡したいです

とのことですので、シリアライズ / デシリアライズとかの面倒なことはしなくてもよさそうです。