Skip to content

context.AddResponse の Method と引数 ​

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

context.AddResponse の第 1 引数 method には、公式マニュアルに載っているもの以外にも多くの値が使えます。実体はブラウザ側 JavaScript の $p.setByJsonElement にある switch 文で、Href(画面遷移)、WindowScrollTop(スクロール)、Trigger(イベント発火)なども使えます。このページでは Method ごとの動作と引数の指定方法を一覧にします。

仕組み ​

引数は 4 つ ​

マニュアルでは context.AddResponse(method, target, value) となっていますが、実装では第 4 引数 options まであります。method 以外は既定値 null なので省略できます。

csharp
public void AddResponse(
    string method,
    string target = null,
    object value = null,
    string options = null)
{
    ResponseCollection.Add(
        method: method,
        target: target,
        value: value,
        options: options);
}

指定のパターンは次の 4 通りです。

  1. context.AddResponse(method)
  2. context.AddResponse(method, target)
  3. context.AddResponse(method, target, value)(マニュアル記載)
  4. context.AddResponse(method, target, value, options)

ブラウザ側で処理される ​

AddResponse で渡した値は ResponseCollection に追加され、最終的に JSON にシリアライズされてブラウザへ送られます(value が null なら空文字列になります)。ブラウザ側で受け取るのは _dispatch.js の $p.setByJsonElement で、Method の値で switch しています。

図を読み込み中…

js
$p.setByJsonElement = function (jsonElement, data, $control) {
    var method = jsonElement.Method;
    var target = jsonElement.Target;
    var value = jsonElement.Value;
    var options = jsonElement.Options !== undefined
        ? JSON.parse(jsonElement.Options)
        : {};
    switch (method) {
        case 'Html':
            $(target).html(value);
            break;
        // ...(以下、Method ごとの case が続く)
    }
}

Method 早見表 ​

[未使用] はその引数を使わないことを表します。options はどの Method でも未使用です(SetValue のみ内部で参照します)。

methodtargetvalue実装備考
Html<セレクタ><任意の文字列>$(target).html(value);
ReplaceAll<セレクタ><任意の文字列>$(value).replaceAll(target);マニュアル記載あり
Message#MessageJSON.stringify({Css: <メッセージタイプ>, Text: <任意のメッセージ>})$p.setMessage(target, value);$p.setMessage を参照
Href空文字列<遷移先 URL>$p.transition(value);内部で location.href = value
PushState<任意のキー文字列><スタック先 URL>history.pushState(target, '', value);
Set<項目物理名> または <セレクタ><任意の文字列>$p.set($p.getControl(target), value);マニュアル記載あり
SetData<セレクタ>[未使用]$p.setData($(target));通常は使わない
SetFormData<キー><値>data[target] = value;通常は使わない
SetMemory<任意のキー文字列><任意の値>$p[target] = value;関数は渡せない。下記を参照
Append<セレクタ><任意の文字列>$(target).append(value);
Prepend<セレクタ><任意の文字列>$(target).prepend(value);
After<セレクタ><任意の文字列>$(target).after(value);下記の注意を参照
Before<セレクタ><任意の文字列>$(target).before(value);下記の注意を参照
InsertText<セレクタ><任意の文字列>$p.insertText($(target), value);説明項目を対象にする前提
Remove<セレクタ>[未使用]$(target).remove();
Attr<セレクタ>JSON.stringify({Name: <属性名>, Value: <属性値>})$(target).attr(json.Name, json.Value);
RemoveAttr<セレクタ><属性名>$(target).removeAttr(value);
Css<セレクタ>JSON.stringify({Name: <プロパティ>, Value: <値>})$(target).css(json.Name, json.Value);
Focus<セレクタ> または 空文字列[未使用]$(target).focus();空文字列なら操作したコントロールにフォーカス
SetValue<セレクタ><任意の文字列>$p.setValue($(target), value);送信データには反映しない
ClearFormData<セレクタ><種別>$p.clearData(target, data, value);通常は使わない
CloseDialog<モーダルのセレクタ>[未使用]$(target).dialog('close');target 省略時は全ダイアログ
Paging<セレクタ>[未使用]$p.paging(target);通常は使わない
Toggle<セレクタ>1 または 0$(target).toggle(value === '1');true/false は不可
Trigger<セレクタ><イベント名>$(target).trigger(value);
Invoke<関数名($p のキー)><引数>$p[target](value);関数はスクリプト側で定義しておく
Events<イベント名>[未使用]$p.execEvents(target, '');$p.events の関数を実行
WindowScrollTop空文字列<スクロール量>$(window).scrollTop(value);
ScrollTop<セレクタ><スクロール量>$(target).scrollTop(value);
LoadScroll空文字列[未使用]$p.loadScroll();
FocusMainForm空文字列[未使用]$p.focusMainForm();
Disabled<セレクタ>true または false$(target).prop('disabled', value);
Log空文字列<任意の文字列>console.log(value);context.Log と同じ働き

Method ごとの詳細 ​

DOM を書き換える(jQuery そのまま) ​

Html / ReplaceAll / Append / Prepend / After / Before / Remove / RemoveAttr / Focus / ScrollTop は、同名の jQuery メソッドをそのまま呼んでいます。

  • Html: target の中身を value で書き換えます。
  • ReplaceAll: target の要素ごと value で置き換えます。
  • Append / Prepend: target の末尾 / 先頭に value を追加します。
  • After / Before: target の直後 / 直前に要素を追加します。
  • Remove: target を丸ごと削除します。

