Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > BOOK: Beginning ASP.NET 4 : in C# and VB
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 17th, 2011, 02:53 AM
Authorized User
Points: 194, Level: 3
Points: 194, Level: 3 Points: 194, Level: 3 Points: 194, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 41
Thanks: 0
Thanked 1 Time in 1 Post
Default The Menu Control and master pages

Hi,

In the book, Imar explained how to use the Menu control with CSS. However, I have only five pages in my site and I am certain they will NEVER grow beyond that. I tried to use the Menu control, but I am having some problem styling it.

Question 1: What is the following code doing? This is the code generated by the Menu control. I am trying to understand the SkipLink part.

Code:
<a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=Idr1HSiUoOQ1fescIX0AgjpK7asQDvvHnfGipUu6oepr-_Z8jV4WQvyDyvkT7s7k_Ifc79s-ncX7QCQYKaQXi8aryKmDi-3lYb937mhlgPg1&amp;t=634545787075746554" width="0" height="0" style="border-width:0px;" /></a><div class="Menu" id="Menu1">
Question 2. Does the number of levels in the Menu control affect the CSS?

Question 3. Finally, since I could not get the menu control to appear the way I want it to, I decided to use a <ul> element like this:

Code:
<div id="Menu">
                    <ul>
                        <li><a class="default" href="Default.aspx" title="Home">Home</a></li>
                        <li><a class="service" href="Services.aspx" title="Our Services">Services</a></li>
                        <li><a class="gallery" href="Gallery.aspx" title="Photo Gallery">Gallery</a></li>
                        <li><a class="about" href="AboutUs.aspx" title="All About Us">About Us</a></li>
                        <li><a class="contact" href="ContactUs.aspx" title="Contact Us">Contact Us</a></li>
                        <li class="clear"></li>
                    </ul>
                </div>
Now the problem I got using this method is that, I could not access the individual <a> elements because am using a master page. I needed to access the individual <a> elements so that I could change their appearance when the page is active. I have this css class I have written called 'selected'. It should differentiate the link so that a visitor can easily tell which page she is visiting.

So, I decided to write some jQuery based on what imar explained in the book. The thing is, I am having the feeling that my jQuery code is too redundant and I am guessing there is a better way to do it.

Here is my jQuery:

Code:
function AddClass()
        {
            switch (document.title)
            {
                case 'Ruby | Home':
                    $('.default').addClass('selected');
                    $('.service').removeClass('selected');
                    $('.gallery').removeClass('selected');
                    $('.about').removeClass('selected');
                    $('.contact').removeClass('selected');
                    break;
                case 'Ruby | Services':
                    $('.default').removeClass('selected');
                    $('.service').addClass('selected');
                    $('.gallery').removeClass('selected');
                    $('.about').removeClass('selected');
                    $('.contact').removeClass('selected');
                    break;
                case 'Ruby | Gallery':
                    $('.default').removeClass('selected');
                    $('.service').removeClass('selected');
                    $('.gallery').addClass('selected');
                    $('.about').removeClass('selected');
                    $('.contact').removeClass('selected');
                    break;
                case 'Ruby | About Us':
                    $('.default').removeClass('selected');
                    $('.service').removeClass('selected');
                    $('.gallery').removeClass('selected');
                    $('.about').addClass('selected');
                    $('.contact').removeClass('selected');
                    break;
                case 'Ruby | Contact Us':
                    $('.default').removeClass('selected');
                    $('.service').removeClass('selected');
                    $('.gallery').removeClass('selected');
                    $('.about').removeClass('selected');
                    $('.contact').addClass('selected');
                    break;

            }
Since my jQuery is solely dependent on the titles of the page, I have enforced the page titling system in a Basepage class; very similar to what we covered in the book.

Is my code a best practice based on what Imar taught in the book?
Reply With Quote
  #2 (permalink)  
Old December 17th, 2011, 05:35 AM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 50%
Activity: 50% Activity: 50% Activity: 50%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi malie22001,

1) SkipLink is for screen readers for visually impaired users. This way, the user has the opportunity to skip reading out the navigation each time the page loads.

