Bind the Radio Button With the WebGrid in Web API

Introduction

This article describes how to bind the WebGrid with a Radio Button in the Web API.

Procedure for creating the application.

Step 1

First create an Web API application as in the following:

• Start Visual Studio 2013.
• From the Start window select "New Project".
• From the new project window Select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio2012".
• Select "ASP.NET MVC4 Web Application" and click the "Ok" button.
  
  
  
  
• From the "MVC4 project" window select "Web API".
  
  
  
  
• Click the "OK" button.

Step 2

Create a Model class as in the following:

• In the Solution Explorer.
• Right-click on the "Model" folder.
• Select "Add" -> "Class".
• From the add item window select "Installed" -> "Visual C#".
  
  
  
  
• Select "Class" and click the "Add" button.

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication5.Models
{
    public class EmployeeModel
    {
         public List<Employee> EmployeeModelcollection { get; set; }
    }
    public class Employee
    {
        public string Name { get; set; }
        public string Contact { get; set; }
        public string City { get; set; }
    }
}

Step 3

In the "HomeController" write some code for the details of the employee as in the following:

• In the "Solution Explorer".
• Expand the "Controller" folder.
• Select the "HomeController".
  
  
  

Add the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication5.Models;
namespace MvcApplication5.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            EmployeeModel obj = new EmployeeModel();
            obj.EmployeeModelcollection = GetEmployeeDetail();
            return View(obj);
        }
        public List<Employee> GetEmployeeDetail()
        {
            List<Employee> objemployee = new List<Employee>();
            objemployee.Add(new Employee {  Name = "Jhon",  City = "Kanpur", Contact = "6780757865" });
            objemployee.Add(new Employee { Name = "Smith", City = "Lucknow", Contact = "6785439872" });
            objemployee.Add(new Employee { Name = "Vikram", City = "Delhi", Contact = "7854098123" });
            objemployee.Add(new Employee { Name = "Malini", City = "Varansi", Contact = "5674398034" });
            objemployee.Add(new Employee { Name = "Tanya", City = "Jaipur", Contact = "9087654439" });
            objemployee.Add(new Employee { Name = "Varun", City = "Gurgao", Contact = "2345678902" });
            return objemployee;
        }
    }
}

Step 4

In the View write some code as in the following:

• In the "Solution Explorer".
• Expand the "Views" folder.
• Select "Home"  -> "Index.cshtml".
  
  
  

Add the following code:

@model MvcApplication5.Models.EmployeeModel
@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    <style type ="text/css" >
    .gridTable {
        margin: 6px;
        padding: 20px;
        border: 1px #c8c8c8 solid;
        border-collapse: collapse;
        min-width: 550px;
        background-color: #c8c8c8;
        color: #c8c8c8;
    }
    .gridHead th {
        font-weight: bold;
        background-color: #030D8D;
        color: #c8c8c8;
        padding: 10px;
    }
    .gridHead a:link, .gridHead a:visited, .gridHead a:active, .gridHead a:hover {
        color: #c8c8c8;
    }
    .gridHead a:hover {
        text-decoration:dotted;
    }
    .gridTable tr.gridAltRow {
        background-color:#bb7575;
    }
    .gridAltRow td {
        padding: 20px;
        margin: 6px;
        color: Blue;
    }
    .gridRow td {
        padding: 10px;
        color: Blue;
    }
    .gridFooter td {
        padding: 10px;
        background-color: #c7d1d6;
        color: Blue;
        font-size: 12pt;
        text-align: center;
    }
    .gridFooter a {
        font-weight: bold;
        color: Blue;
        border: 1px Blue solid;
    }
</style>
<table width="100%" cellpadding="5" cellspacing="5" border="0">
    <tr class="hyperlink">
        <td style="color: Blue;">
            @{
                var grid = new WebGrid(source: Model.EmployeeModelcollection, rowsPerPage: 10);
            }
            @grid.GetHtml(
                         tableStyle: "gridTable",
                         headerStyle: "gridHead",
                         footerStyle: "gridFooter",
                         rowStyle: "gridRow",
                         alternatingRowStyle: "gridAltRow",
                            columns: grid.Columns(
                            grid.Column("Title", header: null, format: @<text>
                                <input type="radio" id="rbtemployee" onclick="javascript:SingleRadiobuttonSelection(this.id)" /></text>),
                                     grid.Column("Name", "Name"),
                                 grid.Column("City", "City"),
                                     grid.Column("Contact", "Contact")
              )
         )
        </td>
    </tr>
</table>

Step 5

Execute the application. It looks like this:

Here we see that all the radio buttons are selected.

If you want to select only one radio buttons then perform the following changes in the index.cshtml file.

We add the name tag in the radio button.

<input type="radio" id="rbtemployee" name="employee" onclick="javascript:SingleRadiobuttonSelection(this.id)" /></text>),

Now execute the application and the output will be: