动态地将HTML从<％：…％>添加到图像中，在其中我从代码隐藏中修改其父级

Question

我正在尝试做一些与此问题类似的事情。 那里的答案建议从后台代码进行数据绑定，但是我有很多项目正在应用它，如果可能的话，我宁愿不这样做。

我有一个用户控件。 根据自定义控件上属性的值，将显示或隐藏许多图像。 我尝试了几种使用<%: ... %>语法的方法来实现此目的，但是由于下面将要描述的原因，所有方法均以失败告终。

我的第一个尝试是对链接的问题执行类似OP的操作。 从他的问题：

<select id="myDropDown" 
        style="width:60px;display:<%# (bool)Eval("ShowDropDown") ? "block" : "none" %>;">

我尝试了类似的操作，但是像OP那样，它没有替换<%# (bool)Eval("ShowDropDown") ? "block" : "none" %> <%# (bool)Eval("ShowDropDown") ? "block" : "none" %>带有值-它只是将其呈现为文字文本。

我尝试过的下一件事（并且我已经尝试了几种变体，但没有一个起作用）是：

<td id="tdR1Day1" style="vertical-align: top;" runat="server">
            <div style="width: 100%; height: 15px">
                <img title="Click to add pattern" <%: IsHidden ? "hidden = \"hidden\"" : "" %> align="right" id="imgR1Day1" style="cursor: pointer;" alt="Add" src="../Images/Add.gif">
            </div>
        </td>

但是，这导致The Controls collection cannot be modified because the control contains code blocks (ie <% ... %>)因为我试图从后面的代码向td标签动态添加div 。 我不是直接修改img本身，而只是修改td 。

当我在未从代码后台进行修改的图像上执行完全相同的操作时，我得到以下HTML，它的工作方式与我期望的完全相同：

<td id="MainContent_scorpio_tdR1Day3" style="vertical-align: top;">
            <div style="width: 100%; height: 15px">
                <img hidden = &quot;hidden&quot; title="Click to add pattern" align="right" id="imgR1Day3" style="cursor: pointer;" alt="Add" src="../Images/Add.gif">
            </div>
        </td>

然后，我的问题是：

• 当我尝试将其作为CSS的一部分进行操作时，为什么将其呈现为文字文本而不是将<%: ... %>替换为值？
• 有没有办法解决The Controls collection cannot be modified...异常的问题？

或者，我只是在这里采取错误的方法吗？ 例如，是否应该像在td与其他div一样，仅从代码后添加此div / image？

Answer 1

有几个问题。 <%# ... %>用于将数据绑定到服务器控件。 您的<select>不是服务器控件。 将<%= ... %>用于显示表达式，然后调用一个函数。 有关内联表达式的更多信息，请参见此处 。

假设IsHidden是布尔变量，则可以执行以下操作：

<script runat="server">
    protected string Display()
    {
        if (IsHidden) {
            return "hidden";
        }
        return "show";
    }
</script>

<select id="myDropDown" style='display:<%= Display  %>'>
    <option>
        Test
    </option>
</select>

我也建议仅使用CSS类。 所以更像

<style>
    .hidden {display:none;}
    .show {display:block;}
</style>

<script runat="server">
    protected string Display()
    {
        if (IsHidden) {
            return "hidden";
        }
        return "show";
    }
</script>

<select id="myDropDown" class="<%= Display %>">
    <option>
        Test
    </option>
</select> 

但是，如果要在后面的代码中修改表格行，则确实应该使用数据绑定内联表达式，例如<%# ... %> ，其余步骤仍然相同。 这将解决您的Controls collection异常。