add asp.net control using javascript

Question

I would like to add an ASP:label and ASP:textbox control to a page through Javascript.

<asp:Label ID="lblone" runat="server"></asp:Label>

if i want to write this syntax or want to add this label on page using innerHTML then want can be the way....

I want to add it on button click event... and the ID should be appended by 1 and the next time 1+1

Answer 1

You can't add a server control through client side javascript. Server controls are rendered on the serverside and sent to the client. From what you are trying to do you might want to persist state with ViewState.

Answer 2

You can dynamically add html controls to the page through javascript pretty easily through jQuery. This will allow you to do it without talking to the server, and you can also set the ids too if you wish using .attr('id','NEWIDVALUE'); on the element.

Answer 3

If there's a limit to the number of label/textbox pairs you'll be dynamically adding to your page, you could do something like hard-coding e.g. 10 of them but initially making them invisible using css properties. You could then change the css properties dynamically using javascript/jQuery.

If you go down this path I'd put each label and textbox into a div which you can assign a fixed id and manipulate the properties of these div's instead of faffing around with ClientID's of the labels/textboxes.

Answer 4

You cannot use JavaScript to add a server control, since server controls are, well, created on the server. :) But you can use it to add an <input /> element that you can access server-side:

var nextID = 0;
function addTextInput(container) {
  var txtInput = document.createElement('input');
  txtInput.type = 'text';
  txtInput.id = 'txtInput' + (nextID++);
  txtInput.name = txtInput.id;
  container.appendChild(txtInput);
}

This function will create a new textbox and add it to container. The dynamically created boxes will be named txtInput0, txtInput1, ... , txtInputN.

In your code-behind for your aspx page, you can use code like the following to read the values:

foreach (string key in this.Request.Form.Keys)
{
  if (key.StartsWith("txtInput"))
  {
    // Do something with the dynamic values...
  }
}

Answer 5

Does it need to be an ASP .NET control or could it just be normal HTML?

If you want an ASP .NET control these, by design, are rendered on the server so there would either need to add the controls by using one of the following approaches:

1) Synchronous PostBack (normal postback) 2) Async PostBack (javascript postback which doesn't refresh the page visually but still does a postback) 3) Traditional AJAX

You've probably already tried the Sync PostBack since you're mentioning that you want to do this in Javascript. So that leaves Async PostBack or traditional AJAX.

The Async PostBack is the easiest because you just need to wrap everything in an UpdatePanel

<asp:UpdatePanel id="Updater" runat="server">
    <asp:PlaceHolder id="AddControlsToThis" runat="server" />
    <asp:Button id="Submit" runat="server" />
</asp:UpdatePanel>

Treat this like a normal postback and in the codebehind add whatever control you want to the placeholder on button click.

The third approach (adding via AJAX) is a little too much to describe here but basically you would use AJAX to make a request to a web service that you would set up on the server and then you would need to "render" the control on the server (each control has a RenderControl function...you would need to use this to get the resulting HTML) and use the resulting HTML to send back as a response of the web server...sorry if that's a little vague. Like I said the traditional AJAX approach requires more description than I can get into here.

Good luck.

Answer 6

in relation to your question if you can access html control from code behind, as long as you have
runat="server"
as one of the attributes of the control, the html control can be accessed from the code behind.