Populating Dropdowns in ASP.NET MVC 3

Question

I need to populate a dropdown in ASP.NET MVC 3. I was hoping to get the answers to the following questions:

1. What options do I have. I mean what's the difference between @Html.DropDownList and @Html.DropDownListFor. Also are there any other options?

2. I have the following classes/code. What would be the razor code/HTML syntax I need (I have included what I was trying) in my .cshtml assuming I need to only show this dropdown using the classes below.

   public class SearchCriterion
   {
     public int Id { get; set; }
   
     public string Text { get; set; }
   
     public string Value { get; set; }
   }
   
   public class SearchCriteriaViewModel
   {
    public IEnumerable<SelectListItem> SearchCriteria { get; set; }
   }
   
   public class HomeController : Controller
   {
       public ActionResult Index()
       {
           IList<System.Web.WebPages.Html.SelectListItem> searchCriteriaSelectList = 
   new List<System.Web.WebPages.Html.SelectListItem>();
   
           SearchCriteriaViewModel model = new SearchCriteriaViewModel();
   
           //Some code to populate searchCriteriaSelectList goes here....
   
           model.SearchCriteria = searchCriteriaSelectList;
   
           return View(model);
       }
   }
   
   //Code for Index.cshtml
   
   @model SearchCriteriaViewModel
   
   @{
       ViewBag.Title = "Index";
   }
   
   <p>
       @Html.DropDownListFor(model => model.SearchCriteria, 
              new SelectList(SearchCriteria, "Value", "Text"))
     </p>
   

Answer 1

After extensively using ASP.NET MVC for the past 3 years, I prefer using additionalViewData from the Html.EditorFor() method more.

Pass in your [List Items] as an anonymous object with the same property name as the Model's property into the Html.EditorFor() method.

The benefit is that Html.EditorFor() method automatically uses your Editor Templates.
So you don't need to provide CSS class names for your Drop Down Lists.
See comparison below.

//------------------------------
// additionalViewData                <=== RECOMMENDED APPROACH
//------------------------------
@Html.EditorFor(
    m => m.MyPropertyName,
    new { MyPropertyName = Model.ListItemsForMyPropertyName }
)

//------------------------------
//  traditional approach requires to pass your own HTML attributes
//------------------------------
@Html.DropDown(
    "MyPropertyName",
    Model.ListItemsForMyPropertyName,
    new Dictionary<string, object> {
        { "class", "myDropDownCssClass" }
    }
);

//------------------------------
//  DropDownListFor still requires you to pass in your own HTML attributes
//------------------------------
@Html.DropDownListFor(
    m => m.MyPropertyName,
    Model.ListItemsForMyPropertyName,
    new Dictionary<string, object> {
        { "class", "myDropDownCssClass" }
    }
);

If you want more details, please refer to my answer in another thread here.

Answer 2

the right side of the lambda => has to be a simple type not the complex type modify your code like

public class SearchCriteriaViewModel
{
 public int Id { get; set; }
 public IEnumerable<SearchCriterion> SearchCriteria { get; set; }
}

public class SearchCriterion
{     
  public string Text { get; set; }
  public string Value { get; set; }
}

the controller will look like

public ActionResult Index()
{
    //fill the select list 
    IEnumerable<SearchCriteria> searchCriteriaSelectList = 
             Enumerable.Range(1,5).Select(x=>new SearchCriteria{                 
                Text= x.ToString(),
                Value=ToString(),
            });
    SearchCriteriaViewModel model = new SearchCriteriaViewModel();
    //Some code to populate searchCriteriaSelectList goes here....
    model.SearchCriteria = searchCriteriaSelectList;
    return View(model);
}

in the view

@model SearchCriteriaViewModel

@{
    ViewBag.Title = "Index";
}

   <p>
    @Html.DropDownListFor(model => model.Id, 
           new SelectList(model.SearchCriteria , "Value", "Text"))
  </p>