データリストで次の項目を満たしていますか？

Question

私はこのようなことをどのように達成するのか考えていないので、ここに行きます。

は、私は次のようなデータを持っている datatableを持っている：Green.png、Red.png、Yellow.png：

Room Cook Waiter Input 
201 Joe Jim  Green.png 
202 Jack Mary Red.png 
203 Jet Mark Yellow.png 
204 Nick Jill Green.png 

私は3つのPNGファイルを持っています。各PNGは100x100ピクセルです。

私が使用しているデータコントロールはdatalistです。各datalistアイテムには、Input列に従ってPNGを表示する100x100px divと、列Room,およびWaiterの3つのラベルがあります。

これは問題ではなく、すでに正しく表示されています。各データリスト項目のサイズは100x100pxで、この領域には3つのlabelsが表示されています。

私が立ち往生している大きな問題は、各データリスト項目をクリックしてサーバー側のコードを実行できることです。サーバー側のコードが実行されると、コードビハインドはRoom,Cookになります。 datalistの項目にはWaiterが含まれています。これが私が本当に立ち往生している場所です。

私が見た部分解決策のほとんどはjqueryで行っていますが、私はそれを使用したくありません。理想的には、イメージボタンの上にラベルを追加することですが、これは不可能です。悪いケースのシナリオは、ボタンの外側にテキストを表示することですが、それはデザインを壊すでしょう。

私は、ASPXマークアップを含めています：

<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5"> 
    <ItemTemplate> 
    <div style="padding: 8px"> 
     <div style='width:195px;height:162px; background-image:url(<%# Eval("image_path") %>)'> 
      <div style="width: 195px; height: 22px; padding-top: 5px; overflow: hidden;"> 
       <div style="box-sizing: border-box; width:97px; float:left;"> 
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label> 
       </div> 
      </div> 
      <div style="width: 195px; height: 22px; box-sizing: border-box"> 
       <asp:Label ID="Label2" runat="server" Text='<%# Eval("CookName")%>' ></asp:Label> 
      </div> 
      <div style="width: 195px; height: 22px; box-sizing: border-box"> 
       <asp:Label ID="Label3" runat="server" Text='<%# Eval("WaiterName")%>' ></asp:Label> 
      </div> 
     </div> 
    </div> 
    </ItemTemplate> 
</asp:DataList> 

すべてのヘルプは高く評価されます。

Answer 1

LinkBut​​tonコントロールを使用してプライマリDIVをラップすると、目的を達成できるはずです。これにより、DIV全体をクリック可能にします。 CommandNameプロパティとCommandArgumentプロパティを使用する必要があります。

<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5"> 
    <ItemTemplate> 
    <asp:LinkButton ID="lnkButton" runat="server" CommandName="Details" CommandArgument='<%# Eval("RoomNum") + "," + Eval("CookName") + "," + Eval("WaiterName") %>' OnClick="lnkButton_Click"> 
    <div style="padding: 8px"> 
     <div style='width:195px;height:162px; background-image:url(<%# Eval("image_path") %>)'> 
      <div style="width: 195px; height: 22px; padding-top: 5px; overflow: hidden;"> 
       <div style="box-sizing: border-box; width:97px; float:left;"> 
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label> 
       </div> 
      </div> 
      <div style="width: 195px; height: 22px; box-sizing: border-box"> 
       <asp:Label ID="Label2" runat="server" Text='<%# Eval("CookName")%>' ></asp:Label> 
      </div> 
      <div style="width: 195px; height: 22px; box-sizing: border-box"> 
       <asp:Label ID="Label3" runat="server" Text='<%# Eval("WaiterName")%>' ></asp:Label> 
      </div> 
     </div> 
    </div> 
    </asp:LinkButton> 
    </ItemTemplate> 
</asp:DataList> 

また、DataListコントロールで "OnItemCommand"コマンドを使用することもできます。これを設定する際に役立つ情報があります：https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.itemcommand(v=vs.110).aspx