MV3 Duplicate Query String Values for CheckBox (true,false for boolean)

Question

I've created a fairly straight forward page with a check box:

@using (Html.BeginForm("MyController", "MyAction", FormMethod.Get))
{
  @Html.CheckBoxFor(x => x.MyCheckBox)
  <input type="submit" value="Go!" />      
}

The URL is populated with the MyCheckBox value twice!? As such:

MyAction?MyCheckBox=true&MyCheckBox=false

It only duplicates the value if the check box is true. If set to false it will only appear once in the query string.

The code above is simplified as I have a couple of drop downs and a textbox on the form which work fine. I don't think there's anything unusual about the code which I've left out from this question.

Has anyone had a similar issue with query string parameters being duplicated?

Rory McCrossan · Accepted Answer · 2017-01-03 09:30:36Z

18

This behaviour is by design of the checkbox control. The standard HTML checkbox control passes no value if it is not checked. This is unintuitive. Instead, the ASP.Net checkbox control has 2 elements, the standard control which is visible and also a hidden control with a value of 'False'.

Therefore, if the checkbox is not checked, there will be one value passed: False.
If it is checked, there will be two values, True and False. You therefore need to use the following code to check for validity in your code:

bool checkboxChecked = Request.QueryString["MyCheckBox"].Contains("True");

edited Jan 3, 2017 at 9:30

answered Nov 14, 2011 at 9:48

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

4 Comments

pfeds Over a year ago

Interesting stuff, but what if you're particular about the neatness of the URL? It looks a bit daft having the parameter twice!?

Rory McCrossan Over a year ago

It may be unsightly, but 99% of your userbase won't understand it. If you're really worried about the neatness of your URLs you could pass the data by post and create a specific route for the form.

pfeds Over a year ago

Yes, you're right. I'll leave it as GET and stop being so pedantic. Many thanks Rory.

tratatun Over a year ago

pay attention on .ToLower(): bool checkboxChecked = Request.QueryString["MyCheckBox"].ToLower().Contains("true");

kas · Accepted Answer · 2014-05-08 11:27:37Z

4

Accepted answer is correct however in my case in a recent development the MVC behaviour is misleading.

The MVC Html.CheckBox(...) and Html.CheckBoxFor(...) generate an extra input of 'type=hidden' with the same ID as the checkbox control, leading to the duplicate URL parameters. I got around this problem by simply including the mark up desired as follows:

@if(checkTrue){
    <input type="checkbox" id="MyCheckBox" name="MyCheckbox" checked="checked">
}else{
    <input type="checkbox" id="MyCheckBox" name="MyCheckbox">
}

Would be better wrapped upin a helper to use in place of the MVC code so the value check is encapsulated.

As part of my application, the controller maintains sets of query parameters using both form injection and link injection using helpers in order to preserve state (of paging/filtering controls for example) when clicked to navigate within the same controller scope. As a result of this feature, the check box element is always set back to false if the standard MVC helpers are used. It's a good thing I noticed and did not waste much time on this bug.

edited May 8, 2014 at 11:27

answered Jan 28, 2014 at 14:19

kas

1331 silver badge7 bronze badges

1 Comment

janv8000 Over a year ago

Your remark is not correct, ASP.NET MVC generates an extra input of type hidden and not text when using the CheckBoxFor helpers. See stackoverflow.com/questions/2697299/…

user1477388 · Accepted Answer · 2016-12-19 19:16:54Z

2

In my model, I had a collection of checkboxes like so:

public class PrerequisitesViewModel
{
    public List<StudentPrerequisiteStatusViewModel> PrerequisiteStatuses { get; set; }
}

public class StudentPrerequisiteStatusViewModel
{
    public long Id { get; set; }

    public string Name { get; set; }

    public bool IsSelected { get; set; }
}

In order to get everything to bind correctly, I had to actually convert the values from the querystring and parse them manually with the following code:

// fix for how MVC binds checkboxes... it send "true,false" instead of just true, so we need to just get the true
for (int i = 0; i < model.PrerequisiteStatuses.Count(); i++)
{
    model.PrerequisiteStatuses[i].IsSelected = bool.Parse((Request.QueryString[$"PrerequisiteStatuses[{i}].IsSelected"] ?? "false").Split(',')[0]);
}

Alas, it works, but I can't believe this is necessary in MVC! Hopefully, someone else knows of a better solution.

answered Dec 19, 2016 at 19:16

user1477388

21.6k35 gold badges152 silver badges277 bronze badges

1 Comment

andrew Over a year ago

i agree, it should be unnecessary in MVC! a querystring with a delimited list of the active checkboxes should suffice e.g. mycheckboxlist=1,5,6,10

Erkut Yazıcı · Accepted Answer · 2020-05-05 20:29:35Z

2

I solve this issue with use @Html.HiddenFor

<input id="checkboxId" type="checkbox" value="true" onchange="changeCheckboxValue()">
@Html.HiddenFor(m => m.MyCheckBox, new { @id = "hiddenId" } )

<script>
  function changeCheckboxValue() {
    document.getElementById("checkboxId").value = document.getElementById("hiddenId").checked;
  }
</script>

edited May 5, 2020 at 20:29

answered May 5, 2020 at 16:34

Erkut Yazıcı

456 bronze badges

Collectives™ on Stack Overflow

MV3 Duplicate Query String Values for CheckBox (true,false for boolean)

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related