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为100x100px。

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

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

我遇到的更大问题是能够点击每个datalist项目并运行服务器端代码。当服务器端代码运行时，代码隐藏将具有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>

或者，您可以使用＆＃34; OnItemCommand＆＃34; DataList控件中的命令。以下是有关设置的有用信息：https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.itemcommand(v=vs.110).aspx

使用datalist完成以下操作？

1 个答案: