5

私のページにはドロップダウンがあります。ドロップダウンで値を選択すると、ラベルのテキストが変更されます。これが私のコードです:

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

ドロップダウンリストの値を変更すると、それに応じて説明が変更されます。

4

1 に答える 1

11

説明を 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);
}
于 2012-07-27T13:35:41.343 に答える