I am attempting to create asp elements on the fly using javascript. I can successfully create html elements on the fly like so

var _upload = document.createElement("input");

_upload.setAttribute("type", "file");

_upload.setAttribute("ID", "upload" + rownum);

_upload.setAttribute("runat", "server");

_upload.setAttribute("name", "uploads" + rownum);

A few questions:

1. Is this the equivalent to the asp FileUpload control?

2. How can I create the exact asp controls in javascript?

What can an asp fileupload do that my control I created above cannot do if anything?

I am attempting to create asp elements on the fly using javascript. I can successfully create html elements on the fly like so

var _upload = document.createElement("input");

_upload.setAttribute("type", "file");

_upload.setAttribute("ID", "upload" + rownum);

_upload.setAttribute("runat", "server");

_upload.setAttribute("name", "uploads" + rownum);

A few questions:

1. Is this the equivalent to the asp FileUpload control?

2. How can I create the exact asp controls in javascript?

What can an asp fileupload do that my control I created above cannot do if anything?

• javascript
• asp

3 Answers 3

ASP.NET is a server side language, whereas JavaScript in this case is being used client side. Elements created on the client side in this manner will not be visible to ASP.NET on the server side.

You can't. ASP.NET controls are piled before being rendered on the server side. And the browsers don't know anything about ASP.NET.

Your best bet is to do an ajax request to your server so that you get piled ASP.NET controls - i.e. normal HTML.

Florians idea is useful, but (depending on your case of course) there may be an even simpler fix: create the fileupload control when rendering the page but put in inside a hidden div. Then all you have to do in JavaScript is show the div.

Some example code (asp controls may be wrong, it's been a while since I used them):

mypage.aspx:

<div id="fileupload-div">
   <FileUpload id="myupload" runat="server" />
</div>
<button id="mybutton">Show upload control</button>

style.css

#fileupload-div { display: none }

mypage.js

$("#mybutton").click(function() {
    $("#fileupload-div").show();
});