chapter 7 (menu control)

rock1233 · September 6th, 2009, 04:52 PM

Hello Imar,

First I want to thank you for your great book.

I am now in chapter 7 about navigation and i put the menu control in the master page as you instructed, and the program is running correctly, but the problem occurs when i hover the mouse over the items of the menu, instead of seeing the submenues, the program crashes and i get a jscript error :

"Microsoft JScript runtime error : object expected."

The error is in the HTML file in these lines : onmouseover="Menu_HoverStatic(this)".

I am using IE6 as my browser, might this be the problem ?

any help would be highly appreciated.

Thanks.

Imar · September 9th, 2009, 12:55 PM

Hi there,

When you look at the HTML of the page, do things look OK to? It sounds as if somehow your JavaScript for the menu is not loaded.

The Menu is a standard ASP.NET feature and AFAIK, the menu should be supported in IE 6.

Also, make sure your own code (if any) is not creating a problem.

If you can't make it work, can you post the Markup for the Master Page and the final HTML of the page in the browser? If you post it here, please use code tags and the Remove Code FOrmatting button on the toolbar or the code will be messed up.

Cheers,

Imar

rock1233 · September 10th, 2009, 01:57 PM

Hi again Imar,

Please find below the Markup for the Master Page and the final HTML of the page in the browser :

Markup for the Master Page:

Code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!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>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
       <div id="Header">Header Goes Here<a class="HeaderLink" href="~/" runat="server" ></a> </div> 
       <div id="MenuWrapper">
           <asp:Menu ID="Menu1" runat="server" CssClass ="MainMenu" 
               DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
               StaticEnableDefaultPopOutImage="False">
               <StaticSelectedStyle CssClass="StaticSelectedStyle" />
               <StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
               <DynamicHoverStyle CssClass="DynamicHoverStyle" />
               <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
               <StaticHoverStyle CssClass="StaticHoverStyle" />
           </asp:Menu>
           <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
               ShowExpandCollapse="False" PopulateNodesFromClient="False">
           </asp:TreeView>
           <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
               ShowStartingNode="False" />
       </div>
       <div id="MainContent">
         <asp:SiteMapPath ID="SiteMapPath1" runat="server">
         </asp:SiteMapPath><br /><br />
         <asp:ContentPlaceHolder id="cpMainContent" runat="server">
         </asp:ContentPlaceHolder>
       </div>
       <div id="Sidebar">Select a Theme 
           <asp:DropDownList ID="lstPreferredTheme" runat="server" AutoPostBack="True">
               <asp:ListItem>Monochrome</asp:ListItem>
               <asp:ListItem>DarkGrey</asp:ListItem>
           </asp:DropDownList>
           <br />
           <br />
           <br />
           <Wrox:Banner ID="Banner1" runat="server" DisplayDirection="Vertical"/>
       </div>
       <div id="Footer">Footer Goes Here</div>
    </div>
    </form>
</body>
</html>

final HTML of the page in the browser :
[code]

<STRONG><!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><title>
Default.aspx
</title>
<link href="App_Themes/DarkGrey/DarkGrey.css" type="text/css" rel="stylesheet" /><style type="text/css">
.ctl00_TreeView1_0 { text-decoration:none; }

