Question

我有一个ASP.Net网页，并创建了一个自定义控件，其灵魂目的是成为一个列表＆＃34; item＆＃34;显示在主页面板（asp：Panel）中，这是列表控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cListItem.ascx.cs"       Inherits="CatPro.Presentation.UserControls.CatalyticItem" %>
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/lightbox-2.6.min.js"></script>
<link href="../Css/lightbox.css" rel="stylesheet" />

</style>
<table class="MainFrame" border="1" runat="server">
  <tr>
    <td runat="server">
  <table class="MainFrame">

    <tr>
      <td class="CatImageColumn" rowspan="5">            
        <asp:DataList ID="DataList1" runat="server" 
              RepeatColumns="5" 
              RepeatDirection="Horizontal" 
              RepeatLayout="Flow">
          <ItemTemplate>
            <a id="ImageLink"  href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
               <img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
             </a>
          </ItemTemplate>
        </asp:DataList>                  
      </td>
      <td class="LinkHeader" colspan="5">
        <asp:LinkButton ID="hyperlinkDescription" runat="server" Font-Bold="True" Font-Size="X-Large">Item Description Link</asp:LinkButton>
      </td>
      <td class="LinkHeader">
        </td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblYear" runat="server" Text="Year"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtYear" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        <asp:Label ID="lblRasCategory" runat="server" Text="RAS Category:"></asp:Label>
      </td>
      <td class="SecondRowText">
        <asp:Label ID="txtRASCategory" runat="server"></asp:Label>
      </td>
      <td class="ThirdRowLabel">
        <asp:Label ID="lblValue89" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
      </td>
      <td class="ThirdRowText">
        <asp:Label ID="txtValue89" runat="server" ForeColor="Green">$0</asp:Label>
      </td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblMake" runat="server" Text="Make:"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtMake" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        <asp:Label ID="lblPMCategory" runat="server" Text="PowerMount Category:"></asp:Label>
      </td>
      <td class="SecondRowText">
        <asp:Label ID="txtPMCategory" runat="server"></asp:Label>
      </td>
      <td class="ThirdRowLabel">
        <asp:Label ID="lblValue100" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
      </td>
      <td class="ThirdRowText">
        <asp:Label ID="txtValue100" runat="server" ForeColor="Green">$0</asp:Label>
      </td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblModel" runat="server" Text="Model:"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtModel" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        <asp:Label ID="lblOENumber" runat="server" Text="OE Number:"></asp:Label>
      </td>
      <td class="SecondRowText">
        <asp:Label ID="txtOENumber" runat="server"></asp:Label>
      </td>
      <td class="ThirdRowLabel"></td>
      <td class="ThirdRowText"></td>
    </tr>
    <tr>
      <td class="FirstRowLabel">
        <asp:Label ID="lblSubModel" runat="server" Text="Sub Model:"></asp:Label>
      </td>
      <td class="FirstRowText">
        <asp:Label ID="txtSubModel" runat="server"></asp:Label>
      </td>
      <td class="SecondRowLabel">
        &nbsp;</td>
      <td class="SecondRowText">
        &nbsp;</td>
      <td class="ThirdRowLabel">&nbsp;</td>
      <td class="ThirdRowText">&nbsp;</td>
    </tr>
  </table>
</td>

对于从数据库调用返回的每个记录，其中一个控件将添加到主页面板控件中。每个项目可能有多个图像，所以我将它们存储在后面代码中的asp：DataList中：

  string[] images = listCImages.Select(c => c.ImagePath).ToArray();
  DataList1.DataSource = images;
  DataList1.DataBind();

理想情况下，我想在控件上的数据集中显示第一个图像，然后单击时让LightBox控件显示相关的图像集（通过单击LightBox窗口中的集合）。

这是使用LightBox控件的部分，我遇到了设置问题

<asp:DataList ID="DataList1" runat="server" 
              RepeatColumns="5" 
              RepeatDirection="Horizontal" 
              RepeatLayout="Flow">
          <ItemTemplate>
            <a id="ImageLink"  href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
               <img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
             </a>
          </ItemTemplate>
        </asp:DataList>

我可以加载并显示单个图像而没有任何问题，但我尝试执行上述操作并非如此简单。这是正确的方法吗？我应该做些什么改变以获得理想的结果？

Answer 1

我暂时通过做一些黑客攻击来解决这个问题（在我看来这是一种草率的方法）......

我首先动态创建了我的显示图像：

  //Create a HyperLink control
  HyperLink linkWrapper = new HyperLink();
  linkWrapper.ID = catId.ToString();

  //assign a lightbox attribute
  linkWrapper.Attributes.Add("rel", string.Format("lightbox[{0}]", catId.ToString()));
  linkWrapper.Attributes.Add("title", string.Format("Image(s) for  {0}", catId.ToString()));

  //The path to my local image
  linkWrapper.NavigateUrl = imagePath;

  //next, create a display image
  Image mainImage = new Image();
  mainImage.Height = 128;
  mainImage.Width = 128;
  mainImage.ID = "img_" + catId.ToString();
  mainImage.ImageUrl = imagePath;

  //wrap the link around the image
  linkWrapper.Controls.Add(mainImage);

  //dynamically add display control to td cell
  CatImages.Controls.Add(linkWrapper);

然后，如果有任何其他相关图像，我添加它们像：

foreach (catImage cat in listCatImages) //custom generic list iteration
{
  //create a HyperLink control
  HyperLink hl = new HyperLink();
  hl.Attributes.Add("rel", string.Format("lightbox[{0}]", catalyticConverterId.ToString()));
  hl.Attributes.Add("title", "My Cats");
  hl.NavigateUrl = cat.ImagePath;

  //add just the link to the td cell
  CatImages.Controls.Add(hl);
}

现在，当我点击“显示图像”时，LightBox会拾取图像组并允许我浏览它们（并且链接不可见）。

将图像分组以在LightBox中显示

1 个答案: