Generating a RadioButtonList Control in MVC Using HTML Helpers

Introduction

This article shows how to use a RadioButtonList control in MVC using a HTML helper and binding with LINQ to SQL.

Database structure

Create a table in a database with the name department.

The following is the create table code for the department table:

CREATE TABLE [dbo].[department]
 (
   [id] [int] NULL,
   [name] [varchar](50) NULL,
  [isselectd] [int] NULL
 )

Adding a LINQ to SQL Class

Step 1

Right-click on the project and select "Add new item", then select Data from the templates.

Step 2

Choose "LINQ to SQL classes" from the list and provide a name. Now after clicking on Add, you can see the .dbml file in the project.

Step 3

Drag the department tables from the database in the Server Explorer.



Create model class with name college

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace mvcmodelfuncation.Models
{
    public class college
    {
        public string selectdepartment { set; get; }
          public   List<department> depatrmts
        {
            get {

                DataClasses1DataContext db = new  DataClasses1DataContext();
                return db.departments.ToList();
            }

        }
    }
}

In the preceding code we have two properties, selectdepartment and depatrmts. The depatrmts table is a list type, it gets the lists of departments from the database.

Create home controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvcmodelfuncation.Models;


namespace mvcmodelfuncation.Controllers
{
    public class homeController : Controller
    {
        //
        // GET: /home/

        DataClasses1DataContext db = new DataClasses1DataContext();

        [HttpGet]
        public ActionResult deprt()
        {
            college cc = new college();
           return View(cc);

        }
        [HttpPost]
        public string  deprt(college cs)
        {
            if (string.IsNullOrEmpty(cs.selectdepartment))
            {

                return "you did not select and department";
            }
            else
            {
                return "you selected department with id =" + cs.selectdepartment;

            }
        }


    }
}

In the preceding code we have two Actionresult methods, drpart and drpart (college cs), drpart is a [httpget] type and drpart (college cs) is a [httppost].

Create a view for showing the radiobuttonlist

Right-click on the Index ActionResult method and select Add View. After selecting Add View, a dialog box will open. The view name is deprt by default. Now select your model class and click on the OK button.

@model mvcmodelfuncation.Models.college

@{
    ViewBag.Title = "deprt";
}

<h2>deprt</h2>

@using (Html.BeginForm())
{

    foreach (var depart in  Model.depatrmts)
    {

    @Html.RadioButtonFor(m=>m.selectdepartment,depart.id)
    @depart.name
    <br />

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

}

The following is the output of the preceding code.

If we will click submit button without select any radiobutton let's see the output.

If we will click the submit button with select any radiobutton let's see the output.

 
Arrange the RadioButton vertically 

@model mvcmodelfuncation.Models.college

@{
    ViewBag.Title = "deprt";
}

<h2>deprt</h2>

@using (Html.BeginForm())
{

    foreach (var depart in  Model.depatrmts)
    {

    @Html.RadioButtonFor(m=>m.selectdepartment,depart.id)
    @depart.name

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

}

 The following is the output of the preceding code.

Summary

In this article we learned how to use a RadioButtonList control in MVC using a HTML helper and binding with LINQ to SQL and arrange the RadioButtonList vertically and horizontally.