Using razor to build a popup tooltip menu

Question

I am having a problem with dynamically generating this dropdown menu. This works if I'm not making it dynamically.

The @t.Id is working and is different every time in the loop. I'm pretty sure its the first line that's wrong as I have used the id="" before this way.

<b><a href="#" onmouseover="tooltip.pop(this, '#tagsdiv@(t.Id)')">tagged</a></b>

<div style="display: none;">
    <div id="tagsdiv@(t.Id)">
        <span class="menu">hhhh<br />
            nnnn
            @for( int i = 0; i < t.tTags.Count; i++ ) {
                <b>@Html.ActionLink( t.tTags[i], "TagDetail", "Forums", new { tag = t.tTags[i], page = 0 }, null )</b>
            }
        </span>
    </div>
</div>

thought I would add the popup works but doesnt contain the div — mxadam, Apr 07 '13 at 01:14
What's not working? I fired this up with some sample data and it renders a list of a links, and inserts IDs where you would expect. — Tim M., Apr 07 '13 at 01:36
This should work. Where are you getting error ?what error message you are getting ? — Shyju, Apr 07 '13 at 01:39
strange guys, the popup shows but it doesnt include the div, if I load it up eg this, '#tagsdiv') then make the div just tagsdiv it will work fine. no error just isnt loading the div once add it inside a loop with @(t.Id) — mxadam, Apr 07 '13 at 01:43
also if i make it (this, 'some text') it will show the some text in the div, so deffo a linking error — mxadam, Apr 07 '13 at 01:45
I listed out some possibilities for you. It would help to see the rendered HTML. — Tim M., Apr 07 '13 at 01:46

score 0 · Accepted Answer · edited May 23 '17 at 12:13

Tips to debug Razor (or any server-side code rendering markup) more effectively:

View the rendered HTML! is it correct?
Remove styles/scripts until you are sure the server is rendering the values you want.
Add a breakpoint to your controller to make sure you are passing data to the view. Your rendering logic may be fine.

That said, your code appears to work fine. I dummied up some data:

@{ var t = new { Id = 1234, tTags = new List<string> { "foo", "bar", "baz" } }; }

<b><a href="#" onmouseover="tooltip.pop(this, '#tagsdiv@(t.Id)')">tagged</a></b>

<div style="display: none;">
    <div id="tagsdiv@(t.Id)">
        <span class="menu">
                @for( int i = 0; i < t.tTags.Count; i++ ) {
                    <b>@Html.ActionLink( t.tTags[i], "TagDetail", "Forums", new { tag = t.tTags[i], page = 0 }, null )</b>
                }
        </span>
    </div>
</div>

This yields:

<b><a href="#" onmouseover="tooltip.pop(this, '#tagsdiv1234')">tagged</a></b>

<div style="display:none;">
     <div id="tagsdiv1234">
        <span class="menu"> 
            <b><a href="">foo</a></b>
            <b><a href="">bar</a></b>
            <b><a href="">baz</a></b>
        </span>
    </div>
</div>

One thing that really looks wrong here is '#tagsdiv1234'. Are you sure your tooltip needs an ID including the CSS/jQuery ID selector ("#")?

Another thing that stands out is your tooltip container is wrapped with an outer div set to display:none. The ID'd element will always be hidden because its parent is hidden, even if the tooltip code tries to show it.

Another possibility is that your ID contains a character illegal in an element identifier.

cheers tim havnt thought about debbugging in that way. Either way this is rather odd. The T.Id is just a number (a topic id) which im also using to create a actionlink button for each topic which works fine. Ive tried deleting each part of the css attached to it. Very odd, can only really be a javascript problem then? and thats way too big to post here :) — mxadam, Apr 07 '13 at 02:00
but saying that if i can make it 'some text' and it shows but then instead add this div to it and it wont that means its not a javascript problem? confused as hell lol — mxadam, Apr 07 '13 at 02:02
Based on what you described, yes, it could be a JS or CSS problem. What if you remove the "display:none"? — Tim M., Apr 07 '13 at 02:03
removed the display none and it changed nothing. Got it to work by removing the span inside the div which is rather odd as I have used this exact layout in another page. very odd, cheers for the help. +1 on the debugging tip — mxadam, Apr 07 '13 at 02:08

Using razor to build a popup tooltip menu

1 Answers1