Making 1 control invisible while showing another in the exact location of the invisible one

[Andy B]

I have 2 TextBoxes and an Add button on a page. When the user fills in the
TextBoxes, the values are added to a dataset table. When the page gets done
reloading, the TextBoxes are turned into readonly mode, the
requiredFieldValidaters are set to disabled, the character counter for each
textbox is made invisible and edit buttons show up next to the read only
textboxes. I want to make the Add button invisible and then make a save
changes button whenever the use clicks on the edit buttons next to the
textboxes. The save changes button should be in the exact same place the
edit buttons are. How do you do this?

 

[Stan]

I have 2 TextBoxes and an Add button on a page. When the user fills in the
TextBoxes, the values are added to a dataset table. When the page gets done
reloading, the TextBoxes are turned into readonly mode, the
requiredFieldValidaters are set to disabled, the character counter for each
textbox is made invisible and edit buttons show up next to the read only
textboxes. I want to make the Add button invisible and then make a save
changes button whenever the use clicks on the edit buttons next to the
textboxes. The save changes button should be in the exact same place the
edit buttons are. How do you do this?

This can be confusing but you get used to it.

If you place a series of buttons on the web form using the designer,
(or type them in source code) so that they are adjacent without any
segregation via layout tags, then the one that has it's Visible
property set to true will be rendered in that location and the rest
(if the Visible property is set to false) will not be rendered at all.

There are no blank spaces where invisible controls are placed. Page
flow continues as though they never existed.

In spite of the way they appear on the design surface (seeming to
spread themselves across the page because they are all visible at
once) they will effectively overlap in the manner you require.

HTH

 

[Norm]

I have 2 TextBoxes and an Add button on a page. When the user fills in the
TextBoxes, the values are added to a dataset table. When the page gets done
reloading, the TextBoxes are turned into readonly mode, the
requiredFieldValidaters are set to disabled, the character counter for each
textbox is made invisible and edit buttons show up next to the read only
textboxes. I want to make the Add button invisible and then make a save
changes button whenever the use clicks on the edit buttons next to the
textboxes. The save changes button should be in the exact same place the
edit buttons are. How do you do this?

I've personally done this a few different ways, and Stan's solution
has been one of them. However, I felt like posting an alternative to
his solution both for Andy and anyone else reading this post.