2) Probably, depending on how you want to present it. You may need different CSS for a menu with three or more items. Search Google for CSS suckerfish menu to see some examples.

3) You can add runat="server" to the <a> elements so you can address them server side. Not sure why you need this though; the Menu should give you similar HTML and is then much easier to influence and maintain server side.

Quote:
The thing is, I am having the feeling that my jQuery code is too redundant and I am guessing there is a better way to do it.
That's correct. Since this code fires after a page refresh, you don't need all these removeClass code as the class is never applied in the first place.

Rather than using jQuery, you could do this server side. Look at Page.Title and then set the CSS on the a element from server code.

Quote:
Is my code a best practice based on what Imar taught in the book?
If it works it works. Personally, I don't like this hard coded stuff. You're sure it won't change now, but reality is always different. Finding out why a new page won't highlight when you add it a year from now may be difficult. I would try to see if you can make the Menu work as you want, as it renders clean HTML and allow for easy maintenance server-side.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old December 18th, 2011, 03:18 PM
Authorized User
Points: 194, Level: 3
Points: 194, Level: 3 Points: 194, Level: 3 Points: 194, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 41
Thanks: 0
Thanked 1 Time in 1 Post
Default

Thank you once again Imar for responding to my post.

As you advised, I managed to get the menu control work as i wanted and i also implemented the 'selected' class on the server using the Page_Load event.

Now my problem is with jQuery and browser compatibility. In the book, you mentioned that jQuery is a JavaScript library that makes using the scripting language easier and also reduces the many differences between browsers.

Now my question has to do with with wiring events to controls.

1. I notice that server-side controls are mostly not recognized when you try to program against them in JavaScript. Mostly, they will only work when you refer to them by their css class name, even if you use the <%%> to get the ClientID. Also, the browsers do not seem to apply some JavaScript methods and properties on server controls.

For example, I have a server-side textbox control with class name 'directions'.

Code:
<asp:TextBox class="directions" ID="TextBox1" runat="server" ReadOnly="True" TextMode="MultiLine"></asp:TextBox>
I tried to access it from jQuery with the following code:

Code:
$(function()
{
    $('.directions').innerHTML = someValue;
});
It worked in IE, FireFox and Opera, but did not work in Safari and Chrome.

In another instance; this time with an html element.

I have the following code that is supposed to display the bing map and print out the directions for my location in the div element and then display the div element.

Initially when the page loads, the div element is hidden. Since I could not get all browsers to agree on the textbox, I changed it to a div. Below is my JavaScript is my code:

Code:
<script type="text/javascript">
          $(function ()
          {
              $('.directions').hide();
              var map = null;
              map = new VEMap('myMap');
              map.LoadMap(new VELatLong(39.9627544730902, -75.2523048967123), 16, VEMapStyle.Road, false);

              //get the center of the map
              var pinpoint = map.GetCenter();

              //declare shape of map in order to locate the center of the map
              shape = new VEShape(VEShapeType.Pushpin, pinpoint);
              shape.SetTitle("Ruby's Beauty Salon");
              shape.SetDescription("We are located here. To get directions to come here, " +
                                 "simply enter your current address in the textbox below " +
                                 "and hit 'Get Directions'. If you have any questions, please " +
                                 "call us on 610-446-2662.");
              map.AddShape(shape);

              $('#DirectionButton').click(function GetDirections()
              {
                  var what = document.getElementById('DirectionTextBox').value;
                  var options = new VERouteOptions();
                  options.DrawRoute = true;
                  options.SetBestMapView = false;
                  options.RouteCallback = onGotRoute;
                  map.GetDirections([what, map.GetCenter()], options);
              });

          });


          function onGotRoute(route)
          {
              try
              {
                  var legs = route.RouteLegs;
                  var turns = "<h1>Total distance: " + route.Distance.toFixed(1) + " mi</h1><br />";
                  var numTurns = 0;
                  var leg = null;
                  for (var i = 0; i < legs.length; i++)
                  {
                      leg = legs[i];
                      var turn = null;
                      for (var j = 0; j < leg.Itinerary.Items.length; j++)
                      {
                          turn = leg.Itinerary.Items[j];
                          numTurns++;
                          turns += "<ul><li>" + numTurns + ".&nbsp;" + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)</li></ul>";
                      }
                  }


                  document.getElementById("DirectionResults").innerHTML = turns;
                  $('.directions').slideDown('5000');
              }
              catch (err)
              {

              }
          }
    </script>
