Reputation: 1899
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
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.
Upvotes: 6
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