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:

Step 2

Create a Model class as in the following:

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace MvcApplication5.Models
  6. {
  7. public class EmployeeModel
  8. {
  9. public List<Employee> EmployeeModelcollection { get; set; }
  10. }
  11. public class Employee
  12. {
  13. public string Name { get; set; }
  14. public string Contact { get; set; }
  15. public string City { get; set; }
  16. }
  17. }

Step 3

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

Add the following code.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using MvcApplication5.Models;
  7. namespace MvcApplication5.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. public ActionResult Index()
  12. {
  13. EmployeeModel obj = new EmployeeModel();
  14. obj.EmployeeModelcollection = GetEmployeeDetail();
  15. return View(obj);
  16. }
  17. public List<Employee> GetEmployeeDetail()
  18. {
  19. List<Employee> objemployee = new List<Employee>();
  20. objemployee.Add(new Employee { Name = "Jhon", City = "Kanpur", Contact = "6780757865" });
  21. objemployee.Add(new Employee { Name = "Smith", City = "Lucknow", Contact = "6785439872" });
  22. objemployee.Add(new Employee { Name = "Vikram", City = "Delhi", Contact = "7854098123" });
  23. objemployee.Add(new Employee { Name = "Malini", City = "Varansi", Contact = "5674398034" });
  24. objemployee.Add(new Employee { Name = "Tanya", City = "Jaipur", Contact = "9087654439" });
  25. objemployee.Add(new Employee { Name = "Varun", City = "Gurgao", Contact = "2345678902" });
  26. return objemployee;
  27. }
  28. }
  29. }

Step 4

In the View write some code as in the following:

Add the following code:

  1. @model MvcApplication5.Models.EmployeeModel
  2. @{
  3. ViewBag.Title = "Index";
  4. }
  5. <style type="text/css">
  6. <style type ="text/css" >
  7. .gridTable {
  8. margin: 6px;
  9. padding: 20px;
  10. border: 1px #c8c8c8 solid;
  11. border-collapse: collapse;
  12. min-width: 550px;
  13. background-color: #c8c8c8;
  14. color: #c8c8c8;
  15. }
  16. .gridHead th {
  17. font-weight: bold;
  18. background-color: #030D8D;
  19. color: #c8c8c8;
  20. padding: 10px;
  21. }
  22. .gridHead a:link, .gridHead a:visited, .gridHead a:active, .gridHead a:hover {
  23. color: #c8c8c8;
  24. }
  25. .gridHead a:hover {
  26. text-decoration:dotted;
  27. }
  28. .gridTable tr.gridAltRow {
  29. background-color:#bb7575;
  30. }
  31. .gridAltRow td {
  32. padding: 20px;
  33. margin: 6px;
  34. color: Blue;
  35. }
  36. .gridRow td {
  37. padding: 10px;
  38. color: Blue;
  39. }
  40. .gridFooter td {
  41. padding: 10px;
  42. background-color: #c7d1d6;
  43. color: Blue;
  44. font-size: 12pt;
  45. text-align: center;
  46. }
  47. .gridFooter a {
  48. font-weight: bold;
  49. color: Blue;
  50. border: 1px Blue solid;
  51. }
  52. </style>
  53. <table width="100%" cellpadding="5" cellspacing="5" border="0">
  54. <tr class="hyperlink">
  55. <td style="color: Blue;">
  56. @{
  57. var grid = new WebGrid(source: Model.EmployeeModelcollection, rowsPerPage: 10);
  58. }
  59. @grid.GetHtml(
  60. tableStyle: "gridTable",
  61. headerStyle: "gridHead",
  62. footerStyle: "gridFooter",
  63. rowStyle: "gridRow",
  64. alternatingRowStyle: "gridAltRow",
  65. columns: grid.Columns(
  66. grid.Column("Title", header: null, format: @<text>
  67. <input type="radio" id="rbtemployee" onclick="javascript:SingleRadiobuttonSelection(this.id)" /></text>),
  68. grid.Column("Name", "Name"),
  69. grid.Column("City", "City"),
  70. grid.Column("Contact", "Contact")
  71. )
  72. )
  73. </td>
  74. </tr>
  75. </table>

Step 5

Execute the application. It looks like this:

r5.jpg

Here we see that all the radio buttons are selected.

r6.jpg

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:

r7.jpg