我正在以编程方式在转发器内部创建表格。我的问题是,项目模板部分中的单元格无法正确呈现。它们在表格标记后显示为文本节点。有没有人对如何正确显示表格单元格有任何建议?
using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class WebForm2 : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var dogs = new List<Dog>
{
new Dog { Name = "Rex", Breed = "Russell Terrier" },
new Dog { Name = "Fido", Breed = "Poodle" },
new Dog { Name = "Fetcher", Breed = "Golden Retriever" },
};
var repeater = new Repeater { ID = "Repeater1" };
repeater.DataSource = dogs;
repeater.DataBind();
AddHeader(repeater);
AddItems(repeater, dogs);
PlaceHolder1.Controls.Add(repeater);
}
}
private void AddHeader(Repeater repeater)
{
var repeaterItem = new RepeaterItem(0, ListItemType.Header);
var table = new HtmlTable();
var row = new HtmlTableRow();
var cell1 = new HtmlTableCell("th") { InnerText = "Name" };
var cell2 = new HtmlTableCell("th") { InnerText = "Breed" };
row.Cells.Add(cell1);
row.Cells.Add(cell2);
table.Rows.Add(row);
repeaterItem.Controls.Add(table);
repeater.Controls.Add(repeaterItem);
}
private void AddItems(Repeater repeater, List<Dog> dogs)
{
for (var i = 0; i < repeater.Items.Count; i++)
{
var repeaterItem = new RepeaterItem(i + 1, ListItemType.Item);
var row = new HtmlTableRow();
var cell1 = new HtmlTableCell() { InnerText = dogs[i].Name };
var cell2 = new HtmlTableCell() { InnerText = dogs[i].Breed };
row.Cells.Add(cell1);
row.Cells.Add(cell2);
repeaterItem.Controls.Add(row);
repeater.Controls.Add(repeaterItem);
}
}
private sealed class Dog
{
public string Breed { get; set; }
public string Name { get; set; }
}
}
}
更新:在Rob的帮助下,我得以使代码正常工作。现在我有一个功能齐全的Repeater,它完全在数据绑定的后台代码中加载。真好!
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using ExtensionMethods.WebControls;
namespace WebApplication1
{
public partial class WebForm1 : Page
{
protected void Page_Load(object sender, EventArgs e)
{
var dogs = new List<Dog>
{
new Dog { Name = "Rex", Breed = "Russell Terrier" },
new Dog { Name = "Fido", Breed = "Poodle" },
new Dog { Name = "Fetcher", Breed = "Golden Retriever" },
};
var repeater = new Repeater
{
ID = "Repeater1",
HeaderTemplate = new CustomTemplate(ListItemType.Header),
ItemTemplate = new CustomTemplate(ListItemType.Item),
FooterTemplate = new CustomTemplate(ListItemType.Footer),
DataSource = dogs
};
repeater.DataBind();
PlaceHolder1.Controls.Add(repeater);
}
// Custom template class to add controls to the repeater's header, item and footer sections.
private sealed class CustomTemplate : ITemplate
{
private ListItemType ListItemType { get; set; }
public CustomTemplate(ListItemType type)
{
ListItemType = type;
}
public void InstantiateIn(Control container)
{
if (ListItemType == ListItemType.Header)
{
var table = new LiteralControl();
var head = new HtmlGenericControl("thead");
var row = new HtmlTableRow();
row.Cells.Add(new HtmlTableCell("th") { InnerText = "Breed" });
row.Cells.Add(new HtmlTableCell("th") { InnerText = "Name" });
head.Controls.Add(row);
table.Text = string.Format("<table>{0}<tbody>", head.RenderHtml());
container.Controls.Add(table);
}
else if (ListItemType == ListItemType.Item)
{
var row = new HtmlTableRow();
var cell1 = new HtmlTableCell();
cell1.Controls.Add(new Literal { ID = "LiteralBreed" });
row.Cells.Add(cell1);
var cell2 = new HtmlTableCell();
cell2.Controls.Add(new Literal { ID = "LiteralName" });
row.Cells.Add(cell2);
container.Controls.Add(row);
container.DataBinding += new EventHandler(Container_DataBinding);
}
else if (ListItemType == ListItemType.Footer)
{
var footer = new LiteralControl("</tbody></table>");
container.Controls.Add(footer);
}
}
// Event handler to populate the dog's breed and name in the table when data-binding occurs.
private void Container_DataBinding(object sender, EventArgs e)
{
var item = sender as RepeaterItem;
if (item != null)
{
var dog = ((Dog)item.DataItem);
var breed = item.FindDescendantsByType<Literal>().Single(x => x.ID == "LiteralBreed");
breed.Text = dog.Breed;
var name = item.FindDescendantsByType<Literal>().Single(x => x.ID == "LiteralName");
name.Text = dog.Name;
}
}
}
private sealed class Dog
{
public string Breed { get; set; }
public string Name { get; set; }
}
}
}
最佳答案
这是因为在您的逻辑中,您正在使用AddHeader方法创建一个带有标题的表,并将其添加到转发器中,这将创建:
<table>
<tbody><tr>
<th>Name</th>
<th>Breed</th>
</tr></tbody>
</table>
然后,您将列表项添加到转发器,是添加到转发器,而不是第一个表。
您正在将表行添加到表之后的转发器中,并且浏览器会将这些行和单元格渲染为纯文本节点,因为它们没有父级的tbody表元素。
中继器编写HTML,因此您需要找到一种方法来打开和关闭表标签
<table>
<tbody>
<asp:Repeater ID="fooRepeater" runat="server" ></asp:Repeater>
</tbody>
</table>
因此,中继器渲染将类似于:
雷克斯·罗素梗
对于每个项目
我认为,如果您希望将中继器中的每个项目都作为一个表,那么您的逻辑是错误的,您需要像这样更改代码:
private void AddItems(Repeater repeater, List<Dog> dogs)
{
var repeaterItem = new RepeaterItem(0, ListItemType.Header);
var table = new HtmlTable();
var row = new HtmlTableRow();
var cell1 = new HtmlTableCell("th") { InnerText = "Name" };
var cell2 = new HtmlTableCell("th") { InnerText = "Breed" };
row.Cells.Add(cell1);
row.Cells.Add(cell2);
table.Rows.Add(row);
for (var i = 0; i < repeater.Items.Count; i++)
{
repeaterItem = new RepeaterItem(i + 1, ListItemType.Item);
row = new HtmlTableRow();
cell1 = new HtmlTableCell() { InnerText = dogs[i].Name };
cell2 = new HtmlTableCell() { InnerText = dogs[i].Breed };
row.Cells.Add(cell1);
row.Cells.Add(cell2);
table.Rows.Add(row);
}
repeaterItem.Controls.Add(table);
repeater.Controls.Add(repeaterItem);
}
一切都会在AddItems方法中发生,并且您不再需要AddHeader。
如果要将每个转发器项目都作为表的行,则逻辑必须不同。
关于c# - 使用ASP.NET转发器动态绑定(bind)到对象列表来创建HtmlTable,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11110594/