将 onMouseOver Javascript 函数添加到 Asp.Net 动态菜单项答案

【问题标题】：Add onMouseOver Javascript Function to Asp.Net Dynamic Menu Items将 onMouseOver Javascript 函数添加到 Asp.Net 动态菜单项
【发布时间】：2012-10-24 01:19:29
【问题描述】：

当动态创建菜单项时，如何将鼠标悬停javascript函数添加到asp.net菜单项？不允许你添加 .attributes 函数。

[Javasript]

<script type="text/javascript">
    function ChangeProjectImage(obj) {
        var ctrl = document.getElementById(obj.id);
        ...code...
    }
</script>

[HTML - 菜单控件]

<asp:Menu ID="Menu1" runat="server" Orientation="Vertical" Font-Names="Verdana" Font-Size="12px"
        CssClass="Menu">
</asp:Menu>

[CodeBehind - 动态添加菜单项]

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Me.IsPostBack Then

    Else
        Dim dt As DataTable = Session("dt")

        For Each dr As DataRow In dt.Rows
            Dim mi As New MenuItem(dr(0), dr(1), "images\folder_03.png")
            Menu1.Items.Add(mi)
        Next

    End If

【问题讨论】：

您的项目中有 JQuery 吗？或者你可以使用 jQuery 吗？
这个项目没有JQuery，我还没用过。
经过大量研究，似乎不可能。我可能不得不使用带样式的无序列表。

标签： javascript asp.net

【解决方案1】：

我最终使用了一个数据网格控件。

HTML

<div style="clear: left; padding-right: 5px;">
      <asp:GridView ID="GridView1" runat="server" ShowHeader="False" GridLines="None"  BorderStyle="None" CssClass="MyGridView">
          <Columns>
              <asp:ImageField>
                  <ItemStyle Height="16px" Width="16px" />
              </asp:ImageField>
          </Columns>
      </asp:GridView>
 </div>

代码背后

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Me.IsPostBack Then

    Else
        ...code to fill datagrid

        For Each gr As GridViewRow In GridView1.Rows
            ...code
            gr.Attributes.Add("onmouseover", "ChangeProjectImage(""productimages/" & gr.Cells(2).Text & """,""" & gr.Cells(3).Text & """)")
            gr.Attributes.Add("onmouseout", "ChangeProjectImage(""images/display2.png"",""140"")")
        Next        
     End If

End Sub

JavaScript

  function ChangeProjectImage(imgpath, resizeheight) {
     var img1 = document.getElementById"MainContent_LeftTopTabContainer_ThumbTabPanel_Image2")
     img1.style.height = resizeheight
     img1.src = imgpath;
  }

【讨论】：