Erledigung der folgenden mit einem Datengeber?

Question

Ich habe keine Ahnung, wie man so etwas erreichen kann, also hier.

Ich habe eine datatable, die die folgenden Daten hat:

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

Ich habe 3 PNG-Dateien: Green.png, red.png, yellow.png. Jedes PNG ist 100x100px.

Die Datensteuerung, die ich verwendet habe, ist ein datalist. Jeder datalist Artikel hat folgendes: a 100x100px div zur Anzeige des PNG gemäß der Input Spalte und 3 Etiketten, für die Spalten Room, Cook und Waiter.

Dies ist kein Problem, und es wird bereits korrekt angezeigt: Jedes Datenlistenelement ist 100x100px groß und innerhalb dieses Bereichs habe ich 3 labels die anderen Spalten anzeigen.

Das größere Problem, an dem ich feststecke, ist es, auf jedes Datenelement klicken und serverseitigen Code ausführen zu können. Und wenn der serverseitige Code ausgeführt wird, hat der Codebehind die Room, Cook. und Waiter in diesem datalist Artikel. Hier bin ich wirklich festgefahren.

Die meisten der Teillösungen, die ich gesehen habe, waren mit jquery, aber ich möchte das nicht verwenden. Idealerweise wäre es eine Beschriftung über eine Bildschaltfläche hinzuzufügen, aber das ist nicht möglich. Ein schlimmeres Szenario wäre, den Text außerhalb der Schaltfläche anzuzeigen, aber das würde das Design ruinieren.

Ich bin auch der aspx Markup:

<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> 

Jede Hilfe ist willkommen.

Answer 1

Wickeln Sie Ihr primäres DIV mit einem LinkButton-Steuerelement, und dann sollten Sie in der Lage sein, zu erreichen, was Sie wollen. Dadurch wird das gesamte DIV anklickbar. Sie müssen möglicherweise die Eigenschaften CommandName und CommandArgument verwenden.

<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> 

Alternativ können Sie den Befehl "OnItemCommand" im DataList-Steuerelement verwenden. Hier finden Sie einige hilfreiche Informationen zum Einrichten: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.itemcommand(v=vs.110).aspx