Question

我很难将Button控件添加到.aspx页面中的特定位置。我想我可以创建按钮，但我不知道如何将它添加到页面中。

代码如下：

                <%
                    var cpus = productItems.FindAll(t => t.Type == "cpu");
                    foreach (var cpu in cpus)
                    { %>
                <div class="row product cpu">
                    <div class="col-md-3">
                        <img class="center-block" src="Content/images/processor.jpg" />
                        <span class="price"><%= cpu.Price %></span>
                        <span class="addtocart">
                            <% Button b = new Button();
                                b.ID = "Button" + cpu.ID;
                                b.CommandArgument = cpu.ID.ToString();
                                b.Text = "Add to Cart";
                                b.OnClientClick = "Addtocart_Click";
                            %>
                        </span>
                        <br />
                    </div>
                </div>
                <% } %>

我也可以将Button作为productItems集合的一部分创建，但仍然存在如何在页面上呈现按钮的问题。

我确信有更好的方法可以做到这一点，只是不确定在哪里看。

提前致谢。

Answer 1

在WebForms中，您可以使用具有DataSource概念的列表控件（某些对象列表）和一个呈现每个对象如何显示的模板。通常，只要您有要在网站上呈现的项目列表，就应该使用这些。

在这种特殊情况下，您可能希望使用ListView控件。这允许您定义布局模板和项目模板。

您的aspx标记如下所示：

<asp:ListView ID="lvCpus" OnItemDataBound="lvCpus_ItemDataBound" runat="server">
    <LayoutTemplate>
        <div class="row product cpu">
            <div runat="server" id="itemPlaceholder"></div>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div runat="server" class="col-md-3">
            <img class="center-block" src="Content/images/processor.jpg" />
            <span class="price"><%# Eval("Price") %></span>
            <span class="addtocart">
                <asp:Button ID="addToCart" Text="Add To Cart" runat="server" />
            </span>
        </div>
    </ItemTemplate>
</asp:ListView>

这定义了一个ListView控件，并创建一个与您的容器匹配的LayoutTemplate。在内部它有一个div，必须有id itemPlaceholder，用于填充绑定到该控件的各种项目。

ItemTemplate部分定义了您希望每个项目看起来像什么。在这种情况下，它是一个包含要购买的CPU的列。

请注意，该按钮被定义为常规ASP Web控件，但未设置任何动态数据。这是因为如果您尝试使用评估项目分配CommandArgument之类的属性，则服务器标记将不会格式正确并且您将获得YSOD。要解决此问题，您需要为将数据绑定到此Web Control时调用的ListView指定OnItemDataBound函数。就我而言，它被称为lvCpus_ItemDataBound。

本例中的ItemDataBound方法如下所示：

protected void lvCpus_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        var cpu = e.Item.DataItem as Cpu;

        if (cpu == null)
        {
            return;
        }

        var btn = e.Item.FindControl("addToCart") as Button;

        if (btn == null)
        {
            return;
        }

        btn.CommandArgument = cpu.Id.ToString();
        // Set other server-side properties required from code.
    }
}

绑定数据源时，其中包含0个或更多项。对于数据源中的每个项目，都会调用此方法，并允许您指定无法在模板中直接表达的服务器端适当值。

在我们的示例中，我们从CommandArgument类指定Cpu，但也可以指定其他值。

最后，我们需要确保我们可以用数据填充列表视图。因此，在Page_Load中，我们可以将数据绑定到此ListView，如下所示：

protected void Page_Load(object sender, EventArgs e)
{
    lvCpus.DataSource = GetCpus();
    lvCpus.DataBind();
}

private IEnumerable<Cpu> GetCpus()
{
    yield return new Cpu { Id = 1, Price = 5 };
    yield return new Cpu { Id = 2, Price = 10 };
    yield return new Cpu { Id = 3, Price = 15 };
    yield return new Cpu { Id = 4, Price = 15 };
    yield return new Cpu { Id = 5, Price = 20 };
}

我们首先将List View的数据源设置为您拥有的CPU列表，然后在ListView上调用DataBind()方法。这会触发OnItemDataBound函数开始填充数据，最后你会留下，在这种情况下，网站上会显示5个CPU。

Answer 2

我已将span添加为runatserver并将控件（即按钮）添加到其中

尝试以下代码，

            <div class="row product cpu">
                <div class="col-md-3">
                    <img class="center-block" src="Content/images/processor.jpg" />
                    <span class="price"><%= cpu.Price %></span>
                    <span class="addtocart" id="buttonContainer" runat="server">
                        <% Button b = new Button();
                            b.ID = "Button" + cpu.ID;
                            b.CommandArgument = cpu.ID.ToString();
                            b.Text = "Add to Cart";
                            b.OnClientClick = "Addtocart_Click";
                            buttonContainer.Controls.Add(b);
                        %>
                    </span>
                    <br />
                </div>
            </div>

Answer 3

在您的情况下，由于您使用的是内联代码，因此以下方法是最佳方法。

我在原始标记上放置了一个占位符控件，其标记为placeHolder1，位于按钮需要显示的位置。这使您可以完全控制按钮在渲染页面中的显示位置。

您需要使用占位符控件，这是一个标准的ASP.Net 控制在运行时动态添加控件。
将占位符控件放在页面标记中您希望显示动态创建按钮的位置。
然后，只需使用代码行placeHolder1.Controls.Add(b);添加按钮控件。

在页面中的特定位置动态添加按钮

<%
   var cpus = productItems.FindAll(t => t.Type == "cpu");
   foreach (var cpu in cpus)
   { %>
<div class="row product cpu">
   <div class="col-md-3">
      <img class="center-block" src="Content/images/processor.jpg" />
      <span class="price"><%= cpu.Price %></span>
      <span class="addtocart">
         <% Button b = new Button();
            b.ID = "Button" + cpu.ID;
            b.CommandArgument = cpu.ID.ToString();
            b.Text = "Add to Cart";
            b.OnClientClick = "Addtocart_Click";
            placeHolder1.Controls.Add(b);
            %>
         <asp:PlaceHolder ID="placeHolder1" runat="server"></asp:PlaceHolder>
      </span>
      <br />
   </div>
</div>
<% } %>

如何在asp.net aspx文件中动态创建控件

3 个答案: