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

Question

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

的列表

我们使用动态渲染的 html table 并且每个 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) 因为我们必须显示下拉列表我们可以从哪里 select 获取一个项目。这在旧的 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 中的锚点时显示，并且可以 select 下拉列表中的项目正如我们可以在旧 ASP.NET 框架

到处都找遍了，没有好的解决办法。

Answer 1

I get the message back saying Microsoft.AspNetCore.Mvc.Rendering.TagBuilder

对于这个问题，您可以像下面这样更改您的代码：

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

注意：符号是`不是单引号(').

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

<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>

结果：

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

How to add dropdownlist to a td dynamically

javascript

c#

model-view-controller

asp.net-core