CODEWITHSUNDEEP
javascriptc#asp.netwebforms
Chris
Chris

Reputation: 148

Dynamic control 'ID' automatically added to 'name' attribute, instead of ID attribute

I have a couple of lists on a configuration page in my application where users can configure the order of items as well as the selection for specific application pages. I'm using the ID of the dynamic controls added at runtime to move them from A to B, but currently this doesn't work due to my JavaScript failing to retrieve the ID of the control selected.

After digging down and inspecting further, the dynamic controls aren't getting an ID attribute assigned automatically, instead the ID is applied to the name attribute of the control which is why the JavaScript is failing.

I'm using both dynamic HtmlGenericControls and Textboxes.

JavaScript that retrieves the ID, it works when I switch this.id to this.name. However I need to use the ID attribute.

document.getElementById('itemID').value = this.id;

'itemID' is a hidden input field.

I've tried applying runat="server", clientidmode="static" / "autoID" but no luck so far.

Why is my dynamic controls getting the ID assigned to the name attribute instead of the ID attribute?

Is there something missing that I need to add to make it apply it to the ID attribute?

If you need any more information just comment below :-)

Additional Information

The web page is using a master page, so the controls are added within content place holders.

I've tried setting the ID in the javascript which added the ID to the attribute correctly but when doing the following the item was still null.

this.id = this.name;

TextBox selectedItem = (TextBox)exampleList.FindControl(itemID.Value);

Example of the dynamic control after being added:

<input name="ctl00$uniqueBody$ctl86" type="text" value="EXAMPLE" runat="server">

As you can see the name attribute holds the ID.

Upvotes: 0

Views: 575

Answers (3)

VDWWD
VDWWD

Reputation: 35554

When you create Dynamic Control and want them to have an id, you need to specify that when creating them.

TextBox tb = new TextBox();
tb.ID = "TextBox1";
PlaceHolder1.Controls.Add(tb);

Now JavaScript can locate them by their ID, and FindControl will also work. FindControl works recursively, so you first need to find the ContentPlaceHolder on the Master page, then the PlaceHolder and then the dynamically created TextBox.

ContentPlaceHolder contentPlaceHolder = Master.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
PlaceHolder placeHolder = contentPlaceHolder.FindControl("PlaceHolder1") as PlaceHolder;
TextBox textbox = placeHolder.FindControl("TextBox1") as TextBox;

Upvotes: 0

John Adams
John Adams

Reputation: 21

Have you tried:

this.name.id

?

Upvotes: 0

CDove
CDove

Reputation: 1950

If the value of this.ID is not a string, but instead is of type int, double, etc, you'll see problems like this with your code when trying to assign to a string value. You need to use either Convert.ToString(this.id) or this.id.ToString(). The latter cannot handle nulls on its own. 

document.getElementById('itemID').value = Convert.ToString(this.id);

document.getElementById('itemID').value = this.id.ToString();

What you are seeing now instead is the default method, which prints the control Type. If you see the type like that, you likely passed the whole control in and not its value. That suggests you need to check a text value.

document.getElementById('itemID').value = this.id.Text;

Upvotes: 0

Related Questions