asp.net - 我想根据我从数据库获取的项目和图像的数量从 C# 代码隐藏创建 Bootstrap 图像容器和模式

Question

我想根据我从数据库获取的项目和图像的数量，从后面的 C# 代码创建 Bootstrap 模式和图像容器。请建议我该怎么做。如何在c#中编写html代码..

我想如下所示，并根据来自数据库的图像仅生成 n 个图像容器。提前致谢。

<div class="row">
    <asp:Panel ID="pnl" runat="server">
        <div class="col-md-12" style="margin-top: -60px">
            <div class="container">
                <div class="jumbotron" style="background: rgba(200, 54, 54, 0.0);">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-image="images/r5.jpg"
                                data-target="#image-gallery">
                                <asp:Image runat="server" ID="img1" class="img-responsive" ImageUrl="images/r5.jpg"
                                    alt="Short alt text" />
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="btnSave" class="form-control" runat="server" Text="Book Now" BackColor="#3465aa"
                                ForeColor="White" />
                            <p>
                            </p>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-image="images/r1.jpg"
                                data-target="#image-gallery">
                                <img class="img-responsive" src="images/r1.jpg" alt="Short alt text">
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="Button1" class="form-control" runat="server" Text="Book Now" BackColor="#3465aa"
                                ForeColor="White" />
                            <p>
                            </p>
                        </div>
                    </div>
              </div>
        </div>
    </asp:Panel>
</div>
<div class="row">
    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="image-gallery-title"></h4>
        </div>
                <div class="modal-body">
                    <img id="image-gallery-image" class="img-responsive" src="">
                </div>
                <div class="modal-footer">
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="show-previous-image">
                            Previous</button>
                    </div>
                    <div class="col-md-8 text-justify" id="image-gallery-caption">

                    </div>
                    <div class="col-md-2">
                        <button type="button" id="show-next-image" class="btn btn-default">
                            Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这很简单。使用 Asp.Net 的 LiteralControl 从服务器端动态生成 HTML 组件。

创建一个容器分区并在 HTML 中为其分配一个 ID。

现在创建一个 LiteralControl 类的对象，并将所有图像标签作为字符串参数附加到对象参数中。

在数据来自数据库的循环内使用上面的对象创建，并在 C# 代码本身中动态分配 img-id 和其他 CSS 详细信息，引用您之前创建的父部门 id。

Follow this link to know more about Literal controls

例如，这是从数据库获取数据的代码

Sqldatareader dr=cmd.executereader();
while(dr.read()) 
{   
LiteralControl ob=new LiteralControl():
ob.text=@"<div id="displayroom" class="cards col-xs-4 col-xs-4 col- 
xs-4"><img src="img path from Db" class="img-responsive img-square"  
id="dr[0].ToString()"/><h3>Room Details: dr[3].ToString()</h3></div>";
}
dr.close();

您需要记住的唯一一件事是作为参数传递给 LiteralControl 对象的不同值的正确连接。

谢谢