</style></head>
<body>
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="ctl00_TreeView1_ExpandState" id="ctl00_TreeView1_ExpandState" value="nennennn" />
<input type="hidden" name="ctl00_TreeView1_SelectedNode" id="ctl00_TreeView1_SelectedNode" value="ctl00_TreeView1n0" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWCAIDDzwrAA0 BAA8WAh4HVmlzaWJsZWhkZAIFDzwrAAkCAA8WBh4NTmV2ZXJFe HBhbmRlZGQeC18hRGF0YUJvdW5kZx4MU2VsZWN0ZWROb2RlBRF jdGwwMF9UcmVlVmlldzFuMGQIFCsABQUPMDowLDA6MSwwOjIsM DozFCsAAhYQHgRUZXh0BQRIb21lHgVWYWx1ZQUESG9tZR4LTmF 2aWdhdGVVcmwFDS9EZWZhdWx0LmFzcHgeB1Rvb2xUaXAFEkdvI HRvIHRoZSBob21lcGFnZR4IRGF0YVBhdGgFDS9kZWZhdWx0LmF zcHgeCURhdGFCb3VuZGceCFNlbGVjdGVkZx4IRXhwYW5kZWRnZ BQrAAIWDh8EBQdSZXZpZXdzHwUFB1Jldmlld3MfBgUVL1Jldml ld3MvRGVmYXVsdC5hc3B4HwcFHVJldmlld3MgcHVibGlzaGVkI G9uIHRoZSBzaXRlHwgFFS9yZXZpZXdzL2RlZmF1bHQuYXNweB8 JZx8LZxQrAAMFBzA6MCwwOjEUKwACFg4fBAUIQnkgR2VucmUfB QUIQnkgR2VucmUfBgUYL1Jldmlld3MvQWxsQnlHZW5yZS5hc3B 4HwcFHEFsbCBSZXZpZXdzIEdyb3VwZWQgYnkgR2VucmUfCAUYL 3Jldmlld3MvYWxsYnlnZW5yZS5hc3B4HwlnHwtnZBQrAAIWDh8 EBQtBbGwgUmV2aWV3cx8FBQtBbGwgUmV2aWV3cx8GBREvUmV2a WV3cy9BbGwuYXNweB8HBQtBbGwgUmV2aWV3cx8IBREvcmV2aWV 3cy9hbGwuYXNweB8JZx8LZ2QUKwACFg4fBAUFQWJvdXQfBQUFQ WJvdXQfBgUTL0Fib3V0L0RlZmF1bHQuYXNweB8HBQ9BYm91dCB 0aGlzIFNpdGUfCAUTL2Fib3V0L2RlZmF1bHQuYXNweB8JZx8LZ xQrAAMFBzA6MCwwOjEUKwACFg4fBAUKQ29udGFjdCBVcx8FBQp Db250YWN0IFVzHwYFEy9BYm91dC9Db250YWN0LmFzcHgfBwUKQ 29udGFjdCBVcx8IBRMvYWJvdXQvY29udGFjdC5hc3B4HwlnHwt nZBQrAAIWDh8EBQhBYm91dCBVcx8FBQhBYm91dCBVcx8GBRMvQ WJvdXQvQWJvdXRVcy5hc3B4HwcFCEFib3V0IFVzHwgFEy9hYm9 1dC9hYm91dHVzLmFzcHgfCWcfC2dkFCsAAhYOHwQFBUxvZ2luH wUFBUxvZ2luHwYFCy9Mb2dpbi5hc3B4HwcFF0xvZyBpbiB0byB 0aGlzIHdlYiBzaXRlHwgFCy9sb2dpbi5hc3B4HwlnHwtnZGQCD Q8QZGQWAQIBZAIPD2QWBGYPDxYCHwBnZBYCAgEPFgIeBGhyZWY FDn4vZGVmYXVsdC5hc3B4ZAICDw8WAh8AaGRkGAEFHl9fQ29ud HJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQ9jdGwwMCRUcmV lVmlldzGxUPa4OzqfqWKTRW2/9StDwML5Dg==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

<script src="/WebResource.axd?d=RSaG9i_qqH7ZGMaLCZHwTw2&t=63 3482540823593750" type="text/javascript"></script>

<script src="/WebResource.axd?d=7JHlqNc8J-VsDlEoGs0p6w2&t=633482540823593750" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var ctl00_TreeView1_Data = null;//]]>
</script>

<div id="PageWrapper">
<div id="Header">Header Goes Here<a href="./" class="HeaderLink"></a> </div>
<div id="MenuWrapper">

