display string text rather than item id

Question

I wanted to display a previously selected item from a dropdown list. With what i have so far i only get the id displayed of the item selected from the dropdown previously. I would like to get the text/description name of the item rather than its ID number.

This is what i have for the viewModel:

[LocalizedDisplayName("BillingRate", NameResourceType = typeof(User))]
    public short BillingRateId { get; set; }

    [UIHint("DropDownList")]
    [DropDownList(DropDownListTargetProperty = "BillingRateId")]
    public IEnumerable<SelectListItem> BillingRates { get; set; }

This is what i have for the .ascx form page:

<%:Html.LabelFor(m => m.BillingRateId)%>
<%:Html.EditorFor(m => m.BillingRateId, Model.BillingRates)%>
<%:Html.ValidationMessageFor(m => m.BillingRateId)%>

When i run and view page i get in the description box : 4 when it should be : Internship

Answer 1

You could make a simple service that will return just that string, then use jQuery AJAX to populate it.

public ContentResult GetBillingRate(int id)
{
    //get your billing rate
    return this.Content(billing_rate_string, "text/plain");
}

Then in your javascript:

$('#BillingRateId').change(function() {
    $.get('@Url.Action("GetBillinRate", "YourController")/' + $(this).val(),
        function(data) { $('#element_you_want_it_to_show_in').html(data); }
    );
});

Answer 2

ANother approach would be to make your own IEnumerable and push that into your DropDownList instead.

In your controller:

// this is assuming you can get objects with both name/id for your billing rates 
ViewBag.BillingRates = Db.GetBillingRatesAndNames()
    .Select(x => new SelectListItem() { Text = x.Name, Value = x.Id.ToString() });

In View:

<%:Html.EditorFor(m => m.BillingRateId, 
    (IEnumerable<SelectListItem>)ViewBag.BillingItems)%>