Include DropDown List Inside WebGrid in Web API

Introduction

This article describes including the Dropdown list in the WebGrid in the Web API. The WebGrid is used for displaying the data in the table form. It provides the custom formatting for the tabular data. Here we use the WebGrid in which we include the Dropdown list.

The following is the procedure for creating the application.

Step 1

First create a Web API application using the following:

• Start Visual Studio 2013.
• From the Start window select "New Project".
• From the new Project window select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio 2012".
• 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

Now add a Model class.

• 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 on the "Add" button.

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebGridList.Models
{
   public class EmployeeInformation
    {
        public List<Employee> EmployeeModel { get; set; }
    }
    public class Employee
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public SelectList MerritalStatus { get; set; }
    }
    public class Status
    {
        public int ID { get; set; }
        public string StatusName { get; set; }
    }
}

In the code above here we added a line of code  "public SelectList MerritalStatus { get; set; }" in which "selectList" describes the list of the items in which the user selects an item.

Step 3

Now in the "Controller" we add some code 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 WebGridList.Models;
namespace WebGridList.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            EmployeeInformation empobj = new EmployeeInformation();
            empobj.EmployeeModel = MerryDetail();
            return View(empobj);
        }
        public List<Employee> MerryDetail()
        {
            List<Employee> objempmodel = new List<Employee>();
            objempmodel.Add(new Employee { Name = "Employee1", Address = "Address1", MerritalStatus = GetStatus() });
            objempmodel.Add(new Employee { Name = "Employee2", Address = "Address2", MerritalStatus = GetStatus() });
            objempmodel.Add(new Employee { Name = "Employee3", Address = "Address3", MerritalStatus = GetStatus() });
            objempmodel.Add(new Employee { Name = "Employee4", Address = "Address4", MerritalStatus = GetStatus() });
            objempmodel.Add(new Employee { Name = "Employee5", Address = "Address5", MerritalStatus = GetStatus() });
            return objempmodel;
        }
        public SelectList GetStatus()
        {
            List<Status> status = new List<Status>();
            status.Add(new Status { ID = 1, StatusName = "Merried" });
            status.Add(new Status { ID = 2, StatusName = "Unmerried" });
            SelectList objinfo = new SelectList(status, "ID", "StatusName");
            return objinfo;
        }
    }
}

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 WebGridList.Models.EmployeeInformation
@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    .gridTable {
        margin: 4px;
        padding: 10px;
        border: 1px #333 solid;
        border-collapse: collapse;
        min-width: 550px;
        background-color: #999;
        color: #999;
    }
    .gridHead th {
        font-weight: bold;
        background-color: #ffd800;
        color: #333;
        padding: 10px;
    }
    .gridHead a:link, .gridHead a:visited, .gridHead a:active, .gridHead a:hover {
        color: #333;
    }
    .gridHead a:hover {
        text-decoration: underline;
        background-color:#f67f7f
    }
    .gridTable tr.gridAltRow {
       background-color: #c7d1d6;
    }
    .gridTable tr:hover {
        background-color: #f67f7f;
    }
    .gridAltRow td {
        padding: 10px;
        margin: 5px;
        color: #333;
    }
    .gridRow td {
        padding: 10px;
        color: #333;
    }
    .gridFooter td {
        padding: 10px;
        background-color: #c7d1d6;
        color: #999;
        font-size: 12pt;
        text-align: center;
    }
    .gridFooter a {
        font-size:medium;
        font-weight: bold;
        color: #333;
        border: 1px #333 solid;
    }
</style>
@{
  var g_style = new WebGrid(source: Model.EmployeeModel,
    rowsPerPage: 10);
    @g_style.GetHtml(
        tableStyle: "gridTable",
        headerStyle: "gridHead",
        footerStyle: "gridFooter",
        rowStyle: "gridRow",
        alternatingRowStyle: "gridAltRow",
        columns: g_style.Columns(
        g_style.Column("Name", "Name"),
        g_style.Column("Address", "Address"),
        g_style.Column(header: "Status", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.EmployeeModel[0].MerritalStatus))))
}

Step 5

Execute the application. The output will be:

Select the dropdown list.