<a href="#ctl00_TreeView1_SkipLink"><img alt="Skip Navigation Links." src="/WebResource.axd?d=z8Js7-wq1-JLmco1Y7cycg2&t=633482540823593750" width="0" height="0" style="border-width:0px;" /></a><div id="ctl00_TreeView1">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/Default.aspx" title="Go to the homepage" id="ctl00_TreeView1n0">Home</a></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/Reviews/Default.aspx" title="Reviews published on the site" id="ctl00_TreeView1n1">Reviews</a></td>
</tr>
</table><div id="ctl00_TreeView1n1Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/Reviews/AllByGenre.aspx" title="All Reviews Grouped by Genre" id="ctl00_TreeView1n2">By Genre</a></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/Reviews/All.aspx" title="All Reviews" id="ctl00_TreeView1n3">All Reviews</a></td>
</tr>
</table>
</div><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/About/Default.aspx" title="About this Site" id="ctl00_TreeView1n4">About</a></td>
</tr>
</table><div id="ctl00_TreeView1n4Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/About/Contact.aspx" title="Contact Us" id="ctl00_TreeView1n5">Contact Us</a></td>
</tr>
</table><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/About/AboutUs.aspx" title="About Us" id="ctl00_TreeView1n6">About Us</a></td>
</tr>
</table>
</div><table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_TreeView1_0" href="/Login.aspx" title="Log in to this web site" id="ctl00_TreeView1n7">Login</a></td>
</tr>
</table>
</div><a id="ctl00_TreeView1_SkipLink"></a>

</div>
<div id="MainContent">
<span id="ctl00_SiteMapPath1"><a href="#ctl00_SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/WebResource.axd?d=z8Js7-wq1-JLmco1Y7cycg2&t=633482540823593750" style="border-width:0px;" /></a><span><a title="Home" href="/">Home</a></span><span> > </span><span>Home</span><a id="ctl00_SiteMapPath1_SkipLink"></a></span><br /><br />

<h1>
Hi there visitor and welcome to Planet Wrox</h1>
<p class="Introduction">
We're glad you're paying a visit to
<a href="

Imar · September 11th, 2009, 05:13 AM

Hi there,

