Question

I have a dropdown in my page. On selecting a value in dropdown I want the label text to be changed. Here is my code :

@model FND.Models.ViewLender

@{
    ViewBag.Title = "Change Lender";
 }

@using (Html.BeginForm())
{
    @Html.Label("Change Lender : ")
    @Html.DropDownList("Ddl_Lender", Model.ShowLenderTypes)
    @Html.DisplayFor(model => model.Description)
 }

On changing the value in dropdownlist I want the Description to change accordingly.

Answer 1

You could start by putting the description into a div and give your dropdown an unique id:

@model FND.Models.ViewLender

@{
    ViewBag.Title = "Change Lender";
}

@using (Html.BeginForm())
{
    @Html.Label("Change Lender : ")
    @Html.DropDownList("Ddl_Lender", Model.ShowLenderTypes, new { id = "lenderType" })
    <div id="description">
        @Html.DisplayFor(model => model.Description)
    </div>
}

Now all that’s left is to subscribe to the onchange javascript event of this dropdown and update the corresponding description.

For example if you are using jQuery that’s pretty trivial task:

$(function() {
    $('#lenderType').change(function() {
        var selectedDescription = $(this).find('option:selected').text();
        $('#description').html(selectedDescription);
    });
});

---

This being said I probably misunderstood your question and this description must come from the server. In this case you could use AJAX to query a controller action that will return the corresponding description. All we need to do is provide the url to this action as an HTML5 data-* attribute to the dropdown to avoid hardcoding it in our javascript file:

@Html.DropDownList(
    "Ddl_Lender", 
    Model.ShowLenderTypes, 
    new { 
        id = "lenderType", 
        data_url = Url.Action("GetDescription", "SomeController") 
    }
)

and now in the .change event we trigger the AJAX request:

$(function() {
    $('#lenderType').change(function() {
        var selectedValue = $(this).val();
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            data: { value: selectedValue },
            success: function(result) {
                $('#description').html(result.description);
            }
        });
    });
});

and the last step of course is to have this controller action that will fetch the corresponding description based on the selected value:

public ActionResult GetDescription(string value)
{
    // The value variable that will be passed here will represent
    // the selected value of the dropdown list. So we must go ahead 
    // and retrieve the corresponding description here from wherever
    // this information is stored (a database or something)
    string description = GoGetTheDescription(value);

    return Json(new { description = description }, JsonRequestBehavior.AllowGet);
}