стилизация элементов управления ASP.NET с помощью стандартных CSS

Question

У меня есть кусок HTML, который выглядит так -

<div id="moduleList">
<ul>
    <li class="noBorder">&nbsp;</li>
                    <li class="noBorder">
        <span class="currentTabLeft">&nbsp;</span><span class="currentTab">
            <a href="Welcome.aspx"
                id="grouptab_0">Home</a>
        </span><span class="currentTabRight">&nbsp;</span>

                </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Locations.aspx">Locations</a>
        </span><span class="notCurrentTabRight">&nbsp;

    </span>
        </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">

        <a href="Users.aspx" 
            id="grouptab_2">Users</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>
                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Reports.aspx" 
            id="grouptab_3">Reports</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>

                <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Alerts.aspx" 
            id="grouptab_4">Alerts</a>
        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>
             <li>
        <span class="notCurrentTabLeft">&nbsp;</span><span class="notCurrentTab">
        <a href="Preferences.aspx" 
            id="grouptab_5">Preferences</a>

        </span><span class="notCurrentTabRight">&nbsp;</span>
        </li>

    </ul>

</div>

И соответствующая таблица стилей выглядит примерно так -

    #moduleList {
        background-image:url(images/tabRowGrayBg.gif);
        background-repeat:repeat-x;
        border-bottom-color:#565656
    }
    #moduleList>ul>li {
        background-image:url(images/otherTabGray.gif)
    }
    #moduleList ul li span.currentTab a:link, #moduleList ul li span.currentTab a:visited, #moduleList ul li span.currentTab a:hover {
        color:#ffffff
    }
    #moduleList ul li a:link, #moduleList ul li a:visited {
        color:#444444
    }
    #moduleList ul li a:hover {
        color:#000000
    }
    #moduleList ul li span.currentTabLeft, #moduleList ul li span.currentTabRight, #moduleList ul li span.currentTab {
        background-image:url(images/currentTabGray.gif);
        background-repeat:no-repeat;
        border-bottom-color:#8e8e8e
    }

Теперь я написал следующий код в файле .aspx, чтобы реплицировать функциональность вкладок, которую создает приведенный выше код -

     <div id="moduleList">
                <!-- start of content for ContentContainer -->

                            <asp:Menu CssClass="TabMenu" DataSourceID="TabMenuSitemap"
                             HideSelectElements="True"
                 ID="Menu2" Orientation="Horizontal" runat="server">
                  <StaticSelectedStyle CssClass="TabMenuItemSelected" />
                   <StaticMenuItemStyle CssClass="TabMenuItem" />
                              <StaticMenuStyle CssClass="SiteStaticMenu" />
                              <StaticHoverStyle CssClass="TabMenuItemHover" />
                              <DataBindings>
                                <asp:MenuItemBinding DataMember="SiteMapNode" Depth="0"
                NavigateUrlField="Url" TextField="Title"
                ToolTipField="Description" />
                              </DataBindings>
                            </asp:Menu>
    </div>

И я позаботился о том, чтобы обернуть его в div с именем moduleList. Теперь, к сожалению, HTML-код, сгенерированный выше .aspx, выглядит совсем не так, как я надеялся. Он генерирует что-то, используя вложенные таблицы, которые выглядят так -

    <div id="moduleList">

                            <a href="#ctl00_AjaxLoginView1_Menu2_SkipLink"><img alt="Skip Navigation Links" src="/eservice/WebResource.axd?d=HWE7J2PUlnLya8lWJlEVZw2&amp;t=634129453271895014" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_AjaxLoginView1_Menu2" class="TabMenu SiteStaticMenu ctl00_AjaxLoginView1_Menu2_5 ctl00_AjaxLoginView1_Menu2_2" HideSelectElements="True" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage1" id="ctl00_AjaxLoginView1_Menu2n0"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage1.aspx" style="border-style:none;font-size:1em;">TabPage1</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage2" id="ctl00_AjaxLoginView1_Menu2n1"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_7" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>

                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3 TabMenuItemSelected ctl00_AjaxLoginView1_Menu2_6" href="/eservice/TabPage2.aspx" style="border-style:none;font-size:1em;">TabPage2</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage3" id="ctl00_AjaxLoginView1_Menu2n2"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage3.aspx" style="border-style:none;font-size:1em;">TabPage3</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage4" id="ctl00_AjaxLoginView1_Menu2n3"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>

                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage4.aspx" style="border-style:none;font-size:1em;">TabPage4</a></td>
                </tr>
            </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="TabPage5" id="ctl00_AjaxLoginView1_Menu2n4"><table class="TabMenuItem ctl00_AjaxLoginView1_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;"><a class="ctl00_AjaxLoginView1_Menu2_1 TabMenuItem ctl00_AjaxLoginView1_Menu2_3" href="/eservice/TabPage5.aspx" style="border-style:none;font-size:1em;">TabPage5</a></td>
                </tr>
            </table></td>
        </tr>

    </table><a id="ctl00_AjaxLoginView1_Menu2_SkipLink"></a>

                      <div id="SiteContent">

                      </div>

                      <div class="SiteContentSpacer">
                      </div>

                </div>

Есть ли способ заставить элемент управления asp: Menu выплевывать ul и li вместо таблиц, чтобы я мог использовать свои существующие стили CSS для их правильного стиля или это безнадежная причина? Кто-нибудь еще сталкивался с подобной проблемой?

Answer 1

То, что вы ищете, называется CSS Friendly Adapters .

Это адаптер, который позволяет нескольким элементам управления выводить правильную структуру HTML, div, uls и т. Д.1005 *

Веселись!