説明を div に入れることから始めて、ドロップダウンに一意の 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>
}
あとはonchange
、このドロップダウンの JavaScript イベントをサブスクライブし、対応する説明を更新するだけです。
たとえば、非常に簡単なタスクである jQuery を使用している場合:
$(function() {
$('#lenderType').change(function() {
var selectedDescription = $(this).find('option:selected').text();
$('#description').html(selectedDescription);
});
});
これはおそらくあなたの質問を誤解していると言われており、この説明はサーバーからのものでなければなりません. この場合、AJAX を使用して、対応する説明を返すコントローラー アクションを照会できます。このアクションの URL を HTML5 の data-* 属性としてドロップダウンに指定するだけで、javascript ファイルにハードコーディングする必要がなくなります。
@Html.DropDownList(
"Ddl_Lender",
Model.ShowLenderTypes,
new {
id = "lenderType",
data_url = Url.Action("GetDescription", "SomeController")
}
)
そして今、.change
イベントで 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);
}
});
});
});
もちろん、最後のステップは、選択した値に基づいて対応する説明を取得するこのコントローラー アクションを用意することです。
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);
}