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

Discussion in 'ASP .Net' started by Andy B, May 28, 2008.

  1. Andy B

    Andy B Guest

    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?
     
    Andy B, May 28, 2008
    #1
    1. Advertising

  2. Andy B

    Stan Guest

    Re: Making 1 control invisible while showing another in the exactlocation of the invisible one

    On 28 May, 00:17, "Andy B" <> wrote:
    > 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
     
    Stan, May 28, 2008
    #2
    1. Advertising

  3. Andy B

    Norm Guest

    Re: Making 1 control invisible while showing another in the exactlocation of the invisible one

    On May 27, 4:17 pm, "Andy B" <> wrote:
    > 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, May 28, 2008
    #3
  4. Andy B

    Andy B Guest

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


    "Norm" <> wrote in message
    news:...
    On May 27, 4:17 pm, "Andy B" <> wrote:
    > 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, May 28, 2008
    #4
  5. Andy B

    Norm Guest

    Re: Making 1 control invisible while showing another in the exactlocation of the invisible one

    On May 28, 2:35 am, "Andy B" <> wrote:
    > Do you have more about how to do it this way? I am kind of interested....
    >
    > "Norm" <> wrote in message
    >
    > news:...
    > On May 27, 4:17 pm, "Andy B" <> wrote:
    >
    > > 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


    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
     
    Norm, May 28, 2008
    #5
  6. Andy B

    Andy B Guest

    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.


    "Norm" <> wrote in message
    news:...
    On May 28, 2:35 am, "Andy B" <> wrote:
    > Do you have more about how to do it this way? I am kind of interested....
    >
    > "Norm" <> wrote in message
    >
    > news:...
    > On May 27, 4:17 pm, "Andy B" <> wrote:
    >
    > > 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


    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, May 29, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SP
    Replies:
    1
    Views:
    956
  2. Michelle Ang
    Replies:
    1
    Views:
    402
  3. rahulthathoo

    Writing at exact location in file

    rahulthathoo, Nov 3, 2006, in forum: Perl Misc
    Replies:
    2
    Views:
    98
    rahulthathoo
    Nov 3, 2006
  4. Brett Foster

    Exact Location of an Element

    Brett Foster, Feb 21, 2005, in forum: Javascript
    Replies:
    1
    Views:
    99
    Fred Oz
    Feb 21, 2005
  5. Peter Olcott
    Replies:
    10
    Views:
    155
    Evertjan.
    Aug 15, 2006
Loading...

Share This Page