Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

MVC 4 - Showing Records in DropDown List and Grid View Format

Article:
Viewed:  2098 
Posted On:  6/14/2015 9:08:19 PM 
How we can show our data in drop sown list in MVC 4 and how we can show our data in a Grid View on selecting record from drop down list ? 

In this article I am going to show how we can bind Drop down list in MVC and how we can show records in a Grid View format on selecting records from Drop Down List:

Below is my Data Table in design mode:

1.png

Image 1.

Script of my table is:

CREATE TABLE [dbo].[EmployeeTeam](
          [Employee_ID] [int] IDENTITY(1,1) NOT NULL,
          [Name] [varchar](50) NULL,
          [Manager_ID] [int] NULL,
          [Email] [varchar](50) NULL,
          [Mobile] [varchar](50) NULL,
          [Country] [varchar](50) NULL,
          [IsManager] [bit] NULL,
     CONSTRAINT [PK_EmployeeTeam] PRIMARY KEY CLUSTERED
    (

          [Employee_ID] ASC

     )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, 
      IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]
GO
SET
 ANSI_PADDING OFF

GO

 

Now we will see Data in My Table:

 

 2.png

 

Image 2.

 

Here In this you can I have employee records with its Manager Id. So in drop down I will see only Manage and on selecting Manager from Drop down I will show their team information in Grid view:

Open Visual Studio 2012 -> New Project:

3.png

Image 3.

4.png

Image 4.

Now Right Click on Project's Solution Explorer -> Manage NuGet Packages -> Add jQuery reference.


5.png

Image 5.

Now Right Click on Project's Solution Explorer -> Add New Item

6.png

Image 6.

7.png

Image 7.

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

11.png

Image 11.

Now Right click on Model folder -> Add New Class -> Employee.cs like below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MVC_DropDown_and_GridView.Models
{
    public class Employee
    {
        public List<SelectListItem> ManagerEmployeeList { get; set; }
        public List<Employee> EmployeeTeamGrid { get; set; }
        public int Employee_ID { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Country { get; set; }
        public string Mobile { get; set; }
    }
}

12.png

Image 12.

Now Right Click on Controller Folder -> Add New Empty Controller -> EmployeeController.cs and do below code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_DropDown_and_GridView.Models;
 
namespace MVC_DropDown_and_GridView.Controllers
{
    public class EmployeeController : Controller
    {
        //
        // GET: /Employee/
 
        private EmployeeDBEntities db = new EmployeeDBEntities();

        public ActionResult Index()
        {
            Employee _model = new Employee();
            var managerList = db.EmployeeTeam.ToList().Where(a => a.IsManager.Equals(true));           
 
            _model.ManagerEmployeeList = (from d in managerList
                                   select new SelectListItem
                                   {
                                       Value = d.Employee_ID.ToString(),
                                       Text = d.Name
                                   }).ToList();
 
            var qq = (from e in db.EmployeeTeam
                      select new Employee
                      {
                          Employee_ID = e.Employee_ID,
                          Name = e.Name,
                          Email = e.Email,
                          Country = e.Country,
                          Mobile = e.Mobile
                      }).ToList();
 
            _model.EmployeeTeamGrid = qq;
            return View("Index", _model);
        }
 
        public ActionResult Filter(int Manager_ID)
        {
            int? emp_ID = Convert.ToInt32(Manager_ID);
            List<Employee> y = null;
            var qq = y;
            if (emp_ID == 0)
            {
                 qq = (from e in db.EmployeeTeam
                          select new Employee
                          {
                              Employee_ID = e.Employee_ID,
                              Name = e.Name,
                              Email = e.Email,
                              Country = e.Country,
                              Mobile = e.Mobile
                          }).ToList();
            }
            else
            {
                 qq = (from e in db.EmployeeTeam
                          where e.Manager_ID == emp_ID
                          select new Employee
                          {
                              Employee_ID = e.Employee_ID,
                              Name = e.Name,
                              Email = e.Email,
                              Country = e.Country,
                              Mobile = e.Mobile
                          }).ToList();
           
}
            return PartialView("_ShowManagerTeam", qq);
       }
    }
}


Now Right click on Index Action Method add View -> Index.cshtml

@model MVC_DropDown_and_GridView.Models.Employee
@{
    ViewBag.Title = "MVC 4 - Showing Data in DropDown And Grid View";
}
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/StyleSheet1.css" rel="stylesheet" />
<table style="width: 90%; text-align: center; background-color: #ADD8E6; padding: 10px;">
    <tr>
       <td style="padding: 10px; text-align: center; height:30px; background-color:#FF0000;
          font-size:20pt; font-weight:bold; color:white;">Select Manager #
            @Html.DropDownList("lstManagerEmployee", Model.ManagerEmployeeList)
        </td>
    </
tr>

    <tr>
        <
td>
            <
div id="employeeListGrid">
                @Html.Partial("_ShowManagerTeam", Model.EmployeeTeamGrid)
            </div>
        </td>
     </
tr>
</table>

<script>
    $(document).ready(function () {
        $("#lstManagerEmployee").append($("<option></option>").val("0").html("All Employee"));
        $("#lstManagerEmployee").val("0");
    });
</script>

<
script type="text/javascript">
    $('#lstManagerEmployee').change(function (e) {
        e.preventDefault();
        var url = '@Url.Action("Filter")';
        $.get(url, { Manager_ID: $(this).val() }, function (result) {
            $('#employeeListGrid').html(result);
        });
    });
</script>

13.png 

Image 13.

Now Right click on Views -> Employee  &  ADD a Partial View (_ShowManagerTeam.cshtml)

<div id="gridposition" style="width: 100%;">
    @{
        var grid1 = new WebGrid(source: Model, canPage: true, rowsPerPage: 10, ajaxUpdateContainerId: "gridContent"); 

        @grid1.GetHtml(mode: WebGridPagerModes.All,
            tableStyle: "gridTable",
            headerStyle: "gridHead",
            footerStyle: "gridFooter",
            rowStyle: "gridRow",
            alternatingRowStyle: "gridAltRow",
            htmlAttributes: new { id = "positionGrid" },
            fillEmptyRows: false,
            columns: grid1.Columns(
             grid1.Column("Employee_ID", header: "Employee_ID"),
             grid1.Column("Name", header: "Name"),
             grid1.Column("Email", header: "Email"),
             grid1.Column("Country", header: "Country "),
             grid1.Column("Mobile", header: "Mobile")))
    }
</div>

14.png


Image 14.

To design my web grid I added a style sheet:
 

.gridTable {margin: 5px;padding: 10px;border: 1px #c8c8c8 solid;
            border-collapse: collapse;min-width: 550px;
             background-color: #fff;color: #fff; width:100%;}
.gridHead th{font-weight: bold;background-color: #030D8D;
             color: #fff;padding: 10px; text-align:left;}
.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
.gridHead a:hover {text-decoration:underline;}
.gridTable tr.gridAltRow{background-color: #efeeef;}
.gridTable tr:hover{background-color: #f6f70a;}
.gridAltRow td{padding: 10px;margin: 5px; color: #333;text-align:left;}
.gridRow td{padding: 10px;color: #333text-align:left;}
.gridFooter td{padding: 10px; color: #ffffff;font-size: 12pt;
               text-align: center; background-color:#228B22;}
.gridFooter a{font-weight: bold;color: blue; border: 2px #f00 solid;}


15.png

Image 15.

Now run your application:

16.png

Image 16.

17.png

Image 17.

18.png

Image 18.

19.png

Image 19.


20.png

Image 20.

21.png

Image 21.


22.png

Image 22.

23.png

Image 23.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us