cómo hacer la devolución de datos al cambiar la lista desplegable elemento seleccionado en mvc4

Question

Tengo un menú desplegable en mi página. Al seleccionar un valor en el menú desplegable, deseo que se cambie el texto de la etiqueta. Aquí está mi código:

@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) 
} 

Al cambiar el valor en la lista desplegable, quiero que la descripción cambie en consecuencia.

Answer 1

Se podría empezar por poner la descripción en un div y darle a su desplegable un identificador único:

@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> 
} 

Ahora todo lo que queda es suscribirse a la onchange Javascript caso de esta lista desplegable y actualizar la descripción correspondiente.

Por ejemplo, si está utilizando jQuery que es tarea bastante trivial:

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

---

Dicho esto, probablemente, no he entendido bien su pregunta y esta descripción debe venir del servidor. En este caso, podría usar AJAX para consultar una acción del controlador que devolverá la descripción correspondiente. Todo lo que tenemos que hacer es proporcionar la dirección URL a esta acción como un HTML 5 Data- * atribuir a la lista desplegable para evitar hardcoding en nuestro archivo javascript:

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

y ahora en el .change evento que desencadenan la petición AJAX:

$(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); 
      } 
     }); 
    }); 
}); 

y el último paso, por supuesto, es que esta acción controlador que buscar a la descripción correspondiente en función del valor seleccionado:

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); 
}