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. Advertisements

  2. Andy B

    Stan Guest

    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. Advertisements

  3. Andy B

    Norm Guest

    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....


    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

    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.


    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. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.