Question

我的asp.net页面中有这个div标签（bootstrap）。

<div class="col-lg-4">
  <div class="panel panel-success">                       
     <div class="panel-body">
          <asp:Image ID="Image1" runat="server"  class="img-responsive" />                            
     </div>
        <div class="panel-body">
         <asp:Button runat="server" CssClass="btn-default" ID="txtEdit" Text="Edit" />
        </div> 
   </div>
</div>

它们将由SQL中的数据填充。我需要的是每当在数据库中添加一组新数据时动态生成div标签class="col-lg-4"块。我如何使用javascript或asp.net实现这一目标。

Answer 1

正如Win所说，你的问题相当广泛。但是，我会尝试根据您提供的信息回答您的问题。

我暂时假设在加载页面时（无论是最初还是回发后）都需要进行动态生成。我提供的示例假设该工作完全在ASP.Net中完成，不涉及任何JavaScript。

这是一个示例.aspx页面的片段：

<form id="form1" runat="server">

        <asp:Repeater ID="repeater" runat="server">
            <ItemTemplate>
                <div class="col-lg-4">
                  <div class="panel panel-success">                       
                     <div class="panel-body">
                          <asp:Image ID="Image1" runat="server"  class="img-responsive" ImageUrl="<%#Eval("ImageUrl") %>" />                            
                     </div>
                        <div class="panel-body">
                         <asp:Button runat="server" CssClass="btn-default" ID="txtEdit" Text="Edit" />
                        </div> 
                   </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

    </form>

...以及示例页面代码隐藏的片段：

protected void Page_Load(object sender, EventArgs e)
        {
            repeater.DataSource = DataAccess.GetImages();
            repeater.DataBind();
        }

＆＃34; DataAccess＆＃34;我的示例中的类仅表示从数据库获取数据并将该数据绑定到Repeater控件的一些方法。出于我的例子的目的，我假设您已经找到了数据访问方法。关于.aspx示例的注意事项使用＆＃34; Eval＆＃34;数据绑定方法，并假设＆＃34; ImageUrl＆＃34;是数据访问代码作为集合的一部分返回的数据库列的名称或每个DTO（数据传输对象）的属性或其他内容的名称。＆＃34;评估和演示＆＃34;提供单向（只读）数据绑定到您拥有的Image控件的ImageUrl属性。

我确实看到你有一个＆＃34;编辑＆＃34;每个区块中的按钮，但您还没有提供足够的详细信息来说明您如何使用它，以便我说明如何实施。

当然，面向JavaScript的解决方案也是可行的，但它涉及的更多。使用带有Repeater控件的服务器端方法，如我的示例所示，可能正是您所需要的:-)至少，它是一个可以开始的地方。

祝你好运！

如何动态生成bootstrap div标记块

1 个答案: