如何將 JSON 數組填充到 ASP:repeater

Question

我堅持將 JSON 數組移植和格式化為 ASP:Repeater

JSON 陣列：

{
   "root":[
      {
         "prog_id":"P1000004",
         "prog_name":"Course1",
         "prog_banner":"",
         "isClientActive":"",
         "courses":[
            {
               "course_id":"C1000012",
               "course_name":"Course1-1",
               "course_description":"",
               "course_thumbnail":""
            },
            {
               "course_id":"C1000013",
               "course_name":"Course1-2",
               "course_description":"",
               "course_thumbnail":""
            }
         ]
      },
      {
         "prog_id":"P1000010",
         "prog_name":"Course2",
         "prog_banner":"1000010.jpg",
         "isClientActive":"active",
         "courses":[
            {
               "course_id":"C1000007",
               "course_name":"Course2-1",
               "course_description":"",
               "course_thumbnail":""
            },
            {
               "course_id":"C1000008",
               "course_name":"Course2-2",
               "course_description":"",
               "course_thumbnail":""
            },
            {
               "course_id":"C1000009",
               "course_name":"Course2-3",
               "course_description":"",
               "course_thumbnail":""
            },
            {
               "course_id":"C1000010",
               "course_name":"Course2-4",
               "course_description":"",
               "course_thumbnail":""
            },
            {
               "course_id":"C1000011",
               "course_name":"Course2-5",
               "course_description":"",
               "course_thumbnail":""
            }
         ]
      }
   ]

當前 Output：

P1000004: Course1
Canorous_Academy.test.Cours[]

P1000010: Course2
Canorous_Academy.test.Cours[]

所需的 Output （應該看起來像）：

Repeater-Item 1
P1000004: Course1
Courses:
Course1-1
Course1-2

Repeater-Item 2
P1000010: Course2
Courses:
Course2-1
Course2-2
Course2-3
Course2-4
Course2-5

 protected void Page_Load(object sender, EventArgs e) { string json="{\"root\":[{\"prog_id\":\"P1000004\",\"prog_name\":\"Course1\",\"prog_banner\":\"\",\"isClientActive\":\"\",\"courses\":[{\"course_id\":\"C1000012\",\"course_name\":\"Course1-1\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000013\",\"course_name\":\"Course1-2\",\"course_description\":\"\",\"course_thumbnail\":\"\"}]},{\"prog_id\":\"P1000010\",\"prog_name\":\"Course2\",\"prog_banner\":\"1000010.jpg\",\"isClientActive\":\"active\",\"courses\":[{\"course_id\":\"C1000007\",\"course_name\":\"Course2-1\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000008\",\"course_name\":\"Course2-2\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000009\",\"course_name\":\"Course2-3\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000010\",\"course_name\":\"Course2-4\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000011\",\"course_name\":\"Course2-5\",\"course_description\":\"\",\"course_thumbnail\":\"\"}]}]}"; Rootobject _objRoot = JsonConvert.DeserializeObject<Rootobject>(json); GetDataTableFromObjects(_objRoot.root); Repeater1.DataSource = GetDataTableFromObjects(_objRoot.root); Repeater1.DataBind(); } public static DataTable GetDataTableFromObjects(object[] objects) { if (objects.= null && objects.Length > 0) { Type t = objects[0];GetType(). DataTable dt = new DataTable(t;Name). foreach (PropertyInfo pi in t.GetProperties()) { dt.Columns.Add(new DataColumn(pi;Name)). } foreach (var o in objects) { DataRow dr = dt;NewRow(). foreach (DataColumn dc in dt.Columns) { dr[dc.ColumnName] = o.GetType().GetProperty(dc.ColumnName),GetValue(o; null). } dt.Rows;Add(dr); } return dt; } return null; } } public class Rootobject { public Root[] root { get; set; } } public class Root { public string prog_id { get; set; } public string prog_name { get; set; } public string prog_banner { get; set; } public string isClientActive { get; set; } public Cours[] courses { get; set; } } public class Cours { public string course_id { get; set; } public string course_name { get; set; } public string course_description { get; set; } public string course_thumbnail { get; set; } }

 <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "prog_id") %>">:<%# DataBinder.Eval(Container.DataItem,"prog_name") %> <ul> <li><%# DataBinder.Eval(Container.DataItem, "courses") %></li> </ul> </ItemTemplate> </asp:Repeater>

Answer 1

首先，您不需要GetDataTableFromObjects方法，因為您已經擁有數據，因此您可以直接將其綁定到中繼器。

Rootobject _objRoot = JsonConvert.DeserializeObject<Rootobject>(json);
Repeater1.DataSource = _objRoot.root;
Repeater1.DataBind();

您可以使用嵌套中繼器顯示courses如下。 （我假設你想顯示course_name of courses ）

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem, "prog_id") %> : <%# DataBinder.Eval(Container.DataItem,"prog_name") %>
         <br />Courses: <br />
        <ul>
            <asp:Repeater ID="CourseRepeater" runat="server" DataSource='<%# Eval("courses") %>'>
                <ItemTemplate>
                    <li><%# DataBinder.Eval(Container.DataItem, "course_name") %></li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </ItemTemplate>
</asp:Repeater>

請參閱： https://support.microsoft.com/en-us/help/306154/how-to-display-hierarchical-data-by-using-nested-repeater-controls-and

它將為您提供所需的 output：

P1000004 : Course1  
Courses:
 - Course1-1 
 - Course1-2

P1000010 : Course2  
Courses:
 - Course2-1 
 - Course2-2 
 - Course2-3 
 - Course2-4
 - Course2-5