0

VIEW側で下記のようなbootstrapを用いたトグルボタンを作成しました。
このトグルボタンの選択状況(ON/OFF)をトグルの切り替わり時にControllerに渡したいのですがどのように実装すればいいでしょうか。

ソースを一部記載致します。

※Controller

    public ActionResult Index()
    {
        var test = Request.Form["cbOnOff"];

        return View();
    }

※View

 <div style="width: 200px; display:inline-flex;">

    @Html.CheckBox("cbOnOff", true, new
    {
        data_toggle = "toggle",
        data_size = "small",
        data_on = "ON",
        data_off = "OFF"
    })
 </div>

※実行時のページソース(チェックボックス部分)

<div style="width: 200px; display:inline-flex;">
    <input checked="checked" data-off="OFF" data-on="ON" data-size="small" data-toggle="toggle" id="cbOnOff" name="cbOnOff" type="checkbox" value="true" />
    <input name="cbOnOff" type="hidden" value="false" />
</div>

のようになっていました。

2 件の回答 2

1

JavaScriptで値が変化する際のイベント(onlickなど)を監視し、AJAXと呼ばれる手法でリクエストを送信し、結果を受け取ることができます。ASP.NET MVCの場合はjQueryを使用して

<script>
    $("#cbOnOff").click(function(e){
        $.ajax({
            url: '@Url.Action("アクション名")',
            data: { checked: e.target.checked },
            dataType: "json",
            success: function(d)
            {
                // 何らかの処理
            },
            error: function(er)
            {
                // エラー処理
            }
        });
    });
</script>

のようなスクリプトを記述すれば、コントローラー側で

ActionResult アクション名(bool checked);

のようなアクションを定義して状態を受け取ることができます。通常はアクションでJSONを返却し、JavaScriptのコールバック関数へとさらに処理が続くことなります。

1

ASP.NETの標準的な方法では、同名の<input type="hidden" />をチェックボックスより後ろに配置し、checkboxTruehiddenFalseを指定します。

<input type="checkbox" name="cbOnOff" value="True" />
<input type="hidden" name="cbOnOff" value="False" />

このようなHTMLでRequest.Form["cbOnOff"]TrueまたはFalseが必ず送信されるようになり、アクションのbool型引数でバインドすることができます。

ActionResult SomeAction(bool cbOnOff);

なお上記のようなHTMLは@Html.CheckBoxForまたはCheckBox拡張メソッドで出力するのが便利です。

@Html.CheckBox("cbOnOff", true, new{
    data_toggle="toggle",
    data_size="small",
    data_on="ON",
    data_off="OFF" })

追記

上の例ではCheckBoxメソッドを使用していますが、これはCheckBoxForより制約が緩く説明が簡単になるからです。実際に記述する場合は型指定されたビューでCheckBoxForを利用すべきです。

また前提として<input>要素が値を送信するのは<form>内で<button type="submit">その他の要因でサブミットが発生した場合です。ASP.NET MVCであれば通常は@using(Html.BeginForm()){}のブロック内に記述してください。

3
  • 回答いただきありがとうございます。上記2パターンを試してみましたが、どちらもnullが返ってきてしまいます。何か原因として考えられることはあるでしょうか?
    – t28bsai
    Commented 2017年7月26日 0:51
  • @TSaito 前提として上記の例ではパラメーターがbool型のため、絶対にnullとなることはありません。とりあえずブラウザーのフォームパラメーターにパラメーターcbOnOffが含まれているかとRequest.Formで値を認識しているかを確認してみてください。おそらくチェックボックスがフォーム外にあるとか、バインディングパスが一致していないとか、cbOnOff以外の要因でnullとなっているとかそんなところだと思います。
    – pgrho
    Commented 2017年7月26日 1:11
  • @pgrho様 Request.Fo‌​rmで値は認識されていませんでした。別途回答欄にソースを記載しました。お手数をおかけしますがご確認いただけますでしょうか。
    – t28bsai
    Commented 2017年7月26日 2:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。