如何动态地将下拉列表添加到 td答案

【问题标题】：How to add dropdownlist to a td dynamically如何动态地将下拉列表添加到 td
【发布时间】：2021-08-04 04:18:05
【问题描述】：

我们有一个旧的 ASP.NET MVC 框架，我们正在迁移到 .NET 5 MVC 我们从控制器收到的 ViewModel 包含一些东西，但是其中之一称为 ListOfDayTypes，它是 SelectListItem 的列表

我们使用动态渲染的 html 表格，每个 td 看起来都一样除了 id、name 和 value

<td width="29" id="17_2021-1-2">                            
   <input type="hidden" name="Schedule[0].Value[1].ScheduleId" value="0">
   <input type="hidden" name="Schedule[0].Value[1].Date" value="2021-1-2">
   <input type="hidden" name="Schedule[0].Value[1].DayTypeId" value="0">
   <input type="hidden" name="Schedule[0].Value[1].HasChanged" value="false">
   <input type="hidden" name="Schedule[0].Value[1].ShiftTypeId" value="1008">
   <input type="hidden" name="Schedule[0].Value[1].ShiftTeamId" value="17">
  <a class="defaultScheduleLink" onclick="javascript:showDayTypes($(this));"> * </a>
</td>

当我们单击 td 单元格中的锚点时，我们调用函数 showDayTypes($(this) 因为我们必须显示一个下拉列表我们可以从中选择一个项目。这在旧的 ASP.NET 框架中运行良好，但我们在 .NET 5 中遇到了麻烦

在旧代码中，我们有以下内容：

<script language="javascript" type="text/javascript">
   var ddlHtml = '@Html.Raw(Html.DropDownList("ddlDayType", Model.ListOfDayTypes, new { id="ddlDayType", @class="scheduleDDL",        onchange="onDayTypeChanged();"} ).ToString().Replace(System.Environment.NewLine, ""))';
</script>

点击 td 单元格中的锚点时，会调用此 showDayTypes 代码如您所见，我们只使用来自@Html.Raw(...) 的变量ddlHtml 将下拉列表填充到它的父级，它是一个 td 和这很好用。

function showDayTypes(link)
{
    var td = link.parent("td");
    link.remove(); 
    td.append(ddlHtml);
    var select = td.children("select");
    var option = select.children("option[text='" + link.text() + "']");
    select.val(option.val());
}

我尝试在 .NET 5 中使用相同的代码，但我得到了 Microsoft.AspNetCore.Mvc.Rendering.TagBuilder 当我尝试使用@Html.Raw 在我看来，他们在 .NET 5 中删除了一些不好的功能。

解决我的问题的最佳方法是什么，所以下拉列表单击 td 中的锚点时显示，并且可以从下拉列表中选择一个项目就像我们在旧的 ASP.NET 框架中一样

我到处寻找，但没有好的解决方案。

【问题讨论】：

“我尝试在 .NET 5 中使用相同的代码，但我得到了 Microsoft.AspNetCore.Mvc.Rendering.TagBuilder。”请发布实际的、完整的错误消息。
只要我使用@Html.Raw(Html.DropDownList("ddlDayType", Model.ListOfDayTypes));我收到消息说 Microsoft.AspNetCore.Mvc.Rendering.TagBuilder
“我收到消息”是什么意思？您是在谈论编译错误、异常还是其他问题？
如果您要渲染 html 服务器端，只需使用 JS / css 类切换可见性。否则我会将数据加载为 json 并使用小胡子模板或其他东西呈现客户端。
非常感谢 Rena 我会接受你的回答。对我来说，在我的下拉列表周围使用的反引号会返回一个字符串，这对我来说很新鲜。

标签： javascript c# asp.net-core model-view-controller

【解决方案1】：

我收到消息说 Microsoft.AspNetCore.Mvc.Rendering.TagBuilder

对于这个问题，你可以改变你的代码如下：

var ddlHtml = `@Html.DropDownList("ddlDayType", Model.ListOfDayTypes, new { id = "ddlDayType", @class = "scheduleDDL", onchange = "onDayTypeChanged();" })`;

注意：符号是`而不是单引号（'）。

此外，您的代码似乎还想将链接文本设置为选定项。如果是这样，修改如下：

<script>
    var ddlHtml = `@Html.DropDownList("ddlDayType", Model.ListOfDayTypes, new { id = "ddlDayType", @class = "scheduleDDL", onchange = "onDayTypeChanged();" })`;
    function showDayTypes(link) {
        var td = link.parent("td");
        link.remove();
        td.append(ddlHtml);
        var select = td.children("select");

        var option = select.children("option").filter(":contains('" + link.text()+"')");

        select.val(option.val());
    }
</script>

结果：

【讨论】：