How to Bind RadioButton from Database in Asp.Net Core MVC Using C#.Net

How to bind radio button list from sql server database in asp.net core mvc with entity framework using c#.net. Get Selected value in controller.
In today's article I will show a simple tutorial with example that how you can bind a radio button list from database with entity framework and get the selected radio button value at controller end in your asp.net core mvc 8 applications at controller end using C#.net. So, for this article first we will create a table in ms sql server database and add some record in it. 

Project Table

In above table we are having project detail which we are going to bind with radio button list. After this we will create a new asp.net core mvc application using c#.net. Now let's add a model class file and  the below mention property in it.

public class EmployeeModel
{
    public int MySselectedProjectId { get; set; }
    public List<EmpProjectDetail> ProjectDetailList { get; set; }
}
public class EmpProjectDetail
{
    public int Id { get; set; }
    public string ProjectName { get; set; }
} 
In above I have taken two class one for employee model and second for employee model. In employee model class i have taken a property named as "MySselectedProjectId". This we will use to get the selected radio button value at controller end. Other one is for project list which we will bind with radio button to display the radio button list. Now let's add a controller and in this add an action metod named as Index. 
[HttpGet]
public IActionResult Index()
{
    EmployeeModel employeeModel = new EmployeeModel();
    employeeModel.ProjectDetailList = new List<EmpProjectDetail>();
    //Get data from DB
    EmployeeContext employeeContext = new EmployeeContext();
    var data = employeeContext.Projects.ToList();
    foreach (var item in data)
    {
        employeeModel.ProjectDetailList.Add(new EmpProjectDetail { Id = item.Id, ProjectName = item.ProjectName });
    }
    return View(employeeModel);
} 
In above code I have created the object of EmployeeModel and in next I have created the object of project list. In next line I have created the object of Employee DB context to get the project detail from the database. With the help of object of employee context, we will get the detail of project, and finally I have added the project detail in the model object. Finally, I have returned the object of employee model. Now we will create the view and the below code.
 @model EmployeeModel
@{
	ViewData["Title"] = "Index";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
	<table width="200px">
		@foreach (var item in Model.ProjectDetailList)
		{
			<tr>
				<td>
					@Html.RadioButtonFor(m => Model.MySselectedProjectId, item.Id, new { @class = "form-check", @Id = item.Id })
				</td>
				<td>
					<label for="@item.Id">@item.ProjectName</label>
				</td>
			</tr>
		}
	</table>
	<br />
	<input type="submit" value="Submit" />
	<span style="color:red;font-weight:bold;">@ViewBag.SelectedItem</span>
} 
In above code I have added the reference of the EmployeeModel class. After that I have defined the form tag. To display the radio button, I have used foreach loop and with the help of @Html.RadioButtonFor control to display the radio button and label tag to display the text of the radio button. I have used input button of submit type to post the form and get the value at controller end. In last line I have used viewbag to display the user selected value. now let's create an HttpPost method at controller end.
[HttpPost]
public IActionResult Index(EmployeeModel employeeModel)
{
    employeeModel.ProjectDetailList = new List<EmpProjectDetail>();
    //Get data from DB
    EmployeeContext employeeContext = new EmployeeContext();
    var data = employeeContext.Projects.ToList();
    foreach (var item in data)
    {
        employeeModel.ProjectDetailList.Add(new EmpProjectDetail { Id = item.Id, ProjectName = item.ProjectName });
    }
    ViewBag.SelectedItem = "You have Selected Porject Id: " + employeeModel.MySselectedProjectId;
    return View(employeeModel);
} 
In above code I have passed the EmployeeModel as a parameter. In next list I have created the object of Project List. I have written code to get the data from the database. and the property MySselectedProjectId will provide us the selected value. Now we have done. Let's run the code and check the output.
Radio Button List
Now let's select "Project 3" and click on submit button.  Ones we click break point will hit. Here is the controller code. 
Selected Value

Here is we can see the selected radio button is 3. Now press F5 to check the output. 

Selected Item

Post a Comment