0

I am attempting to create asp.net 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.net FileUpload control?

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

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

Nick LaMarca
  • 8,076
  • 31
  • 93
  • 152

3 Answers3

7

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.

Tim S. Van Haren
  • 8,861
  • 2
  • 30
  • 34
4

You can't. ASP.NET controls are compiled 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 compiled ASP.NET controls - i.e. normal HTML.

Florian Margaine
  • 58,730
  • 15
  • 91
  • 116
  • Do you have a sample of this idea? – Nick LaMarca Jun 08 '12 at 14:34
  • If you don't know what AJAX is, I'll just redirect you there: http://www.asp.net/ajax . Spend some time learning it, it's very useful. Start with the "Get started" http://www.asp.net/get-started – Florian Margaine Jun 08 '12 at 14:35
  • What can an asp.net fileupload do that my control I created above cannot do if anything? – Nick LaMarca Jun 08 '12 at 14:45
  • This won't work, because the "magic" of asp.net WebForms is that asp.net creates an object model of your pages and then matches the http post parameters to that object model. So even if you create a new html element which matches the output of an asp.net webform component, the server won't have anything to assign the values to. – OlliM Jun 08 '12 at 15:14
  • If you want to use asp.net and do a javascript based rich ui , I suggest looking into asp.net MVC - it gives you lower level access. Of course you also lose some of the convenience of webforms. – OlliM Jun 08 '12 at 15:16
2

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.net 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();
});
OlliM
  • 7,023
  • 1
  • 36
  • 47
  • Cant I just get all the values from the client side file upload? Then create an instance of an asp:fileupload and set all of its properties to the client side fileupload? The issue with your solution is the fileuploads have to be a fixed size if I want 200 fileuploads I have to create 200 html tags – Nick LaMarca Jun 08 '12 at 15:25
  • I would not start to hack the fileupload control, I think it would be easier to just create the input elements, do the sending with jQuery or such and create a specific handler on the server side, like in this question: http://stackoverflow.com/questions/8466941/upload-file-using-jquery-and-handlerashx – OlliM Jun 08 '12 at 16:24