Let’s suppose that we have a Model for the tbl_department and we want to render a radio button list for all departments. Take the following model as an example.
In the following article you will see that how to create a Radio button list in MVC. The article use the EmployeeDb sample SQL database( Download: scripts to create the EmlpoyeeDb SQL database) and MVC 4 framework with Razor engine view.
How to start with example
Start the MVC 4 web application with the Internet template and add the entity framework model from the EmployeeDb SQL database.
Let’s suppose that we have a Model for the tbl_department and we want to render a radio button list for all departments. Take the following model as an example.
public partial class tbl_department { public int department_id { get; set; } public string department_name { get; set; } public Nullable<decimal> max_salary { get; set; } }
In the HomeController Index() action method that returns the Model.
public ActionResult Index() { ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; _dbcontext = new EmployeeDatabaseEntities(); // var list = new _dbcontext.tbl_Employee> var model = _dbcontext.tbl_department; return View(model.ToList<tbl_department>()); }
And now see the Index.cshtml view:
We create the Radio type input control for every department along with the department name label. For the behavior of Radio button List we need to make uncheked all radio buttons in the ‘radioList‘ div element on the check event of a certain radio button, so that we write a JavaScript function that will unchecked all radio button except checked radio button.
@model List<MvcApplication1.tbl_department> @{ ViewBag.Title = "Home Page"; } @section featured { <section class="featured"> <div class="content-wrapper"> <hgroup class="title"> <h1>@ViewBag.Title.</h1> <h2>@ViewBag.Message</h2> </hgroup> </div> </section> } <div> </div> <table> <tr><td> <div id="radioList"> @for (int i = 0; i < Model.Count; i++) { @Html.LabelFor(a => a[i].department_name, Model[i].department_name) @Html.RadioButtonFor(a => a[i].department_name, Model[i].department_id, new { id = "radio" + Model[i].department_id, onclick = "uncheckAll(this);" }) } </div> </td></tr> <tr> <td> <input type="button" value="Save All" id="btnsave" /> </td></tr> </table> <script src="/Scripts/jquery-1.7.1.js"></script> <script> function uncheckAll(element) { var div = document.getElementById("radioList"); var radios = div.getElementsByTagName("input"); for (var i = 0; i <= radios.length - 1; i++) { radios[i].checked = ""; } element.checked = "checked"; } </script>
For the addition you can also create the extended class for the radio button list. I hope you can see the another article for this. Thanks..