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

Question

We have an old ASP.NET MVC framework and we are in the progress of moving to .NET 5 MVC The ViewModel that we receive from the controller contains several things but one of these is called ListOfDayTypes and it's a list of SelectListItem

We use html table that we render dynamically and each of these td looks the same except id,name and 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>

When we click an anchor in a td cell we call function showDayTypes($(this) because we must show a dropdownlist where we can select an item from. This works fine in the old ASP.NET framework but we have trouble in .NET 5

In the old code we have the following:

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

When clicking in an anchor in td cell this showDayTypes code is called As you can see we just use variable ddlHtml from @Html.Raw(...) to populate the dropdown list to it's parent which is a td and this works well.

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

I have tried to use the same code in .NET 5 but I get Microsoft.AspNetCore.Mvc.Rendering.TagBuilder when I try to use @Html.Raw It seems to me they have removed some good functionality in .NET 5 which is bad.

What is the best way to solve my problem so the dropdownlist is displayed when clicking an anchor in a td and can select an item from the dropdownlist as we could in the old ASP.NET framework

I have looked everywhere but no good solutions.

Answer 1

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

For this issue, you could change your code like below:

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

Note : the symbol is ` not single quote(').

Besides, your code seems also want to set link text as selected item. If so, modify like below:

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

Result: