Question

在我的asp Web应用程序中，我使用HtmlGenericControl来填充列表。

aspx代码：

<div class="col-xs-12" id="displayDiv" runat="server">
     <ul id="servicesList" runat="server"></ul>
</div>

来自背后的代码

private void LoadDisplayOrder()
{
    Service service = new Service();
    SortItem[] data = service.GetServicesDisplayOrderData();
    servicesList.Controls.Clear();
    for (int i = 0; i < data.Length; i++)
    {
        SortItem si = data[i];
        using (HtmlGenericControl li = new HtmlGenericControl("li"))
        {
            li.Attributes.Add("class", "sortable-service-item");
            using (HtmlGenericControl spanId = new HtmlGenericControl("span"))
            {
                using (HtmlGenericControl spanName = new HtmlGenericControl("span"))
                {
                    using (HtmlGenericControl dragHandel = new HtmlGenericControl("span"))
                    {
                        spanId.InnerText = si.Id.ToString(CultureInfo.CurrentCulture);
                        dragHandel.Attributes.Add("class", "drag-handle-container");
                        dragHandel.InnerHtml = "<i class='fa fa-bars'></i>";
                        serviceIds.Add(si.Id);
                        spanId.Attributes.Add("style", "display: none;");
                        spanName.InnerText = si.Name;
                        li.Controls.Add(dragHandel);
                        li.Controls.Add(spanId);
                        li.Controls.Add(spanName);
                        servicesList.Controls.Add(li);
                    }
                }
            }
        }
    }
}

此填充列表没有任何问题。现在，我需要使用javascript生成相同行为的列表。在上面的代码中，数据是一个带有Id和Name的数组。我有相同的JSON字符串，如下所示。

{
   "Id":1,
   "Name":"Doe"
},
{
   "Id":2,
   "Name":"Smith"
},
{
   "Id":3,
   "Name":"Jones"
}

我需要使用与我使用C＃<li>生成的<li>相同的Javascript来填充HtmlGenericControl。我怎样才能做到这一点？生成<li>

时如何使用JavaScript添加属性，样式，类

Answer 1

让我们将其分解为不同的步骤：

解析JSON

我对示例JSON进行了测试，然后调用了内置的javascript命令来对其进行解析并将其存储在数组中。（确保您的JSON是有效的JSON数组-用方括号[]包裹。）

var json = "[ { \"Id\":1, \"Name\":\"Doe\" }, { \"Id\":2, \"Name\":\"Smith\" }, 
              { \"Id\":3, \"Name\":\"Jones\" } ]";

var obj = JSON.parse(json);

遍历JSON数组以向ul添加新的li元素

通过调用array[index].Property引用数组中的不同对象。添加TextNode以设置li

的文本

var list = document.getElementById('<%= servicesList.ClientID %>');

for (i = 0; i < obj.length; i++) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(obj[i].Name));    
    list.appendChild(li);
}

设置属性-循环

在循环中，您可以轻松设置className和其他属性。

li.className = "myClass";
li.setAttribute("data-id", obj[i].Id);

希望这会有所帮助。

整个测试样本：

var json = "[ { \"Id\":1, \"Name\":\"Doe\" }, { \"Id\":2, \"Name\":\"Smith\" }, 
              { \"Id\":3, \"Name\":\"Jones\" } ]";

var obj = JSON.parse(json);

var list = document.getElementById('<%= servicesList.ClientID %>');

for (i = 0; i < obj.length; i++) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(obj[i].Name));
    li.className = "myClass";
    li.setAttribute("data-id", obj[i].Id);
    list.appendChild(li);
}

如何使用JSON填充<li>

1 个答案: