ASP.NET 中的 Json Web 编辑器

• 下载源代码 - 51.74 KB

引言

最近我发现 Json 格式与非常复杂的 XML 相比非常有用。我使用 Json 格式来保存一些分层数据，这些数据很难用基于表的数据库来处理。我还 需要一些用户界面来操作这种嵌套结构的 Json 文本数据。如果您处理像数据结构这样非常动态的对象，而将其直接保存到数据库表中会带来很多麻烦，那么这将会很有用。这在 ASP.NET 技能方面属于初学者级别。

Using the Code

JsonEditorTable 类扩展了 Table 类，以便在解析 Json 文本时动态创建其表结构。它创建子表来显示 Json 数据的嵌套结构。

    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

使用多态创建不同类型的 TextBox ，例如 NumberBox、StringBox、BooleanBox 用于编辑。

    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

关注点

我实际上使用一些模式文件来创建此 Json 文本编辑器的更动态用户界面。某些属性可能是只读的，或者某些属性可以显示一些有用的工具提示和图标，以帮助用户进行正确的更改。

历史

• 2009 年 2 月 12 日：初始发布