Include DropDown List Inside WebGrid in MVC

Description:-

In this example we explain that how to bind Dropdownlist inside WebGrid or mvc webgrid in mvc4 or how to populate dropdownlist inside webgrid in asp.net with mvc.

Here we explain that how to include dropdownlist in webgrid in mvc.previously we already explain many example of bind dropdownlist in gridview in asp.net but in mvc application how we can manage webgrid with dropdownlist inside webgrid.

Here in this example we have one table called employee and have two fields like empname and married status. When page is load the data of employees table can be bind in webgrid with empname in label and married status is bind on the dropdownlist inside the webgrid.

Dynamically Bind data in Ajax Accordion Panel Ajax Accordion panel Example in asp.net

how to Restrict the size of file upload when upload by user restrict the size of file upload control in asp.net

Step 1:- Create Employee_Detail Class in Model Folder.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace DropdowninWebgrid.Models

{

    public class Employee_Detail

    {

        public List<Employee> EmployeeModel { get; set; }

    }

    public class Employee

    {

        public string Emp_Name { get; set; }

        public string Emp_Address { get; set; }

        public SelectList  Emp_MerritalStatus { get; set; }

    }

    public class Status

    {

        public int ID { get; set; }

        public string StatusName { get; set; }

    }

}

Step 2:- Create HomeController Class in Controller Folder. 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using WebGridList.Models;

namespace DropdowninWebgrid.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            Employee_Detail empobj = new Employee_Detail();

            empobj.EmployeeModel = GetmaterialstatusDetail();

            return View(empobj);

        }

        public List<Employee> GetmaterialstatusDetail ()

        {

            List<Employee> emp_model = new List<Employee>();

           emp_model.Add(new Employee {Emp_Name = "kirit", Emp_Address

 = "Ahmedabad", Emp_MerritalStatus

 = GetStatus() });

           emp_model.Add(new Employee { Emp_Name = "pintu", Emp_Address

 = "Rajkot", Emp_MerritalStatus

 = GetStatus() });

           emp_model.Add(new Employee { Emp_Name = "Rahul", Emp_Address

 = "Dhoraji", Emp_MerritalStatus

 = GetStatus() });

         

            return emp_model;

        }

        public SelectList GetStatus()

        {

            List<Status> status = new List<Status>();

            status.Add(new Status { ID = 1, StatusName = "Married" });

            status.Add(new Status { ID = 2, StatusName = "Unmarried" });

            SelectList objinfo = new SelectList(status, "ID", "StatusName");

            return objinfo;

        }

    }

} 

 Step 3:- Create Inhdex.CSHtml View in View Folder.

@model DropdowninWebgrid.Models.Employee_Detail

@{

    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("Emp_Name", "Emp_Name"),

        g_style.Column("Emp_Address", "Emp_Address"),

                g_style.Column(header: "Status", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.EmployeeModel[0].Emp_MerritalStatus

))))

}