使用数据列表完成以下操作？

Question

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

我有一个 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 为 100x100 像素。

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

这不是问题，它已经正确显示：每个数据列表项的大小为 100x100 像素，在此 space 中，我有 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>

感谢任何帮助。

Answer 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

使用数据列表完成以下操作？

Accomplishing the following with a datalist?

c#

asp.net

asp.net-4.0