html - 从后面的代码修改无序列表

Question

我正在尝试从后面的代码动态地将元素添加到无序列表，但不确定如何正确地做到这一点。

html:

<ul class="nav navbar-nav" id="myUL" runat="server">
   <li><a runat="server" href="~/">Home</a></li>
   <li><a runat="server" href="~/About">About</a></li>
   <li><a runat="server" href="~/Contact">Contact</a></li>
</ul>

代码隐藏:

System.Web.UI.HtmlControls.HtmlGenericControl li = Master.FindControl("myUL") as System.Web.UI.HtmlControls.HtmlGenericControl;
System.Web.UI.HtmlControls.HtmlGenericControl anchor = new System.Web.UI.HtmlControls.HtmlGenericControl("a");
anchor.Attributes.Add("href", "~/Manager");
anchor.InnerText = "Manager";
li.Controls.Add(anchor);

这确实有效，但 CSS 完全困惑并且没有使用 myUL 控件的 CSS。

如何解决？

Answer 1

我对您的代码进行了以下更改，所有列表项均正确显示:

System.Web.UI.HtmlControls.HtmlGenericControl li = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
System.Web.UI.HtmlControls.HtmlGenericControl anchor = new System.Web.UI.HtmlControls.HtmlGenericControl("a");
anchor.Attributes.Add("href", "~/Manager");
anchor.InnerText = "Manager";
li.Controls.Add(anchor);
myUL.Controls.Add(li);

这将 HTML 标记呈现为:

<ul class="nav navbar-nav" id="plcMain_myUL">
   <li><a id="plcMain_A1" href="/">Home</a></li>
   <li><a id="plcMain_A2" href="../../About">About</a></li>
   <li><a id="plcMain_A3" href="../../Contact">Contact</a></li>
   <li><a href="/Manager">Manager</a></li>
</ul>

当我使用您提供的代码时，生成了以下 HTML:

<ul class="nav navbar-nav" id="plcMain_myUL">
   <li><a id="plcMain_A1" href="../../">Home</a></li>
   <li><a id="plcMain_A2" href="../../About">About</a></li>
   <li><a id="plcMain_A3" href="../../Contact">Contact</a></li>
   <a href="/Manager">Manager</a> <!-- Dynamically added item not wrapped around "li" -->
</ul>

我不太明白你说的“CSS 乱七八糟”是什么意思。我能想到 CSS 不起作用的唯一原因是:

1) 动态创建新的 HTML anchor 时缺少的“li”。

2) 您正在使用无序列表的 ID 属性进行样式设置。如果是这种情况，这将不起作用，因为 .NET 会在所有服务器控件上动态更改 ID。相反，请使用 class 属性。