Erik Porter (gravatar)

Encapsulating UI code in ASP.NET

Sunday, June 29, 2003
Filed under

I'm working a project right now and I'm currently working on the Admin section, which is basically some hyped up data entry.  I just thought I'd go ahead and share a technique I've been using for a while and see if it might help anybody or if you all think it's a bad idea, etc.

First, let's setup the structure for a Data Entry Screen.

Private Enum EditTypes As Byte
     Normal = 0
     Add = 1
     Edit = 2
     Delete = 3
End Enum

Private Property EditMode() As EditTypes
     Get
          If ViewState("EditMode") Is Nothing Then
               ViewState("EditMode") = [Enum].ToObject(GetType(EditTypes), EditTypes.Normal)
          End If
          Return DirectCast([Enum].Parse(GetType(EditTypes), ViewState("EditMode").ToString), EditTypes)
     End Get
     Set(ByVal Value As EditTypes)
          ViewState("EditMode") = [Enum].ToObject(GetType(EditTypes), Value)
          UpdateMode()
     End Set
End Property

Basically what all that stuff does is declare an enum with our different types of editing that can be done on our WebForm then sets up a Private Property of the type of that Enum and sets up the Get and Set to interact with the ViewState and store the value of the selected Enum (which in case this would be a Byte) and when set, calls an UpdateMode Method that will update the UI appropriately like so...

Private Sub UpdateMode()
     Select Case EditMode
          Case EditTypes.Normal
               btnDelete.Enabled = False
               btnUpdate.Text = "Add"
               btnUpdate.Enabled = True
               btnCancel.Visible = False
               lstItems.Enabled = True
               pnlEditFields.Visible = False
               lstItems.SelectedIndex = -1
          Case EditTypes.Add
               btnDelete.Enabled = False
               btnUpdate.Text = "Add"
               btnUpdate.Enabled = True
               btnCancel.Visible = True
               lstItems.Enabled = False
               pnlEditFields.Visible = True
          Case EditTypes.Edit
               btnDelete.Enabled = True
               btnUpdate.Text = "Update"
               btnUpdate.Enabled = True
               btnCancel.Visible = True
               lstItems.Enabled = True
               pnlEditFields.Visible = True
          Case EditTypes.Delete
               btnDelete.Enabled = True
               btnUpdate.Text = "Add"
               btnUpdate.Enabled = False
               btnCancel.Visible = True
               lstItems.Enabled = False
               pnlFields.Visible = False
     End Select
End Sub

Now that we have our Property and UI code setup, making changes to the UI is easy and more readable.

Private Sub lstItems_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles lstItems.SelectedIndexChanged
     If lstItems.SelectedIndex > -1 Then
          'Update the fields in pnlEditFields
          EditMode = EditTypes.Edit
     End If
End Sub

Private Sub btnUpdate_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnUpdate.Click
     Select Case EditMode
          Case EditTypes.Add
               'Add a new Item to lstItems
               EditMode = EditTypes.Normal
          Case EditTypes.Edit
               'Update the underlying Data
               EditMode = EditTypes.Normal
          Case EditTypes.Normal
               EditMode = EditTypes.Add
     End Select
End Sub

Private Sub btnCancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCancel.Click
     EditMode = EditTypes.Normal
End Sub

Private Sub btnDelete_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnDelete.Click
     If EditMode = EditTypes.Delete Then
          'Delete selected Item
          EditMode = EditTypes.Normal
     Else
          'Let the user know they must
          'click Delete again to delete the Item
          EditMode = EditTypes.Delete
     End If
End Sub

There are of course a few other things you'd have to do, but that's basically all the code you'd need for manipulating the UI.  If you add more controls and need to make changes, you'll always know right where to go to make the changes.

I think by doing things this way it really helps encapsulate UI code (adding almost another virtual layer to your programming model, which is always good for organization), makes it more descriptive (so next time you come back into your code you know exactly what's going on and don't have to remember where any code is) and also makes it really to simply inherit from this page for other pages that have similiar functionality needs.

What do you all think?  Great idea?  Decent idea?  Horrible idea?

2 Comments

Your Information
Mrs. Gravatar (gravatar)

<-- It's a gravatar

your comment