After / Before のセレクタ

$(target) が見つからないときは、$p.setByJson に渡されたコントロール($control)の前後に追加します(_dispatch.js)。$control が何になるかは呼び出し経路で決まり、ボタンなどの操作によるリクエストでは操作したコントロール、初回の画面表示(「画面表示の前」などで積んだレスポンス)では #MainForm です(HtmlScripts.cs)。一方、$control を渡さずに $p.ajax を呼ぶ経路もあり(一覧から編集画面をダイアログで開く処理など。gridevents.js)、そのレスポンスで存在しないセレクタを指定すると undefined に対して after / before を呼ぶことになり、例外が発生します。存在しないセレクタを指定したときに例外になるという報告はこの経路によるものです。意図しない位置への追加も避けるため、target には存在するセレクタを指定してください。

Attr と Css は value に JSON 文字列を渡す ​

Attr と Css は value を JSON.parse してから Name と Value を使います。オブジェクトではなく、シリアライズした文字列を渡します。

js
context.AddResponse('Css', '#SectionFields1', '{"Name":"display","Value":"none"}');

Message ​

スクリプトの $p.setMessage を呼びます。

Href と PushState ​

Href は $control.addClass('no-send') で現在の画面内容をサーバーに送らないようにしたうえで、$p.transition(value) を呼びます。$p.transition の中身は location.href = url です(navigation.js)。サーバースクリプトから画面遷移させたいときに使えます。

PushState は history.pushState(target, '', value) を呼びます。

Set と SetValue の違い ​

  • Set: $p.getControl(target) で項目を探し、見つからなければ $(target) をそのまま使って $p.set で値をセットします。項目物理名でもセレクタでも指定できます。
  • SetValue: $p.setValue($(target), value) のあと $p.hideField(target, options) を実行します。$p.setValue は要素の種類(checkbox / radio / textarea / select / span / time など)に応じて値を書き換えるだけで、$p.setData を呼びません。つまりサーバーに送るデータには反映されません。表示名など、データ以外の表示を書き換えたいときに使います。$p.hideField は、$p.setValue で外れることがある項目の表示・非表示を options.Hide に従って戻す処理です。

SetData / SetFormData / ClearFormData ​

いずれもブラウザからサーバーへ送るデータ(data という連想配列)を操作するもので、通常は使いません。

  • SetData: $p.setData($(target)) を呼び、要素の値を data に詰めます(要素が not-send クラスを持つ場合は何もしません)。UI 操作や $p.set の裏で動いている関数です。
  • SetFormData: data[target] = value で、コントロールを介さず直接 data にセットします。
  • ClearFormData: $p.clearData を呼び、data から該当データを削除(= 送信しないように)します。value に startsWith を指定すると前方一致、ignoreView を指定すると View で始まるキーを除外します。

SetMemory と Invoke ​

SetMemory は $p[target] = value で $p に値を保存します(_dispatch.js)。値はサーバーで JSON にシリアライズされて届くため、保存できるのは文字列・数値・真偽値やそれらを組み合わせたデータで、関数は渡せません。

Invoke は $p[target](value) で、$p にある関数を value を引数にして呼び出します(_dispatch.js)。呼び出す関数は、プリザンター本体の $p の関数か、テーブルのスクリプトなどで $p.myFunc = function (value) { ... }; のように定義しておいたものです。SetMemory で保存した値は、この関数の中から $p.キー名 で参照できます。

InsertText ​

$p.insertText を呼び、対象要素のカーソル位置に文字列を挿入して送信データにも反映します(markdown.js#L146-L158)。説明項目に文字列を追記するときに使います。

Toggle ​

$(target).toggle(value === '1') なので、表示するなら '1'、隠すならそれ以外('0' など)を渡します。true / false は直接指定できません。

js
context.AddResponse('Toggle', '#SectionFields1', '0'); // 隠す
context.AddResponse('Toggle', '#SectionFields1', '1'); // 表示する

Trigger ​

$(target).trigger(value) で、任意の要素にイベントを発火させます。サーバースクリプトから選択肢一覧のモーダルを開いたり、一覧メニューを表示したりといった UI 操作ができます。

Events ​

$p.execEvents(target, '') を呼び、$p.events に登録されている関数を実行します(_event.js#L13-L29)。実行できるのは $p.events に入っている関数に限られます。

スクロール関連 ​

  • WindowScrollTop: ウィンドウを value の位置までスクロールします。
  • ScrollTop: target の要素を value の位置までスクロールします。
  • LoadScroll: $p.saveScroll で保存された位置($p.scrollX / $p.scrollY)へ window.scroll します。画面の再ロード後に元の位置へ戻すためのもので、通常は使いません。
  • Paging: 一覧などで下端までスクロールしたときに次のデータを読み込む処理($p.paging)です。通常は使いません。

その他 ​

  • CloseDialog: $p.clearMessage() のあと、target が指定されていてダイアログならそれを、未指定なら開いているダイアログをすべて閉じます。
  • FocusMainForm: 編集画面の先頭の入力項目にフォーカスします。
  • Disabled: $(target).prop('disabled', value) で disabled を付けたり外したりします。
  • Log: value があればブラウザのコンソールに出力します。

関連ページ ​

変更履歴

第3版「サーバースクリプト」を 1.5.8.1 のソースで検証して修正
第2版記事のファイル名に並び順の番号を付け、元記事リンクを frontmatter の sources に移行
第1版「サーバースクリプト」セクションの記事を追加