C# 使用 .NET 填充 html 列表控件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/924592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
populate a html list control using .NET
提问by
I have a list defined like so:
我有一个如下定义的列表:
<ul id="myList" class='myClass'>
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
</ul>
using .NET how can I add items to the list dynamically? I also need to specify the class name on each new item
使用 .NET 如何将项目动态添加到列表中?我还需要在每个新项目上指定类名
回答by Binoj Antony
The simplest way you can solve this problem is by using the asp repeater control
解决此问题的最简单方法是使用 asp 中继器控件
<ul id="myList" class='myClass'>
<asp:Repeater ID="repeaterMyList" Runat="server">
<ItemTemplate>
<li class="myItemClass">
<%# Eval("Item") %>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
[Edit] - Do remember to set the datasource on repeaterMyList and call databind on the repeater control in the codebehind.
[编辑] - 请记住在repeaterMyList 上设置数据源并在代码隐藏中的repeater 控件上调用databind。
repeaterMyList.DataSource = someDataTable;
repeaterMyList.DataBind();
回答by Cerebrus
I'm assuming that there is a valid reason for you not to use the BulletedList webserver control. Anyway, this is an interesting programming exercise that illustrates the internals of the Htmlservercontrol architecture and how they map to simple HTML tags.
我假设您有正当理由不使用 BulletedList 网络服务器控件。无论如何,这是一个有趣的编程练习,它说明了 Htmlservercontrol 架构的内部结构以及它们如何映射到简单的 HTML 标签。
The HTML ul
and li
tags are not directly mapped as HTMLServercontrols. This means that even if you add a runat="server"
attribute to the list, it's contents will not be directly accessible as listitems.
HTMLul
和li
标签没有直接映射为 HTMLServer 控件。这意味着即使您runat="server"
向列表添加属性,它的内容也不能作为列表项直接访问。
However, all controls not directly mapped as Html server controls are accessible via the HtmlGenericControl
class. This makes it possible to create and modify such controls dynamically.
但是,所有未直接映射为 Html 服务器控件的控件都可以通过HtmlGenericControl
该类访问。这使得动态创建和修改此类控件成为可能。
The solution, therefore, is twofold:
因此,解决方案是双重的:
- Make the unordered list
runat="server"
so that you can access it in server-side code. Also, you should make the existing items in the listrunat="server"
, else they will be only be accessible as anLiteralControl
that contains the first two listitems as plain text. - In code, access the contents of the list and add a new HtmlGenericControl of type "li" to it.
- 制作无序列表,
runat="server"
以便您可以在服务器端代码中访问它。此外,您应该在列表中创建现有项目runat="server"
,否则它们将只能作为LiteralControl
包含前两个列表项目的纯文本访问。 - 在代码中,访问列表的内容并向其添加类型为“li”的新 HtmlGenericControl。
The following (bare-bones simple) page demonstrates this procedure :
以下(简单的)页面演示了此过程:
<%@ Page Language="VB" AutoEventWireup="false" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
Private Shared addedItems As List(Of HtmlGenericControl)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
'On first load, instantiate the List.
addedItems = New List(Of HtmlGenericControl)
End If
End Sub
Protected Sub btn1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'Add the previously created items to the UL list.
'This step is necessary because
'...the previously added items are lost on postback.
For i As Integer = 0 To addedItems.Count - 1
myList.Controls.Add(addedItems.Item(i))
Next
'Get the existing no. of items in the list
Dim count As Integer = myList.Controls.Count
'Create a new list item based on input in textbox.
Dim li As HtmlGenericControl = CreateBulletItem()
'Add the new list item at the end of the BulletedList.
myList.Controls.AddAt(count, li)
'Also add this newly created list item to the generic list.
addedItems.Add(li)
End Sub
Private Function CreateBulletItem() As HtmlGenericControl
Dim li As New HtmlGenericControl("li")
li.InnerText = txtNewItem.Value
li.Attributes("class") = "myItemClass"
Return li
End Function
</script>
<html>
<head runat="server">
<title>Test Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="myList" class='myClass' runat="server">
<li runat="server" class="myItemClass">Item 1</li>
<li runat="server" class="myItemClass">Item 2</li>
</ul>
<input type="text" id="txtNewItem" runat="server" />
<asp:Button ID="btn1" runat="server" Text="Add" OnClick="btn1_Click" />
</div>
</form>
</body>
</html>
回答by David Glenn
You could use asp:BulletedList like
您可以使用 asp:BulletedList 之类的
<asp:BulletedList ID="MyList1" CssClass="MyClass" runat="server">
<asp:ListItem Text="Item1" class="MyClass" />
</asp:BulletedList>
Add add code like
添加添加代码,如
ListItem item = new ListItem("Item2");
item.Attributes.Add("class", "MyClass");
MyList1.Items.Add(item);
Or if for some specific reason you need to use the ul tag then you can add a runat="server" to it. E.g.
或者,如果由于某些特定原因需要使用 ul 标记,则可以向其添加 runat="server"。例如
<ul id="MyList2" class="MyClass" runat="server">
<li class="MyClass">Item1</li>
</ul>
With code like
像这样的代码
HtmlGenericControl li = new HtmlGenericControl("li");
li.Attributes.Add("class", "MyClass");
li.InnerText = "Item2";
MyList2.Controls.Add(li);
回答by balexandre
you can even use that HTML, adding runat="server" you will be able to treat it as a HTMLControl no mater what control it is, I do this often with div's
您甚至可以使用该 HTML,添加 runat="server" 您将能够将其视为 HTMLControl,无论它是什么控件,我经常使用 div 来执行此操作
<ul id="myList" runat="server" class="myClass">
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
</ul>
then you get that HTMLControl and play with it
然后你得到那个 HTMLControl 并使用它
HtmlGenericControl li;
for (int x = 3; x <= 10; x++)
{
li = new HtmlGenericControl("li");
li.Attributes.Add("class", "myItemClass");
li.InnerText = "Item " + x;
myList.Controls.Add(li);
}
you will end up with:
你最终会得到:
<ul id="myList" runat="server" class="myClass">
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
<li class="myItemClass">Item 3</li>
<li class="myItemClass">Item 4</li>
<li class="myItemClass">Item 5</li>
<li class="myItemClass">Item 6</li>
<li class="myItemClass">Item 7</li>
<li class="myItemClass">Item 8</li>
<li class="myItemClass">Item 9</li>
<li class="myItemClass">Item 10</li>
</ul>
of course that you can use an ordered or unorderer list, they also below to the ASP.NET Web Controls.
当然,您可以使用有序或无序列表,它们也在 ASP.NET Web 控件下面。
<asp:BulletedList runat="server" ...