How to receive selected radio button values in the controller in ASP. Net Core 6 MVC

Question

I am working on asp.net core 6.0 MVC. On the view, I have four radio buttons and would like to get the selected radio button value in the controller and process further based on the selected value. I have created a view model to pass data between the view and the controller. The following is my code. The problem is the properties of the ReportsAreaVM come as null and the selected radio button value is not returned.

Index.cshtml:

@model ReportsAreaVM

<div style="padding-top: 10px; padding-left: 5px">

<form method="post">

    <div class="card" style="width: 18rem;height: auto;width:800px ">

        <div class="card-header">

            Select a Region

        </div>

        <div class="card-body">

            <div class="" style="padding:10px; min-width:800px">

                <div class="row">

                    <div class="col-10 col-sm-5">

                        <input type="radio" name="radReports" value="asia" asp-for="SelectedQuery" />Asia

                    </div>

                    <div class="col-12 col-sm-6">

                        <input type="radio" name="radReports" value="africa" asp-for="SelectedQuery" />Africa

                    </div>

                </div>

                <div class="row">

                    <div class="col-12 col-sm-5">

                        <input type="radio" name="radReports" value="america" asp-for="SelectedQuery"/>America

                    </div>

                    <div class="col-12 col-sm-6">

                        <input type="radio" name="radReports" value="europe" asp-for="SelectedQuery"/>Europe

                    </div>

                </div>

   </div>

</div>

<div style="padding-top: 20px; padding-bottom:20px">

		<button type="submit" class="btn btn-lg btn-primary" asp-action="ProcessReport">Run Report</button>

		<button class="btn btn-lg btn-secondary">Clear Filters</button>

</div>

</form>

</div>

ReportsAreaVM:

public class ReportsAreaVM

{

[Required]

public string? SelectedQuery { get; set; }     

public string? ReportName { get; set; }

public string? ReportNumber { get; set; }

}

Controller:

public class ReportsController : Controller

{

public IActionResult Index()

{

    ReportsAreaVM reportsAreaVM = new ReportsAreaVM();

    return View(reportsAreaVM);

}

public IActionResult ProcessReport(ReportsAreaVM reportsAreaVM)

{

    var selectedQuery = reportsAreaVM.SelectedQuery;

    <more code here>

}

}

Answer 1

for a radio button, the browser post back the name and value of the selected radio. you are trying to bind to 'SelectedQuery' but you named the radio buttons 'radReports'. change the name to 'SelectedQuery'

Answer 2

The problem is the input names do not match the model property names. It's tough to figure out what the actual end goal but the following changes will bind the radio selections.

Updated Model

    public class ReportsAreaVM
    {
        public string? radReports { get; set; }
        public string? ReportName { get; set; }
        public string? ReportNumber { get; set; }
    }

View

@model ReportsAreaVM

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<form method="post">

    <div class="card" style="width: 18rem;height: auto;width:800px ">
        <div class="card-header">
            Select a Region
        </div>
        <div class="card-body">
            <div class="" style="padding:10px; min-width:800px">
                <div class="row">
                    <div class="col-10 col-sm-5">
                        <input type="radio" name="radReports" value="asia" />Asia
                    </div>
                    <div class="col-12 col-sm-6">
                        <input type="radio" name="radReports" value="africa"  />Africa
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-5">
                        <input type="radio" name="radReports" value="america"  />America
                    </div>
                    <div class="col-12 col-sm-6">
                        <input type="radio" name="radReports" value="europe" />Europe
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="padding-top: 20px; padding-bottom:20px">
        <button type="submit" class="btn btn-lg btn-primary" asp-action="ProcessReport">Run Report</button>
        <button class="btn btn-lg btn-secondary">Clear Filters</button>
    </div>

</form>

Controller Actions

        // GET: FormsController
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult ProcessReport(ReportsAreaVM vm)
        {
            return Ok(vm);
        }

HTML radio button reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio