Im making the assumption you understand some of the basic principles of MVC, you are familiar with JQuery, have exposure to HTML Helpers in Razor.
1) Your controller. Im not making any database calls as i dont feel like throwing a database together. All you would have to do is make the call to your databse, loop over the result set and within your loop, add the contents to your List<selectlistitem>.
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
List<SelectListItem> list = new List<SelectListItem>();
list.Add(new SelectListItem() { Text = "Durban", Value = "031" });
list.Add(new SelectListItem() { Text = "Joburg", Value = "011" });
DemoModel model = new DemoModel();
model.ListItems = list;
return View(model);
}
}
2. Build a model. My model only has one field for ListItems
public class DemoModel
{
public List<SelectListItem> ListItems = new List<SelectListItem>();
}
3. Your Html.
@Html.DropDownListFor(m=>m.ListItems, Model.ListItems, "Make Selection")
<label id="dropdownlabel">Nothing Selected</label>
4. Your jquery
<script type="text/javascript">
$(function() {
$("#ListItems").live("change", function() {
$("#dropdownlabel").text($(this).val());
});
});
</script>
This bit of code i did test and it does work so if you have any issues, look at how you've implemented it/any calls to your database.