質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.35%

  • JavaScript

    11222questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6170questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • C#

    4766questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    389questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

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

受付中

回答 1

投稿 2017/12/07 16:42

  • 評価
  • クリップ 0
  • VIEW 80

a_tarian

score 3

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();
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2017/12/07 17:00 編集

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

    キャンセル

  • SurferOnWww

    2017/12/07 16:59

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

    キャンセル

  • a_tarian

    2017/12/07 17:25

    大変失礼致しました。ご指摘ありがとうございます。 > 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"の部分になります。

    キャンセル

  • SurferOnWww

    2017/12/07 18:48

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

    キャンセル

回答 1

0

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

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

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

投稿 2017/12/08 10:01

編集 2017/12/08 10:02

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/08 11:52

    質問者さんによると、

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.35%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11222questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6170questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • C#

    4766questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    389questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。