mvc4'te seçilen öğe açılırken seçilen öğeyi nasıl değiştirebilirim?

Question

Sayfamda aşağı açılır bir açılır kapanır. Açılırken bir değer seçerken etiket metninin değiştirilmesini istiyorum. İşte benim kodum:

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

Açılır listeden değeri değiştirerek Açıklamanın buna göre değiştirilmesini istiyorum.

Answer 1

Bir div içine açıklama koyarak başlayın ve açılan benzersiz bir kimliği verebilir:

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

Şimdi geriye kalan

onchange bu açılır listesinin javascript olay abone ve ilgili açıklamayı yenilenmesini sağlar. Örneğin

oldukça önemsiz bir görev jQuery kullanıyorsanız: Bu söyleniyor

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

---

Herhalde sorunuzu yanlış ve bu açıklama sunucusundan gelmelidir. Bu durumda, karşılık gelen açıklamayı döndürecek bir denetleyici eylemi sorgulamak için AJAX'ı kullanabilirsiniz. Yapmamız gereken tek şey bir HTML5 gibi bu eyleme url sağlamak olduğunu veriye * Bizim javascript dosyasında hardcoding önlemek için açılır özniteliğini: Biz AJAX isteği tetikleyen .change olay şimdi

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

ve:

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

ve tabii ki son adım seçilen değere bağlı olarak karşılık gelen bir açıklama alıp bunu bu kontrolör eylemi sahip olmaktır:

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