如何基于另一个TD中的选择列表项在TD中显示模型中的数据

时间:2019-05-21 20:28:58

标签: javascript c# asp.net-mvc razor

我在桌子的其余部分有一个单独的TR和一个TD。我的模型中有一些数据,其中包含字符串列表和ID列表(不确定是否为此需要IDS列表),我想在较低的Tr的td上显示列表的特定部分,基于在其上方的表行td中对SelectListItem的选择。.即,如果用户选择的是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>

VM:

 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”的DisplayFor,应该指示显示哪个帮助描述符的选择列表项的ID =“ ddlCommandValue”。

到目前为止,helpDescript(显然)正在显示整个列表。

如果有人需要任何其他代码或更多信息,请告诉我。

1 个答案:

答案 0 :(得分:0)

尝试以下方法。在下拉更改事件中,调用操作以显示值,在成功函数中,在标签中显示值

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