Create Asp.Net Elements On The Fly Javascript

Question

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:

Is this the equivalent to the asp.net FileUpload control?
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?

Timothy S. Van Haren · Accepted Answer · 2012-06-08 14:30:30Z

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.

answered Jun 8, 2012 at 14:30

Timothy S. Van Haren

8,9762 gold badges32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick LaMarca Over a year ago

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

Florian Margaine · Accepted Answer · 2012-06-08 14:31:22Z

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.

answered Jun 8, 2012 at 14:31

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

5 Comments

Nick LaMarca Over a year ago

Do you have a sample of this idea?

Florian Margaine Over a year ago

If you don't know what AJAX is, I'll just redirect you there: asp.net/ajax . Spend some time learning it, it's very useful. Start with the "Get started" asp.net/get-started

Nick LaMarca Over a year ago

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

OlliM Over a year ago

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 Over a year ago

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 · Accepted Answer · 2012-06-08 16:16:34Z

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();
});

edited Jun 8, 2012 at 16:16

answered Jun 8, 2012 at 15:12

OlliM

7,1431 gold badge39 silver badges47 bronze badges

2 Comments

Nick LaMarca Over a year ago

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

OlliM Over a year ago

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: stackoverflow.com/questions/8466941/…

Collectives™ on Stack Overflow

Create Asp.Net Elements On The Fly Javascript

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related