Skip to content

自動ポストバックでのセクション表示切り替え ​

第1版作成 最終更新 (日本時間)
確認バージョン1.5.8.1

サーバースクリプトで siteSettings.Sections[i].Hide を変えても、自動ポストバックでは画面に反映されません。このページは、本体を改修して反映させるための設計メモです。本体の標準機能ではありません。

改修せずに回避する方法(context.AddResponse、スクリプトの ajax_after_done)と、反映されない理由は セクション(見出し)の制御 にまとめています。

前提にした現行実装 ​

1.5.8.1 のソースで確認した内容です。

  • 初期描画の Fields は、Hide が true のセクションを HTML に出力しません(IssueUtilities.cs)。
  • 自動ポストバックの応答を作る EditorFields は、FieldResponse で項目の値を返すだけで、セクションには触れません(IssueUtilities.cs)。
  • 応答コマンド Toggle はすでにあり、ブラウザ側で jQuery の .toggle(value === '1') を実行します(ResponseCollection.cs、_dispatch.js)。
  • IssueUtilities.cs と ResultUtilities.cs は CodeDefiner がテンプレートから生成するコードです。セクションの描画は Model_Utilities_EditorItem_Body.txt(L667)、EditorFields は Model_Utilities_EditorResponse_Tables_Body.txt(L60)が元です。
  • Wiki は自動ポストバックでも #MainContainer を丸ごと描き直すので、改修は不要です(WikiUtilities.cs)。

改修方針 ​

2 つの変更を組み合わせます。

  1. 初期描画: Hide が true のセクションも display:none を付けて出力する。出力しないままだと、あとで表示に切り替える要素が画面に存在しない。
  2. 自動ポストバック: EditorFields の応答に、セクションごとの Toggle を足す。

図を読み込み中…

1. 初期描画で非表示セクションも出力する ​

section.Key.Hide != true の条件を外し、HtmlAttributes.Style("display:none;", _using: section.Key.Hide == true) をコンテナの Div に付けます。

改修前改修後
Hide = true のセクション出力しないdisplay:none 付きで出力する
セクション内の項目画面に存在しない存在する(非表示)
送信データ含まれない含まれる

非表示のセクションの項目も送信されるようになります。既存レコードは保存済みの値がそのまま送られ、新規作成では既定値が送られます。

2. 自動ポストバックの応答に Toggle を足す ​

Libraries/Responses/ に拡張メソッドを新しく作り、EditorFields の .FieldResponse(...) の直後で呼びます。

csharp
public static class ResponseSections
{
    public static ResponseCollection SectionToggleResponse(
        this ResponseCollection res, SiteSettings ss)
    {
        ss.Sections?.ForEach(section => res.Toggle(
            name: $"#SectionFields{section.Id}Container",
            value: section.Hide != true));
        return res;
    }
}
Section.Hide送る値結果
null・false1表示
true0非表示

改修するファイル ​

ファイル内容種類
Libraries/Responses/ResponseSections.csSectionToggleResponse を新しく作る手で追加
App_Data/Definitions/Definition_Code/Model_Utilities_EditorResponse_Tables_Body.txtEditorFields に .SectionToggleResponse(ss: ss) を足すテンプレート
App_Data/Definitions/Definition_Code/Model_Utilities_EditorItem_Body.txtセクションの出力条件を Style("display:none;") に変えるテンプレート
Models/Issues/IssueUtilities.cs・Models/Results/ResultUtilities.cs上のテンプレートから CodeDefiner で生成する生成

CodeDefiner との関係 ​

生成済みの .cs を直接直すと、CodeDefiner を実行し直したときに上書きされることがあります。選択肢は 3 つです。

方法内容注意点
テンプレートを直す_Body.txt を修正し、CodeDefiner で生成し直す本体を更新するときにテンプレートの差分を取り込み直す
生成コードを直して保護するメソッドのドキュメントコメントに /// Fixed: を書く。CodeDefiner はこのメソッドをマージしない(Parser.cs)メソッド単位でしか保護できない
新しいファイルだけ足すResponseSections.cs は生成対象外なので安全EditorFields の呼び出し 1 行と描画条件の変更は、結局生成コードに入れる必要がある

制約 ​

  • 追加タブ内のセクションも同じ Fields で描画されるので、どのタブのセクションにも効きます。
  • Toggle はセクション全体(#SectionFields{ID}Container)の表示だけを切り替えます。折りたたみの状態(#SectionFields{ID} の hidden クラス)は変わりません。
  • 「自動ポストバック時に返却する列」(ColumnsReturnedWhenAutomaticPostback)で返す列を絞っていても、セクションは列ではないので Toggle は常に送られます。

関連ページ ​

変更履歴

第1版履歴タブと復元・数値項目の通貨記号・画像プレビューモーダルの解説と、編集画面まわりの改修・設計メモを追加