RazorPagesを用いた「JavaScript内の配列変数をC＃コード内での参照する方法」についての質問

Question

実現したいこと

JavaScriptコード内の配列変数「jscheckedColumns」を同一のcshtml内のC#コード(@コード内)で参照し、チェックボックスにチェックされている項目を以下の様に表のカラム項目に表示したい。

  <th scope="col" style="background-color: azure; min-width:180px;">選択された項目１</th>
 <th scope="col" style="background-color: azure; min-width:180px;">選択された項目２</th>
 <th scope="col" style="background-color: azure; min-width:180px;">選択された項目３</th>

選択された項目１	選択された項目２	選択された項目３

発生している問題・分からないこと

RazorPagesを使用したWebページの実装方法において、cshtmlファイル内に以下のコード内の配列変数「jscheckedColumns 」を同一cshtmlファイル内のC＃コード（＠内コード）で参照することができません。

該当のソースコード

<script>
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checkedCount = 0; // チェックカウンタ
const jscheckedColumns = @Html.Raw(Json.Serialize(Model.checkedColumnList)); // チェック済みカラム名格納リスト

checkboxes.forEach((checkbox, index) => {
    const labelName = checkbox.parentNode.textContent.trim(); // チェックボックスの親要素からラベル名を取得

    checkbox.value = labelName; // チェックボックスのvalue属性にラベル名を設定

    if (checkbox.checked) {
        checkedCount++;
        jscheckedColumns.push(labelName); // デフォルトでチェックされている場合、選択された項目を追加
    }

    checkbox.addEventListener('change', function () {
        if (this.name == 'customCheckBox') {
            if (this.checked) {
                checkedCount++;
                if (checkedCount >= 6) {
                    this.checked = false;
                    checkedCount--;
                    alert('最大選択数は5つです。');
                } else {
                    jscheckedColumns.push(labelName); // チェックされたら選択された項目を配列に追加
                }
            } else {
                checkedCount--;
                if (checkedCount <= 0) {
                    this.checked = true;
                    checkedCount++;
                    alert('1つ以上選択する必要があります。');
                } else {
                    const indexToRemove = jscheckedColumns.indexOf(labelName);
                    jscheckedColumns.splice(indexToRemove, 1); // チェックが外れたら選択された項目を配列から削除
                }
            }
        }
        console.log("選択された項目: ", jscheckedColumns);
    });
});
</script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

試した方法１：
CSファイル内にBindingPropertyの変数を定義し、Modelを用いた変数（Razor変数）の共有方法を試みました。

[BindProperty]
public List<string> CheckedColumns { get; set; } = new List<string>();

<script>
    const jscheckedColumns = @Html.Raw(Json.Serialize(Model.CheckedColumns));
    // 処理は省略
</script>

@if (Model.CheckedColumns.Contains("項目A"))
{
    // 項目Aを表のカラムに追加して表示する処理
}

結果：
Model.CheckedColumnsを参照しても中身がcount=0、capacity=0となっており、チェックボックスでチェックされている項目を参照できません。
ただし、JavaScriptコードにおいて、jscheckedColumns内にはチェックされた項目が正しく格納されています。

試した方法２：
Model.CheckedColumnsに追加する必要があるかと思い、JavaScript内に以下のコードを追加しました。

    // jscheckedColumnsをModel.JsCheckedColumnsに設定
    jscheckedColumns.forEach(function (column) {
        @Model.JsCheckedColumns.Add(column);
    });

結果：
「現在のコンテキストに'column'という名前は存在しません」とエラーが出てしまいます。

補足

特になし

Answer 1

RazorPagesではJavaScriptコード内の変数をC#コードで参照するには、サーバへPOST送信やAjax送信する必要があり、クライアントのブラウザでC#コードは動きません。クライアントのブラウザでC#コードがそのまま動くような記述をしたいのであれば、RazorPagesではなくBlazor Serverを検討して下さい。

この時点ですでに質問者さんの意図とは違う回答になるかもわりませんが、

「JavaScript内の配列変数をC＃コード内での参照する方法」

ということへの一般的な回答としては以下の通りです。

JavaScript変数であるjscheckedColumnsを
JSON.stringify(jscheckedColumns) と文字列にし、
サーバへPOST送信かAjax送信し、サーバ側のC#コードで
CheckedColumns = JsonSerializer.Deserialize<List<string>>(PostValue);
とすればJavaScript内の配列変数をC#変数に戻せます。

※PostValueはPOST送信かAjax送信した文字列です。

Answer 2

サーバーサイドで、C#が実行されてその結果作成されたHTMLがクライアントのブラウザに送られて、その中のJavaScript部分がブラウザ内で実行されます。
JavaScriptの実行結果を、サーバーサイドでそのHTMLを作成した時点のC#に伝えるためには時間を遡って過去に通信する仕組みが必要です（タイムマシン）。
チェックボックスのチェック内容によって、HTMLを変更したいなら、その変更はJavaScriptでそのまま行います。

Answer 3

HTMLにinput typeをhiddenにし、id=任意のIDとasp-for=Modelプロパティを指定し、JavaScriptでgetElemntByIdで書き込み、C＃側でModelプロパティを参照すれば、JavaScript(クライアントサイド)とC＃(サーバサイド)でのデータの共有ができました。