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

実現したいこと

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

HTML

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

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

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

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

該当のソースコード

JavaScript

1<script>2const checkboxes = document.querySelectorAll('input[type="checkbox"]');3let checkedCount = 0; // チェックカウンタ4const jscheckedColumns = @Html.Raw(Json.Serialize(Model.checkedColumnList)); // チェック済みカラム名格納リスト5 6checkboxes.forEach((checkbox, index) => {7 const labelName = checkbox.parentNode.textContent.trim(); // チェックボックスの親要素からラベル名を取得8 9 checkbox.value = labelName; // チェックボックスのvalue属性にラベル名を設定10 11 if (checkbox.checked) {12 checkedCount++;13 jscheckedColumns.push(labelName); // デフォルトでチェックされている場合、選択された項目を追加14 }15 16 checkbox.addEventListener('change', function () {17 if (this.name == 'customCheckBox') {18 if (this.checked) {19 checkedCount++;20 if (checkedCount >= 6) {21 this.checked = false;22 checkedCount--;23 alert('最大選択数は5つです。');24 } else {25 jscheckedColumns.push(labelName); // チェックされたら選択された項目を配列に追加26 }27 } else {28 checkedCount--;29 if (checkedCount <= 0) {30 this.checked = true;31 checkedCount++;32 alert('1つ以上選択する必要があります。');33 } else {34 const indexToRemove = jscheckedColumns.indexOf(labelName);35 jscheckedColumns.splice(indexToRemove, 1); // チェックが外れたら選択された項目を配列から削除36 }37 }38 }39 console.log("選択された項目: ", jscheckedColumns);40 });41});42</script>

試したこと・調べたこと

上記の詳細・結果

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

C＃

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

CSHTMLファイル内

1<script> 2 const jscheckedColumns = @Html.Raw(Json.Serialize(Model.CheckedColumns)); 3 // 処理は省略 4</script> 5 6@if (Model.CheckedColumns.Contains("項目A")) 7{ 8 // 項目Aを表のカラムに追加して表示する処理 9}

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

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

JavaScript

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

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

補足

特になし