How do I use two separate bool properties for two grouped radio buttons?

Question

Basically I have a Model with two booleans

public class Review()
{
    [Display(Name = "Thumbs Up")]
    public bool ThumbsUp { get; set; }

    [Display(Name = "Thumbs Down")]
    public bool ThumbsDown { get; set; }
}

In the form each bool has it's own radio button.

<div class="form-group">
    <div class="custom-control custom-radio">
      @Html.RadioButtonFor(x => x.ThumbsUp, "ThumbsUp", new { @class = "custom-control-input", @Name = "reviewRadio" })
      @Html.LabelFor(x => x.ThumbsUp, new { @class = "custom-control-label" })
      <i class="fas fa-thumbs-up"></i>
    </div>
    <div class="custom-control custom-radio">
      @Html.RadioButtonFor(x => x.ThumbsDown, "ThumbsDown", new { @class = "custom-control-input", @Name = "reviewRadio" })
      @Html.LabelFor(x => x.ThumbsDown, new { @class = "custom-control-label" })
      <i class="fas fa-thumbs-down"></i>
    </div>

My intention is for the user to choose one of the two. If they choose thumbs up, then the ThumbsUp property should be true and the ThumbsDown property should be false, and vice versa. The problem is no matter what is selected, both properties get passed to my controller as false.

Ideally, if NOTHING was selected a validation message would occur and the user wouldn't be able to submit the form until selecting a rating. But as it stands I would just like to know how I can get the property to return true if it's selected.

I'm tracking both ThumbsUp and ThumbsDown for the reason that I want a percentage of both for each as reviews start to become accumulated.

Here's part of the controller I mentioned

[HttpPost]
public async Task<ActionResult> PostReivew(Review review)
{
  // Do stuff with the review model..
}

Any advice on this would be greatly appreciated, I have spent hours searching the web for answers.

Answer 1

You need to set the default value of both so that one is checked already by default on page load and then do the logic in controller action :

@Html.RadioButtonFor(x => x.ThumbsUp, "true", new { @class = "custom-control-input"})


@Html.RadioButtonFor(x => x.ThumbsDown, "false", new { @class = "custom-control-input"})

and in action method:

[HttpPost]
public async Task<ActionResult> PostReivew(Review review)
{
  review.ThumbsDown = !review.ThumbsUp;
  // your code here
}

Answer 2

Radio buttons don't work with your intention. You can only bind a Property to it and if it is selected by the user, then the value that you ordered in the second parameter of RadioButtonFor will be set. So in order to achieve your goal, you can define a string property and decide to set your boolean properties in different circumstances. for more information click here

Answer 3

To make posibility to "Not selected", you should use

[Display(Name = "Thumbs Up")]
public bool? ThumbsUp { get; set; }

[Display(Name = "Thumbs Down")]
public bool? ThumbsDown { get; set; }

To make posibility to select "only one of 2 variants" you should specify Group for rediobutton, like this

@Html.RadioButtonFor(x => x.ThumbsDown, "ThumbsDown", new { @class = "custom-control-input", @Name = "reviewRadio", GroupName = item.OptServiceCatId  })