4 Replies - 1108 Views - Last Post: 22 June 2012 - 10:21 AM Rate Topic: -----

#1 programer4Fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-June 12

Accessing ASP controls with JavaScript

Posted 06 June 2012 - 02:05 PM

Hi everyone. I have spent the my whole day surfing the web for examples on accessing ASP controls in Javascript. I want to do this either to get data from the control or to change the control's properties. These websites show some examples, anuragbhandari.com and microsoft.com, but I still can't access the control. The control currently has a text of "Home"
Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

<!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></title>
</head>
<body>
    <script type = "text/javascript">
        function getText() {
            var text = document.getElementById('Menu1').value;
            alert(text);
        }
        
    </script>

    <form id="form1" runat="server">
    <div onmouseover = "getText();" style="width: 43px">
    
        <asp:Menu ID="Menu1" runat="server">
        <Items>
        <asp:MenuItem Text = "Home"></asp:MenuItem>
        </Items>
        
        </asp:Menu>
        </div>
    </form>
</body>
</html>




I am expecting to see a popup using the "alert" function with the text "Home" but it says undefined. So I believe that I am still not accessing the ASP controls properties. What am I doing wrong? Thank you for your help.

Is This A Good Question/Topic? 0
  • +

Replies To: Accessing ASP controls with JavaScript

#2 CasiOo  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1373
  • View blog
  • Posts: 3,025
  • Joined: 05-April 11

Re: Accessing ASP controls with JavaScript

Posted 06 June 2012 - 02:25 PM

edit:
Wouldnt it work if you wrote
document.getElementById('Menu1').getAttribute("Text");


This post has been edited by CasiOo: 06 June 2012 - 02:26 PM

Was This Post Helpful? 0
  • +
  • -

#3 programer4Fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-June 12

Re: Accessing ASP controls with JavaScript

Posted 06 June 2012 - 04:11 PM

It is returning null. It seems that just using Menu1 as its ID is not enough since I am not telling which item to get from the Menu1.
Was This Post Helpful? 0
  • +
  • -

#4 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1524
  • View blog
  • Posts: 5,957
  • Joined: 21-March 08

Re: Accessing ASP controls with JavaScript

Posted 18 June 2012 - 05:53 AM

You should understand how ASP.Net handles control names. Just because you give it the name of Menu1 doesn't mean that's the name in HTML when it's sent to the browser. Do a simple View Source on the page and you will see that the menu's name has changed.

To get that value, you need to use the ClientID property. So something like this might work...

function getText() {
     var text = document.getElementById('<%= Menu1.ClientID %>').value;
     alert(text);
}



This will get the ClientID of the Menu1 control.
Was This Post Helpful? 0
  • +
  • -

#5 s_kucksdorf  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 69
  • Joined: 12-May 09

Re: Accessing ASP controls with JavaScript

Posted 22 June 2012 - 10:21 AM

It depends on the version of ASP.net you are using. .Net 4.0 allows you to have complete control over the rendered ID of an ASP.net control (the client side control id is the same as the server side control ID). But this is not by default. In the web.config, under <system.web> make sure to have the line "<pages clientIDMode="Static"/>". But this only works in asp.net 4.0!

Otherwise use eclipsed4utoo's suggestion.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1