创建HTMLTABLE使用ASP.NET直放站动态绑定到一个对象列表(Creating An Htm

2019-09-18 07:02发布

我是一个中继器内创建表编程。 我的问题是,在项目模板部分细胞不正常渲染。 他们表现出了作为表的标记之后文本节点。 有没有人对如何获得表格单元格中正确地渲染任何建议?

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; }
        }
    }
}

更新:多亏了罗布的帮助下,我能得到的代码工作。 现在我有被完全装载在一个全功能的中继器代码隐藏与数据绑定。 太好了!

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; }
        }
    }
}

Answer 1:

这是因为在你的逻辑,你要创建一个表中的AddHeader方法的头并将其添加到中继器,将创建:

<table>
<tbody><tr>
    <th>Name</th>
    <th>Breed</th>
</tr></tbody>
</table>

然后添加列表项到中继器,是到中继器,而不是第一个表。 您是表后添加表行的repeader,浏览器会呈现此行,细胞只是文本节点,因为他们没有自己的父TBODY表元素。

所以你需要找到一种方法,有打开和关闭表标签中继器写入HTML

<table>
    <tbody>
        <asp:Repeater ID="fooRepeater" runat="server" ></asp:Repeater>
    </tbody>       
</table>

因此,中继器渲染会是这样的:RexRussell梗对于每个项目

我相信你的逻辑是错的,如果你想在中继器,你需要改变这样的代码表中的每个项目:

    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。 如果你希望每个转发器项目是一个表行的逻辑必须是不同的。



文章来源: Creating An HtmlTable Using An ASP.NET Repeater Dynamically Bound to an Object List