36689


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

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

※Controller

[code]

        public ActionResult Index()
        {
            var test = Request.Form["cbOnOff"];
    
            return View();
        }
    
[/code]

※View

[code]

     <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>
    
[/code]

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

[code]

    <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>
    
[/code]

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


CC BY-SA 3.0
2017-07-25T11:58:49.127
36661
2017-07-26T05:27:39.710
2017-07-26T04:51:30.643
19580
19580
question
c# bootstrap mvc
.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて


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

[code]

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

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

[code]

    ActionResult SomeAction(bool cbOnOff);
    
[/code]

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

[code]

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

## 追記

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

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


CC BY-SA 3.0
2017-07-25T12:13:00.983
36663
2017-07-26T04:27:32.020
2017-07-26T04:27:32.020
5750
5750
36661
answer


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

[code]

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

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

[code]

    ActionResult アクション名(bool checked);
    
[/code]

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


CC BY-SA 3.0
2017-07-26T05:27:39.710
36689
2017-07-26T05:27:39.710
5750
36661
answer