Binding Radiobutton And Radiobuttonlist In Various Way In MVC With Database

Introduction

This article describes how to bind a Radiobuttonlist in various ways with a database.

I know you have seen many articles regarding to Radiobuttonlist but no one is showing how to bind a Radiobuttonlist with a database.

Topic

Radiobutton and Radiobuttonfor binding with Entity Data Model.
Getting the selected value of a radiobutton for saving.
How to show the selected item in an Edit Page.

Various Ways to Bind

Using @html.Radiobutton with Model
Using @html.RadiobuttonFor with Model
Using @html.Radiobutton Direct Binding

Let's Start with SQL First

Here is a snapshot of the table. I am also providing you with a table script in an attachment.

Sql Query

Table View

Done with SQL Server part.

Let's Start Working with Visual Studio

Here I have created a project with the name Radiobuttonlist .

After creating a project I am adding an ADO.NET Entity Data Model to it.

After adding, I have configured an ADO.NET Entity Data Model with my database and I have selected only one table from the database with the name Mobiledata.

If you do not know how to configure an ADO.NET Entity Data Model then here is a link of it to help you.

http://www.c-sharpcorner.com/UploadFile/4d9083/how-to-connect-ado-net-entity-framework-with-mvc-in-simple-s/

Here I named a Connection String MobileDBEntities.

After adding you must see a similar Diagram View.

Model Diagram

My Project View, after adding an ADO.NET Entity Data Model.

Solution Explorer

Here I have completed configuring the ADO.NET Entity Data Model.

And know moving towards adding the Model.

Main Procedure

Adding Model

Right-click on Model and Add Model with name CustomerDetails. After adding the Model inside Model I added the following Properties:

List of Mobiledata (for binding the radiobutton)
SelectedAnswer (for getting the selected value from the database)

CustomerDetails.cs

Model Code

Completed adding Model now towards Controller.

Adding Controller

Add a Controller with the name displaycontroller.

Controller and Model

DisplayController.cs

Controller Code

In this controller I have accessed the Context class (MobileDBEntites).

MobileDBEntities MB = new MobileDBEntities();

Add also the created object of the class CustomerDetails for sending the Model value to the View.

CustomerDetails M = new CustomerDetails();

Passing value.

M.Mobilelist = MB.Mobiledatas.ToList();
.SelectedAnswer = "";
return View(M);

Here in the first object Mobilelist I am passing the entire List of Mobiledata and kept SelectedAnswer blank because we would get the Selected value of Radiobuttonlist when the form is posted.

Now add a View. Right-click inside Actionresult of Index and select Add View with the same Name Index and of strongly-typed with CustomerDetails.

Adding View.

After adding the View, here is a snap for binding the Radiobuttonlist:

View Code

What we are doing in the code above is, iterating through each Mobile and showing a Radio Button and the MobileName text.

We are using the RadioButtonFor HTML helper method to render the radio button.

Now just run you application.

Index View
Here we are complete with the RadiobuttonFor list.

Second way to Binding Radiobutton

Now in the second way we just need to pass the same list to the Radiobutton that we passed for RadiobuttonFor.

Please see the following image for reference.

Using RadioButton

Calling RadioButton

Finally after binding the second Dropdownlist output :

Calling Index View
If you want to check that the values are properly bound then you can use the Firebug tool as in the following:

View using Firebug

Completed with Radiobutton.

Third way to Bind Radiobutton

Radiobutton binding on directly On view.

When directly binding the Radiobutton the radiobutton name should be the same for all the radiobuttons to form a group of Radiobuttons.

IsChecked Property of RadioButton

For the above radiobutton I have given the same name “rbGrp” and given the value as 1,2. The Ischecked property for showing radiobutton is selected or unselected.

Final Output of All Radiobutton

Checking IsChecked Property

Getting Selected value of radiobutton for Saving

You can read using FromCollection or Model. Here you need to create a Post Method. If you want to read all the values of the radiobuttonlist or any HTML control then you will get it in FormCollection.

Post method from displayController:

Code Debugging

Debugging Code

How to Set Selected value of Radiobuttonlist On EditPage

Here I am showing how to show the selected radiobuttonlist value on the Edit Page because this small thing will take time when you are new to this kind of technology.
Using ActionResult

When editing you will get the MobileID and from the MobileID you will find records that match that MobileID and get all the values related to that.

When storing data I will store the selected value of the radiobuttonlist in the database. When editing records I will bind the saved value back to the radiobuttonlist.

M.SelectedAnswer = Convert.ToString(t.MobileID);

// here you will pass your value to show selected value.

For Testing you can pass any value and test.

M.SelectedAnswer = Convert.ToString(3);

It works only for RadioButtonFor.

Output after Editing

View

Enjoy programming and Enjoy Sharing.