Use the same button for both "Save" and "Edit". The rendered page will
obviously have a single button always in the same place. In this case
I usually set the command name to something useful and have handle the
OnCommand event. This event would check the command name and call the
appropriate function. Actually for your example, the same button can
handle all three states: Add, Read, and Edit. So, when the user first
gets to the page, the button defaults to "Add". Once they add
whatever, the button is changed to "Edit". And when they hit "Edit",
it is changed to "Save".
PRO
It looks good rendered and in design mode.
There is a single handler for button clicks that servers as a "mapper"
to whatever method needs to be called. (Please do NOT put all the code
in the handler, thats ugly)
CON
Have to keep track of the correct CommandName. (AKA more code then
Stan's solution)
The single button's action is essentially late-bound, which is not
always a good idea.

Anyway, that's my two cents. I'm actually curious what anybody else
has o say about this method. Happy coding!

Norm

 

[Andy B]

Do you have more about how to do it this way? I am kind of interested....

I have 2 TextBoxes and an Add button on a page. When the user fills in the
TextBoxes, the values are added to a dataset table. When the page gets
done
reloading, the TextBoxes are turned into readonly mode, the
requiredFieldValidaters are set to disabled, the character counter for
each
textbox is made invisible and edit buttons show up next to the read only
textboxes. I want to make the Add button invisible and then make a save
changes button whenever the use clicks on the edit buttons next to the
textboxes. The save changes button should be in the exact same place the
edit buttons are. How do you do this?

I've personally done this a few different ways, and Stan's solution
has been one of them. However, I felt like posting an alternative to
his solution both for Andy and anyone else reading this post.

Use the same button for both "Save" and "Edit". The rendered page will
obviously have a single button always in the same place. In this case
I usually set the command name to something useful and have handle the
OnCommand event. This event would check the command name and call the
appropriate function. Actually for your example, the same button can
handle all three states: Add, Read, and Edit. So, when the user first
gets to the page, the button defaults to "Add". Once they add
whatever, the button is changed to "Edit". And when they hit "Edit",
it is changed to "Save".
PRO
It looks good rendered and in design mode.
There is a single handler for button clicks that servers as a "mapper"
to whatever method needs to be called. (Please do NOT put all the code
in the handler, thats ugly)
CON
Have to keep track of the correct CommandName. (AKA more code then
Stan's solution)
The single button's action is essentially late-bound, which is not
always a good idea.

Anyway, that's my two cents. I'm actually curious what anybody else
has o say about this method. Happy coding!

Norm

 

[Norm]

Do you have more about how to do it this way? I am kind of interested....




I've personally done this a few different ways, and Stan's solution
has been one of them. However, I felt like posting an alternative to
his solution both for Andy and anyone else reading this post.

Use the same button for both "Save" and "Edit". The rendered page will
obviously have a single button always in the same place. In this case
I usually set the command name to something useful and have handle the
OnCommand event. This event would check the command name and call the
appropriate function. Actually for your example, the same button can
handle all three states: Add, Read, and Edit. So, when the user first
gets to the page, the button defaults to "Add". Once they add
whatever, the button is changed to "Edit". And when they hit "Edit",
it is changed to "Save".
PRO
It looks good rendered and in design mode.
There is a single handler for button clicks that servers as a "mapper"
to whatever method needs to be called. (Please do NOT put all the code
in the handler, thats ugly)
CON
Have to keep track of the correct CommandName. (AKA more code then
Stan's solution)
The single button's action is essentially late-bound, which is not
always a good idea.

Anyway, that's my two cents. I'm actually curious what anybody else
has o say about this method. Happy coding!

Norm

Here is some psuedo-code for you. If you would like more help just
reply, I am watching this thread.
Note: I am using psuedo-VB syntax, and I did this from memory so i
might be off on exact event and/or property names.

CODE BEHIND

' Business Methods
Public Sub Add()
' Set TextBoxes Readonly, disable Validators and Character
counters, add data to datatable
CommandButton.CommandName = "Edit"
CommandButton.Text = "Edit"
End Sub

Public Sub Edit()
' Set TextBoxes editable, enable Validators and Character counters
CommandButton.CommandName = "Save"
CommandButton.Text = "Save"
End Sub

Public Sub Save()
' Set TextBoxes Readonly, disable Validators and Character
counters, modify data in datatable
CommandButton.CommandName = "Edit"
CommandButton.Text = "Edit"
End Sub

Protected Sub DoCommand(sender as object, e as CommandEventArgs)
Handles CommandButton.OnCommand
Select Case e.CommandName
Case "Add"
Add()
Case "Edit"
Edit()
Case "Save"
Save()
End Select
End Sub

PAGE / USERCONTROL

<asp:TextBox ID="Value1TextBox" />
<asp:TextBox ID="Value2TextBox" />
<!-- Validators, Character counters, etc. -->
<asp:Button ID="CommandButton" CommandName="Add" Text="Add" />

Looking at this after I typed it, this might even compile. But that is
the general idea. One button, one event handler, mapped to three
methods. Looks good rendered and in design, and even allows for an
easy way to add functionality. (New? Delete? etc.) Hope I made your
day (and anyone elses) easier!

Norm

 

[Andy B]

I am using c# for programming. I will have to try this way of doing things
out and see how it goes. I did some sort of derivitive of thuis and it seems
to work until I hit the edit button. It seems to be stuck in "AddPreview"
state where the textboxes are readonly and disabled. I will try splitting
things up more like this and let you know how it turns out. Just a note that
I have this all inside a Wizard.

Do you have more about how to do it this way? I am kind of interested....




I've personally done this a few different ways, and Stan's solution
has been one of them. However, I felt like posting an alternative to
his solution both for Andy and anyone else reading this post.

Use the same button for both "Save" and "Edit". The rendered page will
obviously have a single button always in the same place. In this case
I usually set the command name to something useful and have handle the
OnCommand event. This event would check the command name and call the
appropriate function. Actually for your example, the same button can
handle all three states: Add, Read, and Edit. So, when the user first
gets to the page, the button defaults to "Add". Once they add
whatever, the button is changed to "Edit". And when they hit "Edit",
it is changed to "Save".
PRO
It looks good rendered and in design mode.
There is a single handler for button clicks that servers as a "mapper"
to whatever method needs to be called. (Please do NOT put all the code
in the handler, thats ugly)
CON
Have to keep track of the correct CommandName. (AKA more code then
Stan's solution)
The single button's action is essentially late-bound, which is not
always a good idea.

Anyway, that's my two cents. I'm actually curious what anybody else
has o say about this method. Happy coding!

Norm

Here is some psuedo-code for you. If you would like more help just
reply, I am watching this thread.
Note: I am using psuedo-VB syntax, and I did this from memory so i
might be off on exact event and/or property names.

CODE BEHIND

' Business Methods
Public Sub Add()
' Set TextBoxes Readonly, disable Validators and Character
counters, add data to datatable
CommandButton.CommandName = "Edit"
CommandButton.Text = "Edit"
End Sub

Public Sub Edit()
' Set TextBoxes editable, enable Validators and Character counters
CommandButton.CommandName = "Save"
CommandButton.Text = "Save"
End Sub

Public Sub Save()
' Set TextBoxes Readonly, disable Validators and Character
counters, modify data in datatable
CommandButton.CommandName = "Edit"
CommandButton.Text = "Edit"
End Sub

Protected Sub DoCommand(sender as object, e as CommandEventArgs)
Handles CommandButton.OnCommand
Select Case e.CommandName
Case "Add"
Add()
Case "Edit"
Edit()
Case "Save"
Save()
End Select
End Sub

PAGE / USERCONTROL

<asp:TextBox ID="Value1TextBox" />
<asp:TextBox ID="Value2TextBox" />
<!-- Validators, Character counters, etc. -->
<asp:Button ID="CommandButton" CommandName="Add" Text="Add" />

Looking at this after I typed it, this might even compile. But that is
the general idea. One button, one event handler, mapped to three
methods. Looks good rendered and in design, and even allows for an
easy way to add functionality. (New? Delete? etc.) Hope I made your
day (and anyone elses) easier!

Norm