Asp.net菜单显示在整个页面上 [英] Asp.net menu shows on the whole page

问题描述

大家好，

我有一个带有c＃的asp.net web应用程序，其中我使用菜单控件和站点地图来显示导航。我添加了在母版页中添加以下代码。

Hi all,
I have an asp.net web application with c# in which i am using menu control and site map to show the navigation. I have added added the following code in the master page.

 <table border="0" cellpadding="2" cellspacing="2" width="100%">
        <tr>
            <td valign="top" style="width: 100%;" colspan="3">
                <asp:Label ID="Permission" runat="server" Text="You do not have permission to view this screen."

                    Visible="false" Font-Bold="true" Font-Size="X-Large">
                <div>
                    <asp:Menu ID="NavigationMenu" runat="server" Style="padding-bottom: 0px; padding-top: 0px"

                        CssClass="NavigationMenuControl" StaticMenuStyle-CssClass="topNavMenu" DataSourceID="SiteMapDataSource1"

                        Orientation="Horizontal" MaximumDynamicDisplayLevels="2" StaticDisplayLevels="1"

                        StaticMenuItemStyle-CssClass="topNavigationMenu_Static_Item" StaticEnableDefaultPopOutImage="false"

                        StaticMenuItemStyle-HorizontalPadding="14" StaticMenuItemStyle-VerticalPadding="4"

                        StaticHoverStyle-BackColor="#EEDDFF" StaticHoverStyle-ForeColor="#0000ff" StaticSelectedStyle-ForeColor="#000000"

                        StaticSelectedStyle-BackColor="#EEDDFF" DynamicMenuItemStyle-HorizontalPadding="14"

                        DynamicMenuItemStyle-VerticalPadding="4px" DynamicMenuStyle-CssClass="topNavigationMenu_Dynamic"

                        DynamicMenuItemStyle-CssClass="topNavigationMenu_Dynamic_Item" DynamicHoverStyle-BackColor="#EEDDFF"

                        DynamicHoverStyle-ForeColor="#0000FF" OnMenuItemDataBound="NavigationMenu_ItemDataBound"

                        DynamicHoverStyle-BorderWidth="1px" DynamicHoverStyle-BorderColor="Black" DynamicHoverStyle-BorderStyle="Ridge"

                        DynamicMenuStyle-BorderWidth="1px" DynamicMenuStyle-BorderColor="Black" 

                        DynamicMenuStyle-BorderStyle="Ridge" onprerender="NavigationMenu_PreRender">
                        <items>
                            <asp:MenuItem PopOutImageUrl="~/Images/bulletArrow.gif">
                        </items>
                    
                    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
                </div>
            </td>
        </tr>
</table>

问题：当应用程序在较慢的连接上运行时，菜单控件在每个页面加载之前显示为整页。连接速度很快时，它工作正常。谁能告诉我为什么会这样呢？



提前致谢，

Sruthi R

Problem: When the application is run on a slower connection, the menu control is shown as a whole page just before every page load. It works fine when the connection is fast. Can anyone tell me why this happens?

Thanks in advance,
Sruthi R

推荐答案

这是因为当一个页面加载浏览器时，它们按照它们遇到的东西加载它们并可以下载它们。所以当你的页面加载时，浏览器读入所有HTML并显示它，然后它才能下载使菜单看起来正确的样式文件。在快速连接上，所有这一切都发生得如此之快，你无法分辨，但是在连接速度慢的情况下，样式表需要花费更长的时间才能下载，因此您的页面在很短的时间内看起来不对。



解决方案：将页面加载后的菜单设置为none，然后使用jQuery，将函数附加到ready事件，并在页面完全加载后将显示样式设置为空。这应该可以解决你的问题。



希望这会有所帮助，

Ed

It's because when a page is loading browsers load them in the order that they meet stuff and can download them in. So as your page loads the browser reads in all the HTML and displays it, only then can it download the style files that make your menu look right. On a fast connection all this happens so quickly you can't tell but on a slow connection the style sheet takes a lot longer to download so your page looks wrong for a short length of time.

Solution: Have your menu set to display none for when the page is loading then using jQuery, attach a function to the ready event and set the display style to empty after the page has fully loaded. this should solve your problem.

Hope this helps,
Ed

我使用Visual Studio 2010母版页，我的解决方案：



1-修改母版主页，按添加onload如下：



< body onload =document.getElementById（'div_navigation'）。style.display =''>



2-添加了Id ='div_navigation'和Style ='display：none;'div，其中包含如下导航菜单：

Hi,

I use Visual Studio 2010 Master Page, my solution:

1- Modify body of master page, by adding onload as the following:

<body onload="document.getElementById('div_navigation').style.display=''">

2- Added Id='div_navigation' and Style='display:none;' of div which hold the Navigation Menu as the below:

< asp：menu id =NavigationMenurunat =servercssclass =menuenableviewstate = falseincludestyleblock =falseorientation =Horizo​​ntalxmlns：asp =＃unknown>



因此，在页面加载时，导航菜单将被隐藏，直到所有样式表都已加载。

<asp:menu id="NavigationMenu" runat="server" cssclass="menu" enableviewstate="false" includestyleblock="false" orientation="Horizontal" xmlns:asp="#unknown">

So, while the page is loading, the navigation menu will be hided until all stylesheet loaded.

这篇关于Asp.net菜单显示在整个页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！