Click here to Skip to main content
15,893,668 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi friends.

I have below requirement.

Supponse, I am developing custome server control which is rendering in 'DIV' tag.

I have one property named 'AccessControlID' in this custom control class. I have also one javascrit in this class where I want to access this proeprty.

for example. AccessControlID should be retrive this way.

var divObj = document.getElementById('MyCustomControlIDHere');
var accessControlID = divObj.AccessControlID;

Does it possible?

Thanks
Posted

Yes this is possible.

when you acsess it via an document's object (divObj.AccessControlID) therefore it is expected that your custom control is rendered like this:

XML
<span AccessControlID="Something" id="SomeID"></span>




I have used span tag in above line for explaining purpose only here. You can assume your div tag also. Not a problem. :)

If that you want to do that, you have to override the following method in your custom control class( Here is sample code block that I tried )



C#
[DefaultProperty("Text")]
    [ToolboxData("<{0}:WebCustomControl1 runat=server></{0}:WebCustomControl1>")]
    public class WebCustomControl1 : WebControl
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string Text
        {
            get
            {
                String s = (String)ViewState["Text"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["Text"] = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter output)
        {
            output.Write(Text);
        }
        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute("AccessControlID", "This is custom attribute value");
            base.AddAttributesToRender(writer);

        }
    }





The above control when used in aspx page and renders like this

<span AccessControlID="This is custom attribute value" id="WebCustomControl1_1"></span>


hence you can access that attribute in javascript or do like this

<script language="javascript" type="text/javascript">
    function Search()
    {
       alert(document.getElementById("WebCustomControl1_1").AccessControlID);
    }
    </script>


Hope it helps you. Please let me know whether this is what you were looking for.
 
Share this answer
 
v2
Hey Arindam Tewary
Thanks for your reply.
I have tried it and I am getting undefine.

Please take a look at following code.

C#
[DefaultProperty("AccessControlID")]
    [ToolboxData("<{0}:RequiredControl runat=server></{0}:RequiredControl>")]
    public class RequiredControl : WebControl
    {
        public RequiredControl(): base(HtmlTextWriterTag.Div)
        {
        }
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string AccessControlID
        {
            get
            {
                String s = (String)ViewState["AccessControlID"];
                return ((s == null) ? "[" + this.ID + "]" : s);
            }
            set
            {
                ViewState["AccessControlID"] = value;
            }
        }
        protected override void RenderContents(HtmlTextWriter output)
        {
        }
        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddAttribute("AccessControlID", this.AccessControlID);
            base.AddAttributesToRender(writer);
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (Page.ClientScript.IsClientScriptBlockRegistered("ASPCodeJSLog") == false)
                Page.ClientScript.RegisterClientScriptInclude("ASPCodeJSLog",
                             Page.ClientScript.GetWebResourceUrl(this.GetType(),
                                                         "RequireControl.RequiredControl.js"))
        }
    }




note : AccessControlID is rendered as 'accesscontrolid' in div element.

So I have tried as both following ways.

My function in Page
JavaScript
function checkFunction()
{
    alert(document.getElementById('RequiredControl1').AccessControlID);
    alert(document.getElementById('RequiredControl1').accesscontrolid);
}


Thanks
 
Share this answer
 
v3
Glad to know that you got that going. :) and I was able to help you.

Currently I dont have an option to test this in FIreFox as I dont have that installed in my system. But if I get it tested I would surely post my input in this thread. :)

Have a nice day !!!
 
Share this answer
 
C++
$("div").attr( attributeName )


Fore more detail
http://api.jquery.com/attr/[^]
 
Share this answer
 
You can access it by the ClientId of your server control, like
C#
var divObj = document.getElementById('MyCustomControlClientIDHere');

And to access your property,One way you can do add your property as an attribute from server side and access from javascript like
var accessControlId = divObj.getAttribute("AccessControlID");


Now you can use your accessControlId.
 
Share this answer
 
Hi,

I used your code to find out whether anything wrong out there. You have done a great job. It is nice.

I build your custom control code as I got from here. Then used "RequiredControl" in HTML. This how your control is rendered in browser.

<div AccessControlID="This is set from HTML design page" id="RequiredControl1">


Following is my HTML code while using the custom control,

lt;head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function Search()
    {
       alert(document.getElementById("RequiredControl1").AccessControlID);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <cc1:RequiredControl ID="RequiredControl1" AccessControlID="This is set from HTML design page" runat="server" />

        <input id="Button1" type="button" value="button" onclick="return Search();" />

    </form>
</body>


Above HTML code is having custom control and a button. On button click, I am Searching the control(using javascript Search() function) and accessing the custom attribute.
As expected I get to see "This is set from HTML design page" when I click on the button. This message ("This is set from HTML design page") was set in HTML code as you can see.


You please use your custom control and do a 'View Source' in browser and see how it is rendered. If you still face problem please post the code which is generated in browser.

:)
 
Share this answer
 
v2
I got the solution using 'RegisterExpandoAttribute'.


Take a look at below code

C#
protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            //writer.AddAttribute("AccessControlID", this.AccessControlID);
            //writer.AddAttribute("ErrorMessage", this.ErrorMessage);
            Page.ClientScript.RegisterExpandoAttribute(this.ClientID, "AccessControlID", this.AccessControlID);
            base.AddAttributesToRender(writer);
        }


Now. I am able to access property as I want.
 
Share this answer
 
Hi. Thanks for your suggestion.

Yes. Its working in IE but not working in firefox.

I use getAttribute method then its working also in firefox.

Did you check it in firefox?

Any solution for firefox to access property this way?

Regard
Imrankhan
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900