.Net MVC DropDownList 最初隐藏时未正确呈现答案

【问题标题】：.Net MVC DropDownList isn't rendered correctly when it's initially hidden.Net MVC DropDownList 最初隐藏时未正确呈现
【发布时间】：2019-10-09 11:54:39
【问题描述】：

我对这种 .Net MVC 风格还很陌生，所以希望这很容易解决。

我有一个 HTML 表格行，需要在加载页面时隐藏，然后如果选择了下拉列表 (DDL) 中的选项，则会显示该选项。此隐藏行包含另一个 MVC DDL。

如果我最初不隐藏该行，则 DDL 会正确呈现但是，如果我使用 CSS/样式来隐藏该行，或者在页面加载后使用 JQuery 隐藏该行，则 DDL 会呈现为一个完全空的列表几乎没有标准动作。

<tr id="ifNotChosen">
    <td>Why not chosen?</td>
    <td>
        @Html.DropDownListFor(x => x.NotChosenReason, Model.NotChosenReasons,
            new { @class = "chosen-select-deselect", data_placeholder = "Select Not Chosen Reason", style = "width:200px;" })
    </td>
</tr>

文件末尾是一个包含所有操作的脚本，包括“隐藏”操作。由于脚本位于文件的末尾，我希望它在渲染 DOM 元素之后运行，因此它不会影响它的外观。显然，这个假设是不正确的。

<script>
    ...

    $("#ifNotChosen").hide();

    ...
</script>

正如我所说，如果该行最初没有隐藏，它会正确呈现，所有选项都可用并且data_placeholder 可见。下图显示了确定第二个 DDL 是否可见的 DDL。这显示了最初隐藏该行，然后在第一个 DDL 中选择正确选项后使其可见的结果。无法选择任何选项，因为这也不再像正常的 DDL。

仅供参考，到目前为止我所做的所有研究都只告诉我如何隐藏或显示 DDL，但并没有解决这个奇怪的问题。

那么，我的问题是：如何让这个 DDL 列表正常工作？

编辑：
这是工作表单的一个新领域。 JQuery 包含在页面顶部，页面上的其他 JQuery 工作正常。

编辑 2：
在测试了@Vicky Khichar 的答案后，选项被正确填充。

另外，在昨晚的测试中，我发现使用$(document).ready 并没有任何区别。

这似乎是 100% 的 DOM 问题。

【问题讨论】：

标签： c# jquery .net model-view-controller

【解决方案1】：

@section scripts {
<script>
    //For hide html table on page load
    $(document).ready(function(){
        $('#ifNotChosen').hide();

    //here you can bind the value in dropdown list.

    });


    //For Show table on dropdown change
    $("#dropdownId").change(function(){
        $('#ifNotChosen').show();
    }); 
</script>
}

当您的页面加载时，您必须在下拉列表中绑定数据，因此当您从表中选择之后，您会在其中找到值。

【讨论】：

我昨晚深夜做了一些测试，不幸的是忘记更新我的问题。对此我很抱歉，因为它会影响您的回答。不幸的是，我发现使用 $(document).ready 没有任何区别。今天早上在测试您关于从脚本填充 DDL 的想法时，我发现实际上正在添加选项，它们只是没有出现。直到现在我才意识到这一点。这显然是 100% 的 DOM 问题。

【解决方案2】：

我怀疑您在生成的 HTML 中加载了 jQuery 该脚本。通常，在 Razor 视图中，您会将脚本放在一个特殊的命名部分中，该部分将由您的 _Layout在加载 jQuery 后呈现。

所以在你的页面中：

@section scripts {
 <script>...</script>
}

在您的 _Layout.cshtml 中，靠近底部的某处：

<script src="~/lib/jquery/dist/jquery.js"></script>
@RenderSection("scripts", required: false)

这样，页面中的脚本会在 jQuery 加载后执行

【讨论】：

JQuery 包含在页面顶部，页面上的其他 JQuery 工作正常。我将把它添加到问题中，这样其他人就不会犯同样的错误。此外，这是工作表单的新字段。

【解决方案3】：

经过更多测试，我发现即使 JQuery 显示了行和其他所有内容，它也设置了：

style="width:0"

经过数小时试图找出问题所在，我终于发现我所缺少的只是一个简单的命令，我原以为 JQuery 不需要。

$("#dropdownId").css("width", "200px");

一旦它有一个有效的宽度，它就会按预期工作。为什么这必须是手动的，IDK。这似乎是一个黑客。我不喜欢它，但它有效，所以我正在使用它。

正确设置后，我可以使用第一个下拉列表来隐藏和显示目标，没有任何问题。它显然必须在下拉列表可见之后。在隐藏时尝试这样做是行不通的。

在原始代码中，我确实将下拉列表宽度设置为 200 像素。为什么这不能延续，IDK。为什么完全改变了，我也不知道。

@Html.DropDownListFor(x => x.NotChosenReason, Model.NotChosenReasons,
    new { @class = "chosen-select-deselect", data_placeholder = "Select Not Chosen Reason", style = "width:200px;" })

【讨论】：