asked on

Positioning an array of textboxes in ASP.Net

I am trying to simply position an array of textboxes that have been dynamically created in the page load on a page.
Code I'm trying with is (actually copied from elsewhere for a button array!):
===========================================================
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
Addtextboxes()
End Sub
Public textboxArray(9) As TextBox

Public Sub Addtextboxes()
For x As Integer = 0 To 9
textboxArray(x) = New TextBox
Me.Controls.Add(textboxArray(x))
With textboxArray(x)
.Tag = x
.Text = "textbox " & x
.Size = New Size(60, 20)
.Location = New Point(20, (x * 20) + 4)
.Parent = Me
.Visible = True
End With
Next
End Sub
==========================================================
Trouble is Size, Location, and Parent all give errors.
Does this mean that I CANNOT position and then reference an array of textboxes on an ASP.Net page, or is there another way of doing it.

The problem I'm trying to solve is to write a neat validation routine in codebehind, to validate the contents of 12 textboxes each of which contains the answer to a predefined question.
Its easy to write separate code for each, but a concise single routine would be technically good, and aesthetically pleasing.
(Sorry, running off at the mouth again!)
Cheers
Dave

ASKER CERTIFIED SOLUTION

b1xml2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b1xml2

That create an array of textboxes that are aligned.

Tips for positioning.
1. The Panel Control is emitted as a div. Now set the position to relative.
2. All controls inside the div can use the absolute position but they are still relative to the parent control.
3. In short, you can move the div element and all the textboxes are moved accordingly...

output
====

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="FlowLayout">

<form name="Form1" method="post" action="WebForm1.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwxNzcyNjM0OTY0Ozs+MtJfl/e7FQDv7nhIGpLQ2NZeIG0=" />

      Hello World
      <div id="TextBoxPanel" style="POSITION:relative;top:40px;left:50px;">
      <input name="_ctl0" type="text" value="textbox1" style="width:60px;height:20px;position:absolute;top:6px;left:20px;" />
      <input name="_ctl1" type="text" value="textbox2" style="width:60px;height:20px;position:absolute;top:28px;left:20px;" />
      <input name="_ctl2" type="text" value="textbox3" style="width:60px;height:20px;position:absolute;top:50px;left:20px;" />
      <input name="_ctl3" type="text" value="textbox4" style="width:60px;height:20px;position:absolute;top:72px;left:20px;" />
      <input name="_ctl4" type="text" value="textbox5" style="width:60px;height:20px;position:absolute;top:94px;left:20px;" />
      <input name="_ctl5" type="text" value="textbox6" style="width:60px;height:20px;position:absolute;top:116px;left:20px;" />
      <input name="_ctl6" type="text" value="textbox7" style="width:60px;height:20px;position:absolute;top:138px;left:20px;" />
      <input name="_ctl7" type="text" value="textbox8" style="width:60px;height:20px;position:absolute;top:160px;left:20px;" />
</div>
</form>

</body>
</HTML>

b1xml2

you probably wouldn;t like referencing the controls with the names _ctl<number>...
hence, you shd set the ID of the TextBox like so:

With box
.Text = "textbox" & i
.ID = "textbox" & i
.Style("width") = "60px"
.Style("height") = "20px"
.Visible = True
.Style("position") = "absolute"
.Style("top") = CStr(((i - 1) * 22) + 6) & "px"
.Style("left") = "20px"
End With

This will cause the output to be changed to so:
<div id="TextBoxPanel" style="POSITION:relative;top:40px;left:50px;">
      <input name="textbox1" type="text" value="textbox1" id="textbox1" style="width:60px;height:20px;position:absolute;top:6px;left:20px;" />
      <input name="textbox2" type="text" value="textbox2" id="textbox2" style="width:60px;height:20px;position:absolute;top:28px;left:20px;" />
      <input name="textbox3" type="text" value="textbox3" id="textbox3" style="width:60px;height:20px;position:absolute;top:50px;left:20px;" />
      <input name="textbox4" type="text" value="textbox4" id="textbox4" style="width:60px;height:20px;position:absolute;top:72px;left:20px;" />
      <input name="textbox5" type="text" value="textbox5" id="textbox5" style="width:60px;height:20px;position:absolute;top:94px;left:20px;" />
      <input name="textbox6" type="text" value="textbox6" id="textbox6" style="width:60px;height:20px;position:absolute;top:116px;left:20px;" />
      <input name="textbox7" type="text" value="textbox7" id="textbox7" style="width:60px;height:20px;position:absolute;top:138px;left:20px;" />
      <input name="textbox8" type="text" value="textbox8" id="textbox8" style="width:60px;height:20px;position:absolute;top:160px;left:20px;" />
</div>

davepruce

ASKER

Thanks b1xml2 for the very detailed and elegant answer, you get the much deserved points.

Thanks

Dave