Creating Radio Button in ASP.NET MVC

Creating Radio Button in ASP.NET MVC

Introduction: Radio buttons are used to allow users to select a single option from a set of mutually exclusive choices. In ASP.NET MVC, radio buttons can be easily created using HTML helper methods. This documentation provides a step-by-step guide on how to create radio buttons in an ASP.NET MVC application.

Step 1: Create a Model: First, create a model class to represent the data associated with the radio button. For example, let's create a "Gender" model with two options: Male and Female.

csharp
public class GenderModel
{
    public string SelectedGender { get; set; }
    public List<SelectListItem> GenderOptions { get; set; }
}

Step 2: Create a Controller: Next, create a controller to handle the rendering of the view and the processing of form submissions.

csharp
public class GenderController : Controller
{
    public IActionResult Index()
    {
        var model = new GenderModel
        {
            GenderOptions = new List<SelectListItem>
            {
                new SelectListItem { Text = "Male", Value = "Male" },
                new SelectListItem { Text = "Female", Value = "Female" }
            }
        };

        return View(model);
    }

    [HttpPost]
    public IActionResult Index(GenderModel model)
    {
        // Process the selected gender
        string selectedGender = model.SelectedGender;
        
        // Perform further actions or validations
        
        return RedirectToAction("Result");
    }

    public IActionResult Result()
    {
        // Display the result view
        return View();
    }
}

Step 3: Create a View: Now, create a view to display the radio buttons and handle the form submission.

html
@model GenderModel

@using (Html.BeginForm())
{
    <div>
        <label>Select Gender:</label>
        <br />
        @foreach (var genderOption in Model.GenderOptions)
        {
            <label>
                @Html.RadioButtonFor(m => m.SelectedGender, genderOption.Value)
                @genderOption.Text
            </label>
            <br />
        }
    </div>
    <br />
    <input type="submit" value="Submit" />
}

Step 4: Configure Routing: Make sure to configure the routing in RouteConfig.cs or Startup.cs to map the controller and action.

csharp
// RouteConfig.cs
routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Gender", action = "Index", id = UrlParameter.Optional }
);

Explanation:

• The model class GenderModel contains two properties: SelectedGender to hold the selected option and GenderOptions to store the available options as SelectListItem objects.
• In the controller's Index action, an instance of the GenderModel is created and passed to the view.
• The view uses the Html.RadioButtonFor helper method to generate radio buttons for each option. The RadioButtonFor method binds the selected value to the SelectedGender property of the model.
• When the form is submitted, the HttpPost action in the controller is triggered. The selected value can be accessed via the SelectedGender property of the model.
• Additional processing or validation can be performed in the controller action as needed.
• Finally, the Result action can be used to display a result view or perform any further actions.

Conclusion: By following the steps outlined in this documentation, you can easily create radio buttons in ASP.NET MVC using HTML helpers. This allows users to select a single option from a set of choices and enables efficient data handling in your application.