Are you sure you posted the correct HTML? This code seems to be for the TreeView, not the Menu. Also, did you deliberately post only parts of the HTML (it's cut off in the middle) or is that due to form limitations? Finally, where's the <STRONG> tag coming from?

What happens when you create a brand new, empty Web Form (not based on a Master Page) and add a Menu and data source to the page. Does it work then? Maybe some other code is interfering with yours, so creating a clean page may help in discovering the actual problem.

Cheers,

Imar

rock1233 · September 15th, 2009, 06:27 AM

Hello Imar,

Sorry for the HTML, I didn't cut it off in the middle, I think it is due to form limitations. And also the <STRONG> tag is not from my code.

I did as you told me, I created a new website without a masterpage and I only added a menu control and a datasource and I am having the same problem when I run it. I am sending you the markup of the default page and the final HTML of the browser (when I click view source) .

( Please note that not only the menu control is making that problem, also the treeview and all the controls that automatically generate javascript files ).

Markup of the Default page :

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
            Orientation="Horizontal">
        </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
            ShowStartingNode="False" />
    </div>
    </form>
</body>
</html>

final HTML of the page in the browser :

Code:

<!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><title>
 Untitled Page
</title><style type="text/css"> 
 .Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
 .Menu1_1 { text-decoration:none; }
 .Menu1_2 {  }
 
</style></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzNDM1ODM1MjcPZBYCAgMPZBYCAgEPPCsADQIADxYCHgtfIURhdGFCb3VuZGdkDBQrAAMFBzA6MCwwOjEUKwACFhIeBVZhbHVlBQRIb21lHglEYXRhQm91bmRnHghTZWxlY3RlZGceBFRleHQFBEhvbWUeC05hdmlnYXRlVXJsBQ0vRGVmYXVsdC5hc3B4HgdFbmFibGVkZx4KU2VsZWN0YWJsZWceB1Rvb2xUaXAFEkdvIHRvIHRoZSBob21lcGFnZR4IRGF0YVBhdGgFDS9kZWZhdWx0LmFzcHhkFCsAAhYQHwQFBUl0ZW1zHwEFBUl0ZW1zHwUFEi9JdGVtL0RlZmF1bHQuYXNweB8IBQtHbyB0byBpdGVtcx8GZx8HZx8JBRIvaXRlbS9kZWZhdWx0LmFzcHgfAmcUKwADBQcwOjAsMDoxFCsAAhYQHwQFBUl0ZW0xHwEFBUl0ZW0xHwUFCy9JdGVtL0l0ZW0xHwgFC0dvIHRvIEl0ZW0xHwZnHwdnHwkFCy9pdGVtL2l0ZW0xHwJnZBQrAAIWEB8EBQVJdGVtMh8BBQVJdGVtMh8FBQsvSXRlbS9JdGVtMh8IBQtHbyB0byBJdGVtMh8GZx8HZx8JBQsvaXRlbS9pdGVtMh8CZ2RkGAEFBU1lbnUxDw9kBQRIb21lZILCaVrfHWTfY6sSCZGUGDRjfCkO" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=RSaG9i_qqH7ZGMaLCZHwTw2&amp;t=633482540823593750" type="text/javascript"></script>
 
 
<script src="/WebResource.axd?d=w-knwjL1m00H0jxOFjvc6w2&amp;t=633482540823593750" type="text/javascript"></script>
    <div>
        <a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=z8Js7-wq1-JLmco1Y7cycg2&amp;t=633482540823593750" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Go to the homepage" id="Menu1n0"><table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
    <td style="white-space:nowrap;"><a class="Menu1_1" href="/Default.aspx">Home</a></td>
   </tr>
  </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Go to items" id="Menu1n1"><table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
    <td style="white-space:nowrap;"><a class="Menu1_1" href="/Item/Default.aspx">Items</a></td><td style="width:0;"><img src="/WebResource.axd?d=5jL8-DsFVi4i3mBWJDfGIkpdFrfnnMUz67t--XZPtHs1&amp;t=633482540823593750" alt="Expand Items" style="border-style:none;vertical-align:middle;" /></td>
   </tr>
  </table></td>
 </tr>
</table><div id="Menu1n1Items" class="Menu1_0">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Go to Item1" id="Menu1n2">
   <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
     <td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="/Item/Item1">Item1</a></td>
    </tr>
   </table></td>
  </tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Go to Item2" id="Menu1n3">
   <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
     <td style="white-space:nowrap;width:100%;"><a class="Menu1_1" href="/Item/Item2">Item2</a></td>
    </tr>
   </table></td>
  </tr>
 </table><div class="Menu1_0" id="Menu1n1ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
  <img src="/WebResource.axd?d=oaMVPltbMwRG1hZxCbYvM4sme0aiX3FciFPlqzuMcN01&amp;t=633482540823593750" alt="Scroll up" />
 </div><div class="Menu1_0" id="Menu1n1ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
  <img src="/WebResource.axd?d=D9UZv4HE4NpW01TcaZjf-ujoLWnPim4QQTup6y_6J8A1&amp;t=633482540823593750" alt="Scroll down" />
 </div>
</div><a id="Menu1_SkipLink"></a>
 
    </div>
 
 
<script type="text/javascript"> 
//<![CDATA[
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 0;
Menu1_Data.verticalOffset = 0;
//]]>
</script>
</form>
</body>
</html>

Imar · September 15th, 2009, 01:05 PM

That's very strange. Does the menu work on www.planetwrox.com ?

Sounds like something is wrong with your browser. Have you tried a different browser like Firefox?

Imar

rock1233 · September 19th, 2009, 02:44 PM

Hello Imar ,

Problem solved at last.
I formatted my computer and now everything is working fine, the menu control and all the other java controls. It seems that something was wrong with my machine.

Thanks for ur time and ur help.