使用 C# 对象列表在 html 中创建表答案

【问题标题】：Create table in html using C# object list使用 C# 对象列表在 html 中创建表
【发布时间】：2019-12-20 06:28:57
【问题描述】：

我创建了一个 API，它以 json 格式返回 EventJOINEventDate 类型的列表。我现在正在尝试编写一个 Web 表单来调用 API 并在表中显示来自 json 文件的事件。 Web 表单有 2 个输入：input_date 和 input_num。我写了这么远，但现在卡住了，不知道如何继续。如何使用我写的来创建一个 html 表格？

    string StartDate = input_date.ToString();
    string Num = input_num.ToString();
    string url = String.Format("Http://..."); //I have my url here
    WebRequest requestObj = WebRequest.Create(url);
    requestObj.Method = "GET";
    HttpWebResponse responseObj = null;
    responseObj = (HttpWebResponse)requestObj.GetResponse();
    string strresult = null;
    using (Stream stream = responseObj.GetResponseStream())
    {
        StreamReader sr = new StreamReader(stream);
        strresult = sr.ReadToEnd();
        sr.Close();
    }
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List<EventJOINEventDate> EventList = (List <EventJOINEventDate>)serializer.Deserialize(strresult, typeof(List<EventJOINEventDate>));
    foreach(EventJOINEventDate obj in EventList)
    {
        long EventID = obj.EventID;
        DateTime StartDateTime = obj.StartDateTime;
        string EventName = obj.EventName;
        string EventDesc = obj.EventDesc;
        string Address1 = obj.Address1;
        string Address2 = obj.Address2;
        string City = obj.City;
        string State = obj.State;
        string Zip = obj.Zip;
        string EventURL = obj.EventURL;
        string RegistrationURL = obj.RegistrationURL;
        string InvitationURL = obj.InvitationURL;
    }

【问题讨论】：

有很多选择。您是否已设置要绑定的 HTML 表（Repeater、DataGrid 等）？或者你想通过代码隐藏创建一个新的动态表并渲染出来？
@JohnPete22 我还没有设置任何东西，我想要的正是你所说的，通过代码隐藏创建一个新的动态表并渲染出来。
在服务器端渲染而不是仅仅使用客户端框架来使用 API 并进行渲染，这听起来像是很多开销。毕竟这通常是让 API 返回 JSON 的关键。
@Filburt 那么在 html 表格中显示从 API 检索到的 json 文件的最佳方式是什么？

标签： c# html asp.net webforms

【解决方案1】：

免责声明： 此答案试图提出与服务器端/代码隐藏解决方案不同的方法。它旨在作为一种替代方法来说明使用 API 的方式。

使用jquery，你只需要一个静态html页面和几行js。

由于您没有显示 JSON 的确切结构，因此您必须根据您的 JSON 属性进行调整。

<html>
<head/>
<body>

    <div>
        <table id="events" />
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
    var uri = 'your/url/here';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains your json result.

          // Look for your column names
          var cols = Object.keys(data[0]);

          // create the table header
          var header = $('<thead />').appendTo('#events');

          for (var i = 0; i < cols.length; i++) {
              $('<th />', { text: cols[i] }).appendTo(header);
          }

          // create the table body
          var tBody = $('<tbody />').appendTo('#events');

          // create rows and cells
          for (var i = 0; i < data.length; i++) { // each row

              var row = $('<tr />').appendTo(tBody);

              for (var j = 0; j < cols.length; j++) { // each column

                  var obj = data[i];

                  $('<td />', {
                      text: obj[cols[j]]
                  }).attr('data-label', cols[j]).appendTo(row);
              }
          }
          });
    });
    </script>
</body>
</html>

当然，这只是原始表输出。要添加更多样式，您肯定会想要使用现有的 jquery 表插件或 Angular 或 Knockout 等框架。

【讨论】：

【解决方案2】：

您可以使用 javascript 来做到这一点。对此方法进行 ajax 调用。在响应中，您将获得一个 Json。 1.) 将其转换为 Javascript 中的对象： - https://www.w3schools.com/js/js_json_parse.asp

让我们假设你有一个对象数组 2.) 通过数组运行一个 foreach 循环 [Loop 1]。在此循环中创建一个数据行。 : - https://www.w3schools.com/jsref/met_table_insertrow.asp

3.) 为数组中的每个对象运行一个 foreach 循环 [Loop 2]（嵌套在 [Loop 1] 内的 foreach）。创建一个表列并通过javascript添加该列的值：-https://www.w3schools.com/jsref/met_tablerow_insertcell.asp

应该这样做。让我知道这是否解决了它

【讨论】：

【解决方案3】：

好的，这是为您提供的快速解决方案。正如另一个发布的那样，客户端可能更有效。但是如果你想去服务器端，你可以采用这种方法并对其进行定制，为表/行/单元格添加一些样式。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="_testPWforSO.aspx.cs" Inherits="_testPWforSO" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:PlaceHolder ID="phTest" runat="server" />
        </div>
    </form>
</body>
</html>

using System;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

public class EventList
{
    public int Id { get; set; }
    public string EventName { get; set; }
    // more variables
}

public partial class _testPWforSO :  System.Web.UI.Page
{

    public void Page_Load(Object sender, EventArgs e)
    {
        EventList test = new EventList() { Id = 12, EventName = "test123" };
        EventList test1 = new EventList() { Id = 34, EventName = "test456" };
        List<EventList> events = new List<EventList>() { test, test1 };
        TestFunction(events);
    }

    public void TestFunction(List<EventList> events)
    {
        HtmlTable table = new HtmlTable();

        // add table headers if you want

        foreach (EventList item in events)
        {
            table.Rows.Add(AddRow(item));
        }

        phTest.Controls.Add(table);
    }

    public HtmlTableRow AddRow(EventList item)
    {
        HtmlTableRow result = new HtmlTableRow();

        result.Cells.Add(new HtmlTableCell() { InnerText = item.EventName });
        result.Cells.Add(new HtmlTableCell() { InnerText = item.Id.ToString() });

        return result;
    }
}

【讨论】：