Using FindControl() to access controls created by javascript

  • Thread starter Thread starter Lau Lei Cheong
  • Start date Start date
L

Lau Lei Cheong

Hello,

I'm using javascript's insertAdjacentHtml() to insert images to the
webform at runtime. This runs fine(image successfully displayed at the
browser) but when I tried to access the control's src using FindControl()
function in the code-behind, it seems that the control doesn't even exist.

I know that I can add controls on the server-side, but then a postback
will be needed which is the thing I want to avoid. Does anyone have idea on
how to do so? Thanks a lot.
 
How can server know what you are doing on client side? If you want server to
be aware of controls, you must make them server ones. What is the purpose of
adding controls? May be you can prepare everything on server side and then
just hide/show them on client?

Eliyahu
 
Hereis how I think about this:
In theory, any htmlcontrol with runat="server" tag within a server-side form
will be posted back to server on the "post" action. So I think by inserting
things such as "<input id=\"txtctrl_1\" type=\"text\" runat=\"server\"
value=\"\something">" the control id and it's value will eventally be posted
back to server on a post event within the request stream.
And from my understanding, Page.FindControl() is simple searching the
returned stream for the specified key and return the result(So that I can
still access the controls created dynamically on the server-side using
Form.Controls.Add()). Therefore, there's no reason I can think of that will
prevent me to access the controls created by the method stated in the
beginning.

For the second question, the answer is no. The webform will allow users to
add as many pictures(and/or texts) as they wish on it and there is no way I
can predict how much picture a user may enter. (even set a value as high as
100 may be insufficient)
 
ASP.NET controls are abstractions of various user interface elements such as
text fields and drop down lists. The controls on a page are held in the
Form.Controls collection. When ASP.NET renders a page it iterates this
collection and renders every single control as HTML code. The controls are
rendered as HTML elements such as INPUT and SELECT contained with in a HTML
FORM element. When the rendering process is complete the HTML code is
returned to the browser as an HTTP response.
The browser then parses the HTML code and adds the various elements to it's
document object model (DOM) making it possible to use script add, remove or
change HTML elements in the browser.
When a post back is performed the FORM containing is submitted to the
server. The entire DOM is not sent to the server, only the values and
identifiers of the INPUT and SELECT elements are included in the HTTP POST
request.

When you add a new HTML element to the page via script you're only adding it
to the DOM. You can add a runat attribute to any DOM element, but this
attribute is not recognised by the browser and has no function in practice.

If you want to upload the pictures to the server you will have to use a
INPUT type="file" HTML element to include the actual image in the HTTP
request. Just adding the HTML code dynamically won't cut it.

Anders Norås
http://dotnetjunkies.com/weblog/anoras/
 
Well, you have to correct your understanding. runat=server has no effect on
client. It's a server-side tag. Client doesn't know what it means and just
ignores it.

As to the second question, if you wish to pass images to server, I don't
think you can get much more than standard file uploading one-by-one.
Alternatively you can use/make a special ActiveX control.

Eliyahu
 
Yes, of course, I've created another form with <input type="file"> to upload
the images, that's why I could simply add an image element to it to show it.

Taking yours and Eliyahu's advice I've created <input type="hidden"> fields
that holds various properties of the controls yet they seem do not return in
the request stream. Any ideas?
 
Yes. But seems all "client-side added" hidden boxes cannot add themselves in
the request stream. (Also examinated request stream to confirm that)

As time is running out I'll settle this by adding a hidden box at design
time, and serialize the image/layers' values using javascript just before a
postback to server.

I'd be appreciated if someone can solve it, as the additional javascript
makes my code grow very large. And is likely to get problem when the
serialized data size exceeds the hidden box's size limit.
 
Back
Top