Question

我需要在某些缩略图上加上价格（文字）。我发现以下代码有效..

CSS

.col-md-4 {
    display: table;
}

.thumbnail{
    position:relative;
}

.thumbnail img{
    max-width:100%;
}

.thumbnail h1{
  position:absolute;
  top:50%;
  left:0;
  color:lightgrey;
  width:100%;
  text-align:center;
  transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
  margin:0;
}

ASP.NET

<div class="col-md-4">
    <div class="thumbnail">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
         <h1>Hello</h1>
    </div>
</div>

但是，我想尝试将上面的内容整合到以下复杂的代码行中，我还没有找到从哪里开始的线索（这是为我写的）。这就是这条线..

Dim liByLiteral As New LiteralControl("<li><a href='http://images.example.com/" & filenameAndPrice(0) & "' class=""nyroModal"" rel=""gal" & DataBinder.Eval(e.Item.DataItem, "accountID").ToString & """ title=""" & filenameAndPrice(2) & " - PRICE: £" & filenameAndPrice(4) & """ onclick=""openImage('" & filenameAndPrice(1) & "', '" & txtItem.ClientID & "', '" & filenameAndPrice(0) & "');""><img class='lazy" & opacity & "' data-src='http://images.example.com/thumbnails/" & filenameAndPrice(0) & "' height='120' width='120' src='./files/images/loader.png' /></a></li>")

filenameAndPrice（4）是商品的价格。我很高兴它被添加到Nyromodal标题，但也需要显示在缩略图上。任何帮助都非常感谢。

Answer 1

添加runat服务器属性并将ID提供给您的html控件。

<div class="col-md-4">
        <div class="thumbnail">
            <img runat="server" id="tmdiv" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
             <h1 runat="server" id="myheaderid" >Hello</h1>
        </div>
    </div>

在服务器上，现在您可以访问这些并可以添加任何html属性。喜欢;

   myheaderid.InnerHtml= liByLiteral 
   tmdiv.atrributes.add("title", filenameAndPrice(4))

缩略图上的文字

1 个答案: