我想根据我从数据库获取的项目和图像的数量,从后面的 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>
<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>
<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>
最佳答案
这很简单。使用 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 对象的不同值的正确连接。
谢谢
关于asp.net - 我想根据我从数据库获取的项目和图像的数量从 C# 代码隐藏创建 Bootstrap 图像容器和模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46644890/