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

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

Various Ways to Bind

1. Using @html.Radiobutton with Model
   
   
    
2. Using @html.RadiobuttonFor with Model
   
   
    
3. 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.

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.

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

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:

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

CustomerDetails.cs

Completed adding Model now towards Controller.

Adding Controller

Add a Controller with the name displaycontroller.

DisplayController.cs

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.



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

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.

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.

Finally after binding the second Dropdownlist output :

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

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.

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

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:

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.

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

Enjoy programming and Enjoy Sharing.