Как отобразить данные из модели в тд на основе выбора элемента списка в другом тд

Question

У меня есть отдельный TR и внутри, TD от остальной части моего стола.У меня есть некоторые данные в моей модели, которые содержат список строк, а также список идентификаторов (не уверен, нужен ли мне для этого список IDS), и я хотел бы отобразить в нижней части Tr определенную часть списка, основанный на выборе SelectListItem в td строки таблицы над ним .. т.е. если пользователь выбирает элемент списка X, я хочу, чтобы TD ниже отображал «описание помощи X» (которое, как я упоминал ранее,хранится в списке строк в моей модели)

Я не уверен, следует ли мне делать это в Razor, Javascript или что-то еще.Кто-нибудь может дать мне несколько советов?Ниже приведен некоторый код.

Вид:

 <div class="row">
    <div class="col-md-12" style="overflow-y:scroll">
        <table class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th>Terminal</th>
                    <th>Command</th>
                    <th>Command Value</th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@Html.DropDownListFor(o => o.TerminalsDDL, Model.TerminalsDDL, new { id = "ddlTerminalID", @class = "form-control" })</td>
                    <td>@Html.DropDownListFor(o => o.TerminalCommandLookupsDDL, Model.TerminalCommandLookupsDDL, new {id = "ddlCommandValue", @class = "form-control" })</td>
                    <td>@Html.TextBoxFor(o => o.UserEnteredTerminalCommands, new { Class = "form-control", Id = "cmdValueValue"})</td>
                    <td> <input id="btnSaveTerminalCommand" type="button"  value="Insert" class="btn btn-primary" /> </td>
                </tr>
                <tr>
                    <td colspan="4" id="helpDescript">@Html.DisplayFor(model => model.HelpDescription)</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

ВМ:

 public TerminalCommandVM()
    {
        //Terminals Drop Down List
        TerminalsDDL = new List<SelectListItem>();

        //Terminal Commands Drop Down List
        TerminalCommandLookupsDDL = new List<SelectListItem>();

        //Terminal Command Values list
        TerminalCommandValues = new List<SelectListItem>();

    }

    public TerminalCommand TerminalCommand { get; set; }

    public List<TerminalCommand> TerminalCommands { get; set; }

    [Display(Name = "Terminal ID")]
    public List<SelectListItem> TerminalsDDL { get; set; }

    [Display(Name = "Command")]
    public List<SelectListItem> TerminalCommandLookupsDDL { get; set; }

    public List<SelectListItem> TerminalCommandValues { get; set; }

    public string UserEnteredTerminalCommands { get; set; }

    public List<string> HelpDescription { get; set; }

    public List<int> HelpDescriptionID { get; set; }
}

Заполняемый DisplayFor - это тот, который имеет ID = "helpDescript", иэлемент списка выбора, который должен указывать, какой дескриптор справки отображается, имеет идентификатор = "ddlCommandValue".

На данный момент helpDescript отображает весь список (очевидно).

Если кому-то нужен какой-либо другой код или дополнительная информация, пожалуйста, сообщите мне.

Answer 1

Попробуйте следующее.В раскрывающемся событии изменения вызовите действие для отображения значения, а в функции успеха - значение в метке

$("#ddlCommandValue").change(function () {
    var obj = {
        valueToPass: $(this).val()
    };
    $.ajax({
        url: '/Home/GetValueToDisplayInlabel',
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        data: JSON.stringify(obj),
        cache: false,
        success: function (result) {
            $("#helpDescript").html(result);
        },
        error: function () {
            alert("Error");
        }
});

.