0

在我的asp web 应用程序中，我HtmlGenericControl用来填充一个列表。

ASP代码：

<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 生成相同行为的列表。在上面的代码中，数据是一个带有Idand的数组Name。我有相同的 JSON 字符串，看起来像这样。

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

我需要使用与使用 C# <li>生成的相同的 Javascript进行填充。我怎样才能做到这一点？如何在生成时使用 javascript 添加属性、样式、类<li>HtmlGenericControl<li>

4

1 回答 1

0

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

解析 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 Array 将新的 li 元素添加到 ul

通过调用来引用数组中的不同对象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很容易地设置 the 和其他属性。

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);
}
于 2019-07-30T21:02:51.760 回答