使用razor构建一个弹出式工具提示菜单

Using razor to build a popup tooltip menu

本文关键字：一个 弹出式 工具提示 菜单 razor 构建 使用      更新时间：2023-09-26

我在动态生成这个下拉菜单时遇到了问题。如果我不是动态创建它，它就会工作。

@t.Id在工作，并且每次在循环中都不同。我很确定是第一行错了，因为我以前用过id=""。

<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>

更有效地调试Razor(或任何服务器端代码呈现标记)的技巧:

  1. 查看渲染的HTML!对吗?
  2. 删除样式/脚本，直到你确定服务器正在呈现你想要的值。
    3. 添加一个断点到你的控制器，以确保你正在传递数据给视图。你的渲染逻辑可能没问题。

也就是说，你的代码看起来工作得很好。我隐藏了一些数据:

@{ 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>

这个收益率:

<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>

这里有一件事看起来真的不对，那就是'#tagsdiv1234'。你确定你的工具提示需要一个ID ，包括 CSS/jQuery ID选择器("#")吗?

另一件突出的事情是您的工具提示容器是用设置为display:none的外部div包装的。ID元素总是被隐藏的，因为它的父元素是隐藏的，即使工具提示代码试图显示它。

另一种可能是你的ID包含了元素标识符中非法的字符

相关文章：