In ASP.NET MVC, a Radio Button is used when we want the user to select only ONE option from multiple choices.

Example:

• Select Gender
• Select Payment Method
• Select Status (Active/Inactive)

1. What is Radio Button in MVC?
Radio button allows:

• Only one selection
• Easy and clear choice

Html Helper:
@Html.RadioButtonFor()

2. Why We Use Radio Button?
We use radio buttons when:

• Only one option is allowed
• Fixed choices are available
• Need simple UI selection

Checkbox = multiple select
Radio Button = single select

3. Static Radio Button (Manual Data)
Model
public class Student
{
    public string Gender { get; set; }
}

View
@model Student

@Html.RadioButtonFor(m => m.Gender, "Male") Male
@Html.RadioButtonFor(m => m.Gender, "Female") Female
@Html.RadioButtonFor(m => m.Gender, "Other") Other

Explanation

• Same property Gender
• Only one value selected
• Selected value will bind automatically

4. Dynamic Radio Button (From SQL Server)
Step 1: Table Example
Gender Table
------------
Id     Name
1      Male
2      Female
3      Other

Step 2: Model
public class Gender
{
    public int Id { get; set; }
    public string Name { get; set; }
}

ViewModel
public class StudentViewModel
{
    public int SelectedGender { get; set; }
    public List<Gender> Genders { get; set; }
}

Step 3: Controller
public ActionResult Create()
{
    StudentViewModel model = new StudentViewModel();

    using (MyDbContext db = new MyDbContext())
    {
        model.Genders = db.Genders.ToList();
    }

    return View(model);
}

Step 4: View
@model StudentViewModel

@foreach (var item in Model.Genders)
{
    <div>
        <input type="radio"
               name="SelectedGender"
               value="@item.Id" /> @item.Name
    </div>
}

Step 5: POST Method
[HttpPost]
public ActionResult Create(StudentViewModel model)
{
    int selectedId = model.SelectedGender;

    return View();
}

Explanation

• Data comes from database
• name must be same → only one selection
• MVC binds selected value automatically

5. Set Selected Radio Button
@Html.RadioButtonFor(m => m.Gender, "Male", new { @checked = "checked" })

OR using model:
model.Gender = "Male";

6. jQuery with Radio Button
Get Selected Value
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $("input[name='SelectedGender']").change(function () {
        var value = $(this).val();
        console.log("Selected: " + value);
    });
</script>

Explanation
.change() → triggered when selection changes
.val() → get selected value

7. Custom Radio Button (Static + Dynamic)
View
<div>
    <input type="radio" name="SelectedGender" value="0" /> Select None
</div>

@foreach (var item in Model.Genders)
{
    <div>
        <input type="radio"
               name="SelectedGender"
               value="@item.Id" /> @item.Name
    </div>
}

Explanation

• First option = static
• Others = from database

Only one can be selected

8. Important Points

• Same name is required
• Use ViewModel for dynamic data
• Radio button allows single selection
• Use jQuery for events

9. Common Mistakes

• Different name for radio buttons
• Not binding with model
• Forgetting to set value
• Using checkbox instead of radio

10. Conclusion
Radio Button is very useful when only one option is required.

You learned:

• Static radio button
• Dynamic radio button (SQL Server)
• jQuery usage
• Custom radio button