ASP.NET 4.0 之 Menu 控件的改进

ASP.NET 4.0 对控件呈现进行了优化，使其更符合W3C规范和Web开发的潮流，下面，我就拿Menu控件做个测试，在Visual Studio 2010中，Menu控件添加了RenderingMode 属性，可以设置呈现的方式，有Default、Table、List3种方式，既可以呈现为表格，也可以呈现为列表，默认就是以列表的方法呈现。

例子：

< %@ Page Language ="C#" % >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
     < title >ASP.NET 4.0 中 Menu 控件的改进 </title>
     < style type ="text/css" >
        li{ background: orange;}
     </style>
</head>
< body >
     < form id ="form1" runat ="server" >
    <asp:Menu ID="Menu1" runat="server" BorderColor="#0099FF" BorderStyle="solid" BorderWidth="1px"
        Orientation="Horizontal">
         < Items >
             < asp:MenuItem Text ="站点首页" Value ="Menu1" >
                 < asp:MenuItem Text ="dotnet.aspx.cc" Value ="dotnet.aspx.cc" NavigateUrl ="http://dotnet.aspx.cc" >
                 </asp:MenuItem>
                 < asp:MenuItem Text ="dotnet.51aspx.com" Value ="dotnet.51aspx.com" NavigateUrl ="http://dotnet.51aspx.com" >
                 </asp:MenuItem>
             </asp:MenuItem>
             < asp:MenuItem Text ="博客" Value ="Menu2" NavigateUrl ="http://blog.csdn.net/net_lover" >
             </asp:MenuItem>
         </Items>
     </asp:Menu>
     </form>
</body>
</html>

最终的结果（删除了不相关的内容）：

< style type ="text/css" >
        /* <![CDATA[ */
        #Menu1 { border-color:#0099FF;border-width:1px;border-style:Solid; }
        #Menu1 img.icon { border-style:none;vertical-align:middle; }
        #Menu1 img.separator { border-style:none;display:block; }
        #Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
        #Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
        #Menu1 ul.dynamic { z-index:1; }
        #Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
        #Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
        #Menu1 a.popout { background:url("/TestProject/WebResource.axd?d=1kaCIxW0NpU0bODZKwjWPYrWXkZJhb-uP0Rgs9N61A41&t=633924915785254369") no-repeat right center;padding-right:14px; }
        /* ]]> */
</style>

< a href ="#Menu1_SkipLink" >
     < img alt ="Skip Navigation Links" src ="/TestProject/WebResource.axd?d=6XmPcCQcVen94r0lESE4Ug2&t=633924915785254369"     width ="0" height ="0" style ="border-width: 0px;" /> </a>
< div id ="Menu1" >
     < ul class ="level1" >
         < li > < a class ="popout level1" href ="#" onclick ="__doPostBack('Menu1','Menu1')" > 站点首页 </a>
             < ul class ="level2" >
                 < li > < a class ="level2" href ="http://dotnet.aspx.cc" >dotnet.aspx.cc </a> </li>
                 < li > < a class ="level2" href ="http://dotnet.51aspx.com" >dotnet.51aspx.com </a> </li>
             </ul>
         </li>
         < li > < a class ="level1" href ="http://blog.csdn.net/net_lover" >博客 </a> </li>
     </ul>
</div>
< a id ="Menu1_SkipLink" > </a>