如何動態地將下拉列表添加到 td

Question

我們有一個舊的 ASP.NET MVC 框架，我們正在遷移到 .NET 5 MVC 我們從 controller 收到的 ViewModel 包含幾個東西，但其中一個是 ListDaysType

我們使用動態渲染的 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>

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

在舊代碼中，我們有以下內容：

<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 中使用相同的代碼，但是當我嘗試使用@Html.Raw時，我得到了Microsoft.AspNetCore.Mvc.Rendering.TagBuilder在我看來，他們已經刪除了 .NET 5 中的一些好的功能，這很糟糕。

解決我的問題的最佳方法是什么，以便在單擊 td 中的錨點時顯示下拉列表，並且可以像在舊的 ASP.NET 框架中一樣從下拉列表中選擇 select 項目

我到處尋找，但沒有好的解決方案。

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

結果：