Manipulate asp.net 'runat="server" ' html object in javascript - Stack Overflow

admin管理员组

文章数量:1341473

Alright, I know you can get information from an asp control with this code:

var element = document.getElementById('<%=myControl.ClientID%>'); 

However I am incapable of manipulating said html element after grabbing it in Javascript. What would I need to do to change the properties of something that is set to runat="server" in javascript?

Is it only possible through the server-side C#?

For further clarification I have a div that changes sizes via Javascript and am trying to get the mschart that exists in it's innerhtml to change it's height/width along with it. However the fact that it runs at the server causes the problems.

<div id="div0" style="background-color:Silver; position: absolute; top: 0px; left: 0px; width: 480px; height: 245px;">
            <asp:Chart ID="chart0" runat="server"  Height="245px" Width="480px" 
                    BackColor="220, 230, 242" BackGradientStyle="None" 
                        BackSecondaryColor="220, 230, 242">
            <BorderSkin PageColor="220, 230, 242" />
            </asp:Chart>
        </div>

Edit: ended up handling chart resizing in a through postback with query string, then grabbing those values in javascript on init and resizing the divs there.

Alright, I know you can get information from an asp control with this code:

var element = document.getElementById('<%=myControl.ClientID%>'); 

However I am incapable of manipulating said html element after grabbing it in Javascript. What would I need to do to change the properties of something that is set to runat="server" in javascript?

Is it only possible through the server-side C#?

For further clarification I have a div that changes sizes via Javascript and am trying to get the mschart that exists in it's innerhtml to change it's height/width along with it. However the fact that it runs at the server causes the problems.

<div id="div0" style="background-color:Silver; position: absolute; top: 0px; left: 0px; width: 480px; height: 245px;">
            <asp:Chart ID="chart0" runat="server"  Height="245px" Width="480px" 
                    BackColor="220, 230, 242" BackGradientStyle="None" 
                        BackSecondaryColor="220, 230, 242">
            <BorderSkin PageColor="220, 230, 242" />
            </asp:Chart>
        </div>

Edit: ended up handling chart resizing in a through postback with query string, then grabbing those values in javascript on init and resizing the divs there.

• javascript
• asp
• html

Share Improve this question Follow edited Jun 17, 2011 at 13:55 Remm asked Jun 13, 2011 at 17:52 RemmRemm 69588 silver badges2424 bronze badges 1

• You can also change all html attributes (for example via javascript) of serverside controls(controls with runat="server"), because even ASP.NET controls are rendered to html-controls at last. – Tim Schmelter Commented Jun 13, 2011 at 18:08

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

It's a little unclear what you really mean. If you mean, you want to manipulate server side properties, or call server side functions, then you can't do that through javascript. You would need to use something like ajax or webmethods. If you mean that you want to modify it's client properties, like whether it's visible, or what data it contains then yes you can do that. But, you need to specify more information about what exactly you're trying to do.

EDIT:

Based on your updated information there's good news and bad news. Yes, you can change the size of the control on the client side, but that will only stretch the image. MSChart generates an image file that is downloaded. Stretching will result in poor quality.

You will need to regenerate the chart for your new size if stretching is not an option. That will require you to use some kind of ajax, or pletely refresh the page.

Because the element has runat=server you would only be able to modify properties in code behind (the server side). The actual client side properties such as visibility can be changed via javascript though.

You should be able to edit the client-side properties of the "control" if that control translates to a simple HTML element. Sometimes a server-side property doesn't have a client-side analog, however.

One mon thing to be aware of is if the control is not set to visible, then that means it's not rendered on the page at all; if that's the case, then you cannot access it through JavaScript.

if all you are trying to modify is the with and height of the object there is no reason why the following shouldn't work:

var element = document.getElementById('<%=myControl.ClientID%>'); 
element.style.height = divHeight;

Just look in the generated html that the control with that name is actually a div or an image (or something you can re-size), where you can set width and height on. I don't know what Chart control renders to. In any case, use Firebug to inspect the html elements in your page, and see how the changes you do in javascript influence the result.

In any case, keep in mind you can only set client properties in javascript. This means you are looking to set this on some div element, rather the the server side control. Knowing that the server side control does render to html, you should be able to achive what you want, one way or another.

My suggestion would be to write a script using jQuery. The thing it would use are the following in client script code:

1. Get the element which height you need.
2. Get the element which you want to manipulate.
3. Change the element height with the value from part 1.

If you think this would be a way to go and your new to jQuery, I can help you with some code for it.

I attempted to manipulate a control in jquery that contained the runat="server" attribute. I was unable to change it. As soon as I removed runat="server", I noticed the jquery changes occur.

You can test it out for yourself:

<asp:Label ID="myLabel">hello, warlord!</asp:Label>
<asp:Label ID="myLabel2" runat="server">hello, warlord!</asp:Label>
<script type="text/javascript">$("#myLabel").css("border", "3px solid red");</script>
<script type="text/javascript">$("#myLabel2").css("border", "3px solid red");</script>

I had the same issue, this usually happens when your html controls(with runat="server") are inside of a contentPlaceHolder. Here's what I did:

I changed:

document.getElementById("mypopup").style.visibility = "visible";

to:

document.getElementById("ctl00_ContentPlaceHolder1_mypopup").style.visibility = "visible";

When you view the page source code on the browser you'll see the name that your html control really has.

you can find more information on how to actually use properly the ClientID property here

本文标签： Manipulate aspnet 39runatquotserverquot 39 html object in javascriptStack Overflow