Wednesday, June 4, 2014

Include DropDown List Inside WebGrid in MVC 4.

Step-1: Make a Model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.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; }
    }
}

Step-2:Coding on Controller

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

namespace MvcApplication1.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-3:View
@model MvcApplication1.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))))

}




1 comment:

  1. Thnx bro very useful simple example nice explanation. keep up the good work .GOD BLESS.

    ReplyDelete