Json Web Editor in ASP.NET

• Download source - 51.74 KB

Introduction

Recently I found that the Json format is quite useful compared to very complex XML. I use the Json format to save some hierarchical data for which table-based database is hard to handle. I also needed some user interface to manipulate this nested structure Json text data. This could be useful if you deal with a very dynamic object like data structure which gives a lot of trouble to be saved directly to the table in database. This is beginner level in terms of ASP.NET skill.

Using the Code

JsonEditorTable class is extended Table class to dynamically create its table structure when parsing Json text. It creates a child table to display nested structure of the Json data.

    Public Class JsonEditorTable : Inherits Table

        Private _JObject As JObject
        Private _BindingCollection As New Hashtable()

        Public Property JsonContext() As String
            Get
                Me.JsonDataBind()
                Return Me._JObject.ToString()
            End Get
            Set(ByVal value As String)
                Me.Controls.Clear()
                Me.GenerateTable(value)
                Me.ViewState("JsonContext") = value
            End Set
        End Property

        Private Sub GenerateTable(ByVal jsonContext As String)

            Dim str As New System.IO.StringReader(jsonContext)
            Dim jobj As JObject = JObject.Parse(str.ReadToEnd())
            str.Close()

            ' save it to late binding
            Me._JObject = jobj

            str.Close()

            For Each p As JProperty In jobj.Properties
                RenderJProperty(Me, p)
            Next

        End Sub
#Region "Json Implementation"
         Private Sub RenderJProperty(ByVal tb As Table, ByVal jp As JProperty)

            If jp.Value.GetType() Is GetType(JValue) Then
                tb.Rows.Add(Me.CreateJsonRow(jp))
            Else
                'not supporting array now....
                If jp.Value.Type = JsonTokenType.Array Then
                    Exit Sub
                End If

                Dim ctb As Table = CreaeteJsonTable(jp.Name)

                Try
                    For Each p As JProperty In jp.Value.Children
                        RenderJProperty(ctb, p)
                    Next
                Catch ex As Exception
                    Throw New Exception(ex.Message & "::" & jp.Name)
                End Try

                Dim c As New TableCell
                c.ColumnSpan = 2
                c.Style.Add("padding-left", "30px")
                c.Controls.Add(ctb)

                Dim r As New TableRow
                r.Cells.Add(c)

                tb.Rows.Add(r)

            End If

        End Sub

        Private Function CreateJsonRow(ByVal jp As JProperty)
            Dim r As TableRow
            Dim c As TableCell

            r = New TableRow()

            ' put the property name

            c = New TableCell()
            c.Font.Bold = True
            c.Text = jp.Name

            r.Cells.Add(c)

            Dim box As WebControl
            box = JsonEditorBoxFactory.CreateJsonBox(jp.Value, jp.Value.Type)

            Me.Bind(jp, box)
            c = New TableCell()
            c.Font.Bold = True
            c.Controls.Add(box)
            r.Cells.Add(c)

            Return r
        End Function

Create a different type of TextBox using polymorphism such as NumberBox, StringBox, BooleanBox for editing.

Public Class NumberBox : Inherits TextBox
    Implements IJsonEditorBox

    Sub New(ByVal value As JValue)
        Me.Value = value
    End Sub

    Property Value() As JValue Implements IJsonEditorBox.Value
        Get
            If Me.Text Is Nothing Then
                Return Nothing
            End If

            Try
                Return New JValue(Convert.ToInt32(Me.Text))
            Catch ex As Exception
                Return Nothing
            End Try
        End Get
        Set(ByVal value As JValue)
            If value.Type = JsonTokenType.Null Then
                Me.Text = Nothing
            Else
                Me.Text = value.Value.ToString()
            End If
        End Set
    End Property

End Class

Public Class StringBox : Inherits TextBox
    Implements IJsonEditorBox

    Sub New(ByVal value As JValue)
        Me.Value = value
    End Sub

    Property Value() As JValue Implements IJsonEditorBox.Value
        Get
            If Me.Text = "" Then
                Return Nothing
            Else
                Return New JValue(Me.Text)
            End If
        End Get
        Set(ByVal value As JValue)
            Me.Text = value.Value
        End Set
    End Property

End Class

Public Class BooleanBox : Inherits DropDownList
    Implements IJsonEditorBox

    Sub New(ByVal value As JValue)
        Dim item As ListItem

        item = New ListItem("null", "null")
        Me.Items.Add(item)

        item = New ListItem("false", "false")
        Me.Items.Add(item)

        item = New ListItem("true", "true")
        Me.Items.Add(item)

        Me.SelectedValue = value.ToString()
    End Sub

    Property Value() As JValue Implements IJsonEditorBox.Value
        Get
            Return GetValue()
        End Get
        Set(ByVal value As JValue)
            Me.SelectedValue = value.ToString()
        End Set
    End Property

    Function GetValue() As JValue
        If Me.SelectedValue = "true" Then
            Return New JValue(True)
        ElseIf Me.SelectedValue = "false" Then
            Return New JValue(False)
        Else
            Return Nothing
        End If
    End Function

End Class

Points of Interest

I actually use some schema files to create a more dynamic user interface of this Json text editor. Some property may be read only, or some property can display some useful tooltip and icon to help the user to make the correct change.

History

• 12^th February, 2009: Initial post