Web 表单中的选项卡

Question

我试图在运行时创建一组选项卡，它们一度工作正常 - 但现在它们似乎只是显示先前呈现的选项卡下方的所有选项卡的内容。尽管看起来很愚蠢，但据我所知，自从代码运行以来，代码没有任何变化，所以我对发生的事情有点困惑......

为了这个例子的目的，我不会使用一个循环，尽管这似乎无关紧要，因为循环似乎不是问题。

<asp:Panel runat="server" ID="pnlTabs">
    <ul runat="server" id="ulSections" />
</asp:Panel>

我得出的结论是我的代码一定有问题，所以这里是 C#：

HtmlGenericControl liTab = new HtmlGenericControl("li");                        
HtmlGenericControl anTab = new HtmlGenericControl("a");
anTab.Attributes.Add("href", "#Tab1");
anTab.InnerText = Tab1;
liTab.Controls.Add(anTab);
ulSections.Controls.Add(liTab);

var pnl = new Panel();
pnl.ID = Tab1;
pnlTabs.Controls.Add(pnl);

我将控件和不在“pnl”上的内容放在一起。谁能告诉我我的错误是什么？

Answer 1

//THIS ADDS THE <A> to the <LI>
liTab.Controls.Add(anTab);

//THIS ADDS THE <LI> to the <UL>
ulSections.Controls.Add(liTab);

//THIS CODE Appear to have nothing to do with anything.
var pnl = new Panel();
pnl.ID = Tab1;
pnlTabs.Controls.Add(pnl);

当您查看源代码时，您能否确认 HTML 是否在 html 中呈现。

这段代码在您的代码后面的什么位置...在按钮单击、页面加载、初始化时？

Answer 2

我发现问题是什么，基本上是“anTab”的 InnerText 不能与“anTab”的 href 属性相同，因为这会导致混乱并导致所有选项卡的内容仅出现在第一个（选定的）中选项卡，而其余选项卡不起作用。

例如，以下代码可以正常工作，因为“anTab”的 InnerText 是“Tab 1”，并且 href 正在查找 ID 为“Tab1”（面板的 ID）的控件。

HtmlGenericControl liTab = new HtmlGenericControl("li");                        
HtmlGenericControl anTab = new HtmlGenericControl("a");
anTab.Attributes.Add("href", "#Tab1");
anTab.InnerText = "Tab 1";
liTab.Controls.Add(anTab);
ulSections.Controls.Add(liTab);

var pnl = new Panel();
pnl.ID = "Tab1";
pnlTabs.Controls.Add(pnl);

下面我们可以看到“anTab”的 InnerText 与我们希望用作选项卡的面板的 href 和 ID 相同，这会导致混乱，因为 href 现在假设您希望“选项卡单击”指向它本身而不是实际的面板。

HtmlGenericControl liTab = new HtmlGenericControl("li");                        
HtmlGenericControl anTab = new HtmlGenericControl("a");
anTab.Attributes.Add("href", "#Tab1");
anTab.InnerText = "Tab1";
liTab.Controls.Add(anTab);
ulSections.Controls.Add(liTab);

var pnl = new Panel();
pnl.ID = "Tab1";
pnlTabs.Controls.Add(pnl);