Thomas
Thomas

Reputation: 34188

How to capture which radio button is checked when page submit ASP.Net MVC

here is my code which display two radio button from my model. the main problem is when i am submitting the form then model sex property is getting null where as i select a radio button before form submit. please help me to find out the problem.

model class

public class StudentModel
    {

        [Required(ErrorMessage = "First Name Required")] // textboxes will show
        [Display(Name = "First Name :")]
        [StringLength(5, ErrorMessage = "First Name cannot be longer than 5 characters.")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "Last Name Required")] // textboxes will show
        [Display(Name = "Last Name :")]
        [StringLength(5, ErrorMessage = "Last Name cannot be longer than 5 characters.")]
        public string LastName { get; set; }

        [Required(ErrorMessage = "Sex Required")]
        [Display(Name = "Sex :")]
        public int SexID { get; set; }

        public List<Sex> Sex { get; set; }

    }

    public class Sex
    {
        public string ID { get; set; }
        public string Type { get; set; }
    }

controller class

public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            var student = new StudentModel
            {
                FirstName = "Rion",
                LastName = "Gomes",

                //I think the best way to populate this list is to call a service here.
                Sex = new List<Sex>
                {
                    new Sex{ID="1" , Type = "Male"}, 
                    new Sex{ID="2" , Type = "Female"}
                }
            };

            return View(student );
        }

        [HttpPost]
        public ActionResult Index(StudentModel model)
        {
            if (ModelState.IsValid)
            {
                //TODO: Save your model and redirect 
            }

            //Call the same service to initialize your model again (cause we didn't post the list of sexs)
            return View(model);
        }
}

view code

@model MvcRadioButton.Models.StudentModel

@Html.BeginForm()
{
    <div>
        @Html.LabelFor(model => model.FirstName)
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>
    <div>
        @Html.LabelFor(model => model.LastName)
        @Html.EditorFor(model => model.LastName)
        @Html.ValidationMessageFor(model => model.LastName)
    </div>
    @{ 
        foreach (var sex in Model.Sex)
        {
            <div>
                @Html.RadioButtonFor(model => model.Sex, new { id = "sex" + sex.ID })
                @Html.Label("sex" + sex.ID, sex.Type)
            </div>
        }
    }

    <input type="submit" value="Submit" />
}

if possible please run my code and tell me how to achieve my goal and also if anyone think this situation can be handle in better way just change the code then please advise me because i am newbie for MVC.

Upvotes: 5

Views: 16470

Answers (1)

Matija Grcic
Matija Grcic

Reputation: 13371

ViewModel

public class StudentModel
    {
        //properties
        public bool Sex { get; set; }
    }

View

@using (Html.BeginForm())
{
    @Html.RadioButtonFor(model => model.Sex, "false", new { id = "male" }) 
    @Html.Label("male", "Male")

    @Html.RadioButtonFor(model => model.Sex, "true", new { id = "female" })
    @Html.Label("female", "Female")
    <button type="submit">OK</button>
}

Controller

[HttpPost]
    public ActionResult Index(StudentModel model)
    {
        //you can modify "model" however you want here
        return Content("Sex: " + model.Sex);
    }

Upvotes: 3

Related Questions