ASP.NET - how to create and bind data to droplist in asp.net mvc3

Asked By aman on 01-Mar-12 05:48 AM
hi all,
i am new to ASP.NET MVC

i want to create and bind data to DropDroplist in asp.net mvc
i have created a model for a single table using ADO.NET Entity Framework

thanks,
please help
Asked By aman on 01-Mar-12 06:56 AM
hi there,

i have followed to your method shown but it doesnt work......

the following error occur for <SelectListItem> for the contrller class does not occur or missing assembly reference
Somesh Yadav replied to aman on 02-Mar-12 04:18 AM

As always you start with a model:

public class MyViewModel
{
   
public int? Year { get; set; }
   
public int? Month { get; set; }

   
public IEnumerable<SelectListItem> Years
   
{
        get
       
{
           
return Enumerable.Range(2000, 12).Select(x => new SelectListItem
           
{
               
Value = x.ToString(),
               
Text = x.ToString()
           
});
       
}
   
}
}

then a controller:

public class HomeController : Controller
{
   
public ActionResult Index()
   
{
       
var model = new MyViewModel();
       
return View(model);
   
}

   
public ActionResult Months(int year)
   
{
       
if (year == 2011)
       
{
           
return Json(
               
Enumerable.Range(1, 3).Select(x => new { value = x, text = x }),
               
JsonRequestBehavior.AllowGet
           
);
       
}
       
return Json(
           
Enumerable.Range(1, 12).Select(x => new { value = x, text = x }),
           
JsonRequestBehavior.AllowGet
       
);
   
}
}

and finally a view:

@model AppName.Models.MyViewModel

@Html.DropDownListFor(
    x
=> x.Year,
   
new SelectList(Model.Years, "Value", "Text"),
   
"-- select year --"
)

@Html.DropDownListFor(
    x
=> x.Month,
   
Enumerable.Empty<SelectListItem>(),
   
"-- select month --"
)

<script type="text/javascript">
    $
('#Year').change(function () {
       
var selectedYear = $(this).val();
       
if (selectedYear != null && selectedYear != '') {
            $
.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
               
var monthsSelect = $('#Month');
                monthsSelect
.empty();
                $
.each(months, function (index, month) {
                    monthsSelect
.append($('<option/>', {
                        value
: month.value,
                        text
: month.text
                   
}));
               
});
           
});
       
}
   
});
</script>

Obviously you will notice that in my example I have hardcoded all the values. You should improve this logic by using notions like current year, current month, probably even fetch those values from a repository, etc... but for the purpose of the demonstration this should be enough to put you on the right track.