Note that I already have all the references to those libraries, in the master page.

Then in my html, I have the following code:

Code:
   <!--This is the div where the map is displayed-->
   <div id="myMap" style="width:770px; height:534px">
    
    </div>

    <!--This is the textbox where a user enter her current location address-->
    <input id="DirectionTextBox" type="text" name="DirectionTextBox" />
    
    <!--When the user clicks this button, the direction to my location is supposed to be populated in the DirectionResults div below and then the div is supposed to slide down-->
    <input id="DirectionButton" type="button" onclick=" name="DirectionButton" value="Get Directions"  /><br />
    <br />
    
    <div id="DirectionResults" class="directions"></div>
The map potion works fine in all browsers. It is displayed well in the map div. The problem is with the event wiring for the DirectionButton. When I test the app, the button click event works for all browsers besides Opera. Is there a way to get the code to work in all browsers?

Is there any explanation for the way the browsers differentiate server controls from html elements?

I know this is a lot, but I hope I have given enough information.

Thank you once again...
Reply With Quote
  #4 (permalink)  
Old December 18th, 2011, 03:36 PM
Authorized User
Points: 194, Level: 3
Points: 194, Level: 3 Points: 194, Level: 3 Points: 194, Level: 3
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 41
Thanks: 0
Thanked 1 Time in 1 Post
Default

Sorry Imar and guys,

I see my own mistake. The fault was not from the browsers. In my code, I had a jQuery wired event to the button control while at the same time had an unclosed onclick=" attribute on the button control itself.

It seems like the other browsers forgave me for it while Opera punished me.

Any way, Imar, could you please explain a little about how the browsers view html elements and server controls in terms of rendering?

Thank you very much.
Reply With Quote
  #5 (permalink)  
Old December 18th, 2011, 03:50 PM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 50%
Activity: 50% Activity: 50% Activity: 50%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

innerHTML is not a JavaScript method, so it probably won't work on the matched set directly. Instead, you want to use jQuery's html method if you want to assign HTML.

Also, innerHTML doesn't make sense for a text box as it doesn't contain inner elements. Instead, you probably want to use val:

$('.directions).val("whatever");

This sets the value attribute of a control such as <input type="text" /> or the contents of a textarea.

Quote:
I notice that server-side controls are mostly not recognized when you try to program against them in JavaScript. Mostly, they will only work when you refer to them by their css class name, even if you use the <%%> to get the ClientID.
That shouldn't be the case. From jQuery's perspective, there *is* only client side HTML. Sounds like your IDs are not what you expect. Can you post an example?

Quote:
Any way, Imar, could you please explain a little about how the browsers view html elements and server controls in terms of rendering?
There is no difference. At all. A browser doesn't know anything about server controls, all it sees is the client side HTML that these conrols emit. From the browser's perspective there is absolutely no difference between HTML created by a server side control, and HTML that started out as plain text. E.g the following in a server side page:

Code:
 
<asp:TextBox ID="TextBox1" runat="server" />
<input name="TextBox2" type="text" id="TextBox2"  />
renders this HTML at the client:

Code:
 
<input name="TextBox1" type="text" id="TextBox1" />
<input name="TextBox1" type="text" id="TextBox2"  />
Notice how there's no difference, other than the client side ID and name attributes.

Hope this helps,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
General question - Master Pages, Base pages, templates and OOP. flapjack BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 2 May 1st, 2010 09:33 AM
Master Pages micptpuser ASP.NET 2.0 Basics 6 January 8th, 2009 04:50 AM
Master Pages Jayahar ASP.NET 3.5 Basics 1 September 2nd, 2008 04:20 PM
Master Pages, Content Pages and CSS carliviris Visual Studio 2005 0 January 8th, 2008 05:56 PM
Master pages &server control ID - asp.net 2.0 tech user C# 2005 1 August 3rd, 2006 04:31 AM



All times are GMT -4. The time now is 02:47 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.