将具有模板JSON数据的JObject转换为XAML

Question

我在JSONTemplate.json文件中有一个模板JSON字符串，格式如下：

{"components":[{"clearOnHide":false,"key":"Clientaccount","input":false,"title":"Clientaccount","theme":"default","tableView":false,"components":[{"clearOnHide":false,"label":"Columns","input":false,"tableView":false,"key":"clientaccount Columns","columns":[{"components":[{"type":"textfield","input":true,"tableView":true,"inputType":"text","inputMask":"","label":"bankaccountnumber","key":"bankaccountnumber","placeholder":"Enter bankaccountnumber","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"validate":{"required":"true","pattern":"","custom":"","customPrivate":false},"conditional":{"show":"","when":null,"eq":""}}],"width":3,"offset":0,"push":0,"pull":0},{"components":[{"type":"textfield","input":true,"tableView":true,"inputType":"text","inputMask":"","label":"bankname","key":"bankname","placeholder":"Enter bankname","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"validate":{"required":"true","pattern":"","custom":"","customPrivate":false},"conditional":{"show":"","when":null,"eq":""}}],"width":3,"offset":0,"push":0,"pull":0},{"components":[{"type":"textfield","input":true,"tableView":true,"inputType":"text","inputMask":"","label":"casenumber","key":"casenumber","placeholder":"Enter casenumber","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"validate":{"required":"true","pattern":"","custom":"","customPrivate":false},"conditional":{"show":"","when":null,"eq":""}}],"width":3,"offset":0,"push":0,"pull":0},{"components":[{"type":"textfield","input":true,"tableView":true,"inputType":"text","inputMask":"","label":"clientaccountno","key":"clientaccountno","placeholder":"Enter clientaccountno","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"validate":{"required":"true","pattern":"","custom":"","customPrivate":false},"conditional":{"show":"","when":null,"eq":""}}],"width":3,"offset":0,"push":0,"pull":0}],"type":"columns","hideLabel":true,"tags":[],"conditional":{"show":"","when":null,"eq":""},"properties":{}}],"type":"panel","breadcrumb":"default","tags":[],"conditional":{"show":"","when":null,"eq":""},"properties":{},"hideLabel":false,"isNew":false},{"type":"button","theme":"primary","disableOnInvalid":true,"action":"submit","block":false,"rightIcon":"","leftIcon":"","size":"md","key":"submit","tableView":false,"label":"Submit","input":true,"$$hashKey":"object:22","autofocus":false,"customClass":"text-right","event":"onFormSumit"}]}

我已经将JSON字符串反序列化为JObject，如下所示：

        JObject o1 = JObject.Parse(File.ReadAllText(@"D:\JSONTemplate.json"));

        // read JSON directly from a file
        using (StreamReader file = File.OpenText(@"D:\JSONTemplate.json"))
        using (JsonTextReader reader = new JsonTextReader(file))
        {
            JObject o2 = (JObject)JToken.ReadFrom(reader);
           
        }

我想把这个转换成XAML，这样它就可以在Xamarin移动应用程序中使用。我一直在寻找类似的解决方案，但找不到太多。

Answer 1

您的JSON数据很复杂，因此您应该首先对其进行分析，然后创建适合您数据的结构或类。下面是我的示例: DataModel

public class MyData
{
   public IList<component> components;
}

public class Component
{
   public bool clearOnHide;
   public string key;
   public bool input;
   public string title;
   public string theme;
   public IList<Component> components; // Components in the element
   ...
}

并且可以使用JsonConvert.DeserializeObject方法反序列化字符串类型的json。

string jsonstring = "{'components':[{'clearOnHide':false,'key':'Clientaccount','input':false,'title':'Clientaccount','theme':'default','tableView':false,'components':[{'clearOnHide':false,'label':'Columns','input':false,'tableView':false,'key':'clientaccount Columns','columns':[{'components':[{'type':'textfield','input':true,'tableView':true,'inputType':'text','inputMask':'','label':'bankaccountnumber','key':'bankaccountnumber','placeholder':'Enter bankaccountnumber','prefix':'','suffix':'','multiple':false,'defaultValue':'','protected':false,'unique':false,'persistent':true,'validate':{'required':'true','pattern':'','custom':'','customPrivate':false},'conditional':{'show':'','when':null,'eq':''}}],'width':3,'offset':0,'push':0,'pull':0},{'components':[{'type':'textfield','input':true,'tableView':true,'inputType':'text','inputMask':'','label':'bankname','key':'bankname','placeholder':'Enter bankname','prefix':'','suffix':'','multiple':false,'defaultValue':'','protected':false,'unique':false,'persistent':true,'validate':{'required':'true','pattern':'','custom':'','customPrivate':false},'conditional':{'show':'','when':null,'eq':''}}],'width':3,'offset':0,'push':0,'pull':0},{'components':[{'type':'textfield','input':true,'tableView':true,'inputType':'text','inputMask':'','label':'casenumber','key':'casenumber','placeholder':'Enter casenumber','prefix':'','suffix':'','multiple':false,'defaultValue':'','protected':false,'unique':false,'persistent':true,'validate':{'required':'true','pattern':'','custom':'','customPrivate':false},'conditional':{'show':'','when':null,'eq':''}}],'width':3,'offset':0,'push':0,'pull':0},{'components':[{'type':'textfield','input':true,'tableView':true,'inputType':'text','inputMask':'','label':'clientaccountno','key':'clientaccountno','placeholder':'Enter clientaccountno','prefix':'','suffix':'','multiple':false,'defaultValue':'','protected':false,'unique':false,'persistent':true,'validate':{'required':'true','pattern':'','custom':'','customPrivate':false},'conditional':{'show':'','when':null,'eq':''}}],'width':3,'offset':0,'push':0,'pull':0}],'type':'columns','hideLabel':true,'tags':[],'conditional':{'show':'','when':null,'eq':''},'properties':{}}],'type':'panel','breadcrumb':'default','tags':[],'conditional':{'show':'','when':null,'eq':''},'properties':{},'hideLabel':false,'isNew':false},{'type':'button','theme':'primary','disableOnInvalid':true,'action':'submit','block':false,'rightIcon':'','leftIcon':'','size':'md','key':'submit','tableView':false,'label':'Submit','input':true,'$$hashKey':'object:22','autofocus':false,'customClass':'text-right','event':'onFormSumit'}]}";

var root = JsonConvert.DeserializeObject<MyData>(jsonstring);

反序列化对象后，可以按如下方式使用该对象：

foreach(Component comp in root.components)
{
   Console.WriteLine(comp.title);
   if(comp.components != null)
   {
      foreach(Compoent subcomp in comp.components){
         Console.WriteLine(subcomp.title);
      }
   }
}

要使用JsonConvert.DeserializeObject方法，您需要在项目中添加Newtonsoft.Json包。