ASP .NET MVC CheckBoxFor Helper with Bootstrap toggle switch value always false

Question

I am using bootstrap-toggle along with the Html.CheckBoxFor() helper in a view like so:

 @Html.CheckBoxFor(m => m.issueFlag, 
                   new { id = "toggle-switch", 
                         data_toggle = "toggle", 
                         data_size = "normal", 
                         data_on = "Issue on Invoice", 
                         data_off = "No Issue on Invoice",
                         data_onstyle="danger", 
                         data_offstyle="success", 
                         data_width = "200" })

The switch appears and functions on the front end as expected, but when the form is submitted the value is always false. Other things in the form such as check boxes, drop downs and text boxes are captured correctly in the controller. The POST action in the controller is declared like:

[HttpPost]
[AuthorizeRights(Rights = "Viper_ViewAudit,Viper_EditAudit")]
public ActionResult ShowImage(PDFViewer pdfViewerModel, string Command)
{
  ... content ...
}

Am I doing something wrong somewhere? Why is m.issueFlag always false?

(I will provide more code needed, I am not sure what else is relevant).

Update The generated HTML is

<input data-off="No Issue on Invoice" data-offstyle="success" 
       data-on="Issue on Invoice" data-onstyle="danger" data-size="normal"               
       data-toggle="toggle" data-val="true" 
       data-val-required="The issueFlag field is required." data-width="200"               
       id="toggle-switch" name="issueFlag" type="checkbox" 
       value="true" />
<input name="issueFlag" type="hidden" value="false" />

I have now also tried doing a straight up input tag without using the helper with no change.

Can you confirm what happen when you set the value of issueFlag to true in the GET method before you pass the model to the view (it will now add the checked attribute) - does it now always pass back a value of true even when you set it to 'off`'? — user3559349
– user3559349, Commented Mar 14, 2017 at 9:01
When I do that, the toggle is on in the view (rather than off before) but it still returns false in the POST method. — JosephGage
– JosephGage, Commented Mar 14, 2017 at 9:04
And is issueFlag a property (with { get; set; }) or just a field in your model? — user3559349
– user3559349, Commented Mar 14, 2017 at 9:06

amin sedaghaty · Accepted Answer · 2017-03-15 10:03:35Z

1

remove (id = "toggle-switch") from Object html Attributes, because you override your main ID (issueFlag) to (toggle-switch).

if u have problem with that bootstrap-toggle just use jquery and add those Attributes like this :

 @Html.CheckBox("abc", new { @class="abc1"});

 <script>
    function f() {
      $('.abc1').attr('data-toggle', 'toggle')
        .attr('data-onstyle', 'success')
        .attr('data-offstyle', 'danger')
    };
    f();
 </script>

answered Mar 15, 2017 at 10:03

amin sedaghaty

971 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JosephGage Over a year ago

I tried your suggestions. Unfortunately there is no change. I have used a different method from here php.quicoto.com/toggle-switches-using-input-radio-and-css3

amin sedaghaty Over a year ago

append (bool issueFlag) in your controller -> parameters

Collectives™ on Stack Overflow

ASP .NET MVC CheckBoxFor Helper with Bootstrap toggle switch value always false

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related