Sahil Sharma
Sahil Sharma

Reputation: 1899

Html Helper Dropdown List doesn't render the list of items in the dropdown

I'm trying to create a dropdown list in MVC with the Html Helper (Html.DropdownList) using the following code, but the list is not getting rendered on the UI. I have tried to bind the DropDownList with an IEnumerable collection of SelectListItems but not getting the exact result. Can someone point out the missing link. Here is the fiddler https://dotnetfiddle.net/26h7xa for the code and below is the code:

The model for the project:

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
    public class Employee
    {
        public Guid Id { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Salary { get; set; }

        public string Designation { get; set; }

        public DateTime DateOfJoining { get; set; }

        public bool Status { get; set; }
    }    
}

Controller:

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(EmployeeData());
        }


        public IEnumerable<Employee> EmployeeData()
        {
            IEnumerable<Employee> employee = new List<Employee>
            {
                new Employee { Id = Guid.NewGuid(), FirstName = "Sahil", LastName = "Sharma", Designation = "Software Engineer", Salary = "1000", DateOfJoining = DateTime.Now, Status =true },
                new Employee { Id = Guid.NewGuid(), FirstName = "Sahil", LastName = "Sharma", Designation = "Software Engineer", Salary = "1000", DateOfJoining = DateTime.Now, Status = false },
                new Employee { Id = Guid.NewGuid(), FirstName = "Sahil", LastName = "Sharma", Designation = "Software Engineer", Salary = "1000", DateOfJoining = DateTime.Now, Status =true },
                new Employee { Id = Guid.NewGuid(), FirstName = "Sahil", LastName = "Sharma", Designation = "Software Engineer", Salary = "1000", DateOfJoining = DateTime.Now, Status =true },
                new Employee { Id = Guid.NewGuid(), FirstName = "Sahil", LastName = "Sharma", Designation = "Software Engineer", Salary = "1000", DateOfJoining = DateTime.Now, Status =true },
            };
            return employee;
        }
    }
}

View:

@using HelloWorldMvcApp
@model IEnumerable<Employee>

@{ Layout = null; }

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Html Dropdown List</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="form-inline">
            <div class="col-md-12 col-lg-12">
                <div class="col-md-4 col-lg-4">
                    <label class=""> Select Employee: </label>
                </div>

                <div class="col-md-8 col-lg-8">
                    @{
                        var employee = Model;
                        IEnumerable<SelectListItem> list = from e in employee select new SelectListItem { Selected = true, Text = Convert.ToString(e.Id), Value = String.Concat(e.FirstName, " ", e.LastName) };

                        Html.DropDownList("ddlEmployee", new SelectList(list));
                    }
                </div>
            </div>
        </div>
    </div>

    <!-- JS includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</body>
</html>

Is there something I missed in Html Helper because I have looked for various articles and all have binded the DropdownList using the same approach. Any suggestions will be welcome.

Upvotes: 0

Views: 631

Answers (2)

Dipak Delvadiya
Dipak Delvadiya

Reputation: 2112

Add one property in your model like as,

public List<SelectListItem> lstEmployee {get; set;}

In your controller's action

public ActionResult Index()
{
    Employee model = new model();
    IEnumerable<Employee> empList = EmployeeData();
    model.lstEmployee = from e in empList select new SelectListItem { Selected = true, Text = Convert.ToString(e.Id), Value = String.Concat(e.FirstName, " ", e.LastName) };
    return View(model);
}

In your view,

@model Employee // Whatever your model path

@Html.DropDownList("ddlEmployee", model.lstEmployee)

Also for best practice to bind dropdown in MVC, Please refer to the below links.

Link 1

Link 2

Upvotes: 6

user6448640
user6448640

Reputation:

use ViewBag

in controller

ViewBag.Employee = employee;

and in your view change DropdownList as:

 @Html.DropDownList("employee", new SelectList(ViewBag.Employee, "Id", "FirstName"))

Upvotes: 0

Related Questions