Asp.Net Trying to get ClientID

Question

I'm a bit stuck trying to figure out how to pass a controls ClientID to one of my JavaScript methods.

Edit: I'm realizing I should mention this is an Asp.Net App built on .Net 3.5. Can't use .Net 4.0 tricks but the 4.0 tricks you guys mentioned below in the replies are definately something to keep in mind and would solve this readily.

When I do something like what follows, I end up having my Javascript method getting the literal text of <%= gvCompanySelector.ClientID %> showing in my argument.

Below is what my Asp.Net control looks like in the Aspx page.

<asp:HyperLink ID="aShowList" runat="server" 
onclick="javacript:showCompanySelector('divCompanySelector','<%= gvCompanySelector.ClientID %>');" 
CssClass="button">Select</asp:HyperLink>

my javascript method looks like this.

function showCompanySelector(divName,gridName) {
            var elem = document.getElementById(divName);
            var gridElem = document.getElementById(gridName);
            if (elem.style.visibility === 'visible') {
                elem.style.visibility = 'hidden';
                elem.style.height = '0px';
                gridElem.style.height = '0px';
            }
            else {
                elem.style.visibility = 'visible';
                elem.style.height = '200px';
                gridElem.style.height = null;
            }
        }

It's my gridName argument that's getting a value of <%= gvCompanySelector.ClientID %> passed into it. When I'm expecting the argument to show something like the ct100_blahlbah_gvCompanySelector ClientID.

What kills me is that if I use just a standard Anchor tag, , the ClientID passes just fine.

And if the suggestion is to use an AddHandler or build the javascript call in my Code Behind, I'd like to avoid it. I'm trying to have some sense of consistency in this code. =-/

Thanks!

Answer 1

Best answer I found was to create a global variable. Probably like this less than using AddHandler type coding but at least it keeps my javascript WITH my javascript.

<script>
var gvCompanySelectorClientID = = '<%= gvCompanySelector.ClientID %>';

function showCompanySelector(divName,gridName) {
            var elem = document.getElementById(divName);
            var gridElem = document.getElementById(gridName);
            if (elem.style.visibility === 'visible') {
                elem.style.visibility = 'hidden';
                elem.style.height = '0px';
                gridElem.style.height = '0px';
            }
            else {
                elem.style.visibility = 'visible';
                elem.style.height = '200px';
                gridElem.style.height = null;
            }
        }

</script>

<asp:HyperLink ID="aShowList" runat="server" onclick="javacript:showCompanySelector('divCompanySelector','<%= gvCompanySelectorClientID %>');" CssClass="button">Select</asp:HyperLink>

Would love any other recommendations.

Answer 2

just use

 var elem = document.getElementById('the id of the required control');
            var gridElem = document.getElementById('the id of the required control');

no need to pass it to javascript,and change the clientIDmode of the control to static

Or

no need of passing it in the parameters

var gridElem = document.getElementById('<%= idofthecontrol.ClientID %>');

some times it may show the error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

then use

 var gridElem = document.getElementById('<%# idofthecontrol.ClientID %>');

Answer 3

Why you need to pass Client Id from your argument. You can do like this also.

function showCompanySelector(divName) {
        var elem = document.getElementById(divName);
        var gridElem = document.getElementById('<%= gvCompanySelector.ClientID %>');
        if (elem.style.visibility === 'visible') {
            elem.style.visibility = 'hidden';
            elem.style.height = '0px';
            gridElem.style.height = '0px';
        }
        else {
            elem.style.visibility = 'visible';
            elem.style.height = '200px';
            gridElem.style.height = null;
        }
    }

Another way of doing is for asp.net 4.0 Static client Id mode. You can override cilent mode as static and then you can pass 'gvCompanySelector' in your control it self.http://www.dotnetjalps.com/2009/07/client-id-of-control-in-aspnet-40.html

If you are using lower version of .NET Framework you can override client id like this - http://weblog.west-wind.com/posts/2006/Feb/24/Overriding-ClientID-and-UniqueID-on-ASPNET-controls

First create a class library called 'MyControls'. Add Referecen to System.web and then override grid view like below.

using System.Web.UI.WebControls;
namespace MyControls{
public class MyGrid : GridView
{
    public override string ClientID
    {
        get
        {
            return ID;
        }
    }
}}

Then on aspx side register your control like below.

<%@ Register Assembly="MyControls" Namespace="MyControls" TagPrefix="myc" %>

Then use control like below.

 <myc:Mygrid Id="myGrid" runat="server">

 </myc:Mygrid>

If you want to see more information about overriding control see following link-https://web.archive.org/web/20210323170551/http://www.4guysfromrolla.com/articles/012308-1.aspx