CODEWITHSUNDEEP
c#asp.netasp.net-corerazor-pages
bbbb
bbbb

Reputation: 369

How to properly use Model Binding to get Radio Button value in Razor Pages

I have a set of radio buttons on a razor page, and I want to get and use the selected value of these radio buttons in my server-side code once the form has been submitted. HTML for radio buttons:

<label><input class="boost_radio" onclick="boostNo(1)" asp-for="Boost_No.Number" type="radio" name="boostno" value=1 checked="checked" disabled="disabled" />1</label>
<label><input class="boost_radio" onclick="boostNo(2)" asp-for="Boost_No.Number" type="radio" name="boostno" value=2 disabled="disabled" />2</label>
<label><input class="boost_radio" onclick="boostNo(3)" asp-for="Boost_No.Number" type="radio" name="boostno" value=3 disabled="disabled" />3</label>
<label><input class="boost_radio" onclick="boostNo(4)" asp-for="Boost_No.Number" type="radio" name="boostno" value=4 disabled="disabled" />4</label>
<span asp-validation-for="Boost_No.Number"></span>

I am using model binding to get the value on the server-side:

public class BoostNo
{
    [Required(ErrorMessage = "Select Number of Boost Units!")]
    public int Number { get; set; }
}

This class is instantiated as follows:

[BindProperty]
public BoostNo Boost_No { get; set; }

Unfortunately, every time I run the code, I get a Boost_No.Number = 0. I tried changing the data type to a string, but I just get string = null.

I am trying to use the model-bound variable in the handler method assigned to the form the radio buttons are contained in.

I'd really appreciate it if someone could help me out. Thanks.

Edit:

Here is the handler method in which the model binding is used:

public IActionResult OnPostSubmit()
{
    //save data to sql db
    SaveData();

    //then some other unrelated stuff
}

And the SaveData() method:

public void SaveData()

{
    //stuff

    //now how the radio button values are actually used
    for (int param_i = 1; param_i <= Boost_No.Number; param_i++)
    {
          //...
    }
    //then a paramaterized sql database query
}

Upvotes: 3

Views: 13511

Answers (3)

Anton Toshik
Anton Toshik

Reputation: 2909

Here is a minimal Example I setup to make it work.

Here is my razor page handle and I use the same class implementation as you.

[BindProperty]
public BoostNo Boost_No { get; set; }

public IActionResult OnPost()
{
    return Page();
}

Now in the HTML

<label><input asp-for="Boost_No.Number" type="radio value=1 checked="checked"/>1</label>
<label><input asp-for="Boost_No.Number" type="radio" value=2/>2</label>
<label><input asp-for="Boost_No.Number" type="radio" value=3/>3</label>
<label><input asp-for="Boost_No.Number" type="radio" value=4/>4</label>

Changes:

  1. First remove the name attribute. Why? because the asp-for tag helper will create a name attribute for you. In addition to providing a name attribute you give it a value of boostno, the name attribute is used to bind the value to the Model, in other words your OnPost handle doesn't have a boostno parameter anywhere to get bound to.
  2. Secondly if an input field is disabled the input value will be ignored. I would double check that before you submit the form open developer tools (F12) and double check your input field elements to make sure they are not disabled, even though the UI might suggest otherwise.

Upvotes: 4

Mike Brind
Mike Brind

Reputation: 30035

All of your radio inputs are set to disabled so no value will be passed in the form collection when the form is submitted. Remove the disabled (and the name) attributes from the inputs:

<label><input class="boost_radio" onclick="boostNo(1)" asp-for="Boost_No.Number" type="radio" value=1 checked="checked" />1</label>
<label><input class="boost_radio" onclick="boostNo(2)" asp-for="Boost_No.Number" type="radio"  value=2 />2</label>
<label><input class="boost_radio" onclick="boostNo(3)" asp-for="Boost_No.Number" type="radio"  value=3 />3</label>
<label><input class="boost_radio" onclick="boostNo(4)" asp-for="Boost_No.Number" type="radio"  value=4 />4</label>

Upvotes: 5

mukesh joshi
mukesh joshi

Reputation: 594

if these are individual radio buttons, you should have individual binding for each of those, for now you are using same for each of the radio button. (Boost_No.Number). Either create a list of List and then bind individual radio button lik "Boost_No[0].Number" or create different properties for each of those (your choice)

Upvotes: 2

Related Questions