使用数据列表完成以下任务？答案

【问题标题】：Accomplishing the following with a datalist?使用数据列表完成以下任务？
【发布时间】：2016-04-20 23:32:13
【问题描述】：

我不知道如何完成这样的事情，所以就这样吧。

我有一个datatable，其中包含以下数据：

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 文件：Green.png、Red.png、Yellow.png。每个 PNG 为 100x100px。

我一直使用的数据控件是datalist。每个datalist 项目具有以下内容：一个100x100px div 用于根据Input 列和3 个标签显示PNG，用于列Room、Cook 和Waiter。

这不是问题，它已经正确显示：每个数据列表项的大小为 100x100px，在此空间内我有 3 个 labels 显示其他列。

我遇到的更大问题是能够单击每个数据列表项并运行服务器端代码。当服务器端代码运行时，代码隐藏将有Room、Cook。和Waiter 在那个datalist 项目中。这是我真正陷入困境的地方。

我见过的大部分部分解决方案都是使用 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>

感谢任何帮助。

【问题讨论】：

需要更多信息。提供一些 ASPX 标记和其他代码，以帮助找到解决方案。您可以在 DataList 项模板中添加三个隐藏字段并将这些隐藏控件绑定到其他三列吗？
我已经包含了 aspx 标记。
我必须在 DataList 项模板中显示其他三列的值。我可以添加隐藏值，但是如何为特定项目调用代码？
你没有点击的控制权。将您的标签更改为 LinkButton 控件，然后使用 CSS 将它们设置为看起来像普通文本。您将能够在这些控件中使用代码。<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" CommandArgument='<%# Eval("RoomNum")%>'><%# Eval("RoomNum")%></asp:LinkButton> 您甚至可以将 Text 绑定到“CommandArgument”属性，就像您在示例中使用 Text 一样将值传回。
顺便说一句，我认为要使用“CommandArgument”，您还需要设置“CommandName”属性。 msdn.microsoft.com/en-us/library/…

标签： c# asp.net asp.net-4.0

【解决方案1】：

用 LinkButton 控件包装您的主 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

【讨论】：