如何在单击数据列表中的图像项目时触发事件?

时间:2014-05-29 12:18:09

标签: asp.net datalist

我是Asp.Net的初学者。我有一个填充图像的数据列表。我想要的是知道点击了什么图像,以便我可以根据在数据列表中单击的图像将用户重定向到不同的页面。

这是我的来源:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MediaCenter.aspx.vb" Inherits="Default2" %>

<%@ Register assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.11.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        Categories<br />
        <br />
        <br />
        <asp:DataList ID="dtlCat" runat="server" DataKeyField="FolderId" 
            DataSourceID="SqlDataSource1" Height="96px" HorizontalAlign="Center" 
            RepeatDirection="Horizontal" Width="257px" BorderStyle="Solid" 
            GridLines="Horizontal" BackColor="White" Font-Bold="False" 
            Font-Italic="False" Font-Overline="False" Font-Strikeout="False" 
            Font-Underline="False" Caption="Album Gallery" 
            ItemStyle-HorizontalAlign="Center" OnItemCommand="CatSelect" >
            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <ItemTemplate>



                <asp:Label ID="FolderNameLabel" runat="server" 
                    Text='<%# Eval("FolderName") %>'  />
                <br />
                <a href=""><img src="<%# ResolveUrl(String.Format("~/img/apple-touch-icon-114x114.png", Container.DataItem)) %>" onclick="cat_select" /></a>

                <asp:LinkButton ID="lnkBtn" runat="server"  CommandName="show"  ></asp:LinkButton>

                <asp:Label ID="UrlLabel" runat="server" Text='<%# Eval("Url") %>' />
                <br />

                <asp:Label ID="DescriptionLabel" runat="server" 
                    Text='<%# Eval("Description") %>' />
                <br />
<br />
            </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:AbcWebConnStr %>" 
            SelectCommand="SELECT * FROM [Folder]"></asp:SqlDataSource>
        <br />
        <br />
        <br />
&nbsp;</div>
    </form>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

我在代码中给出了注释,以解释它是如何工作的。

您的HTML设计器:

<asp:datalist id="DataList1" runat="server" onitemcommand="dtlCat_ItemCommand" DataKeyField="FolderId" 
            DataSourceID="SqlDataSource1" Height="96px" HorizontalAlign="Center" 
            RepeatDirection="Horizontal" Width="257px" BorderStyle="Solid" 
            GridLines="Horizontal" BackColor="White" Font-Bold="False" 
            Font-Italic="False" Font-Overline="False" Font-Strikeout="False" 
            Font-Underline="False" Caption="Album Gallery" 
            ItemStyle-HorizontalAlign="Center">
    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
    <ItemTemplate>

         <asp:Label ID="FolderNameLabel" runat="server" Text='<%# Eval("FolderName") %>'  />
         <br />

         <%--Here the "ImageID" is the Id coming from your Database--%>
         <asp:ImageButton ID="ImgBtnViewInq" runat="server" ImageUrl="~/images/Viewmail.png" CommandName="View" CommandArgument='<%# Eval("ImageID") %>' ToolTip="View" />

         <%--You can do the same from your link button here too the "ImageID" is the Id coming from your Database--%>    
         <asp:LinkButton ID="lnkBtn" runat="server"  CommandName="show" CommandArgument='<%# Eval("ImageID") %>' ></asp:LinkButton>

         <asp:Label ID="UrlLabel" runat="server" Text='<%# Eval("Url") %>' />
         <br />

         <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' />
         <br />
         <br />
     </ItemTemplate>
</asp:datalist>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:AbcWebConnStr %>" 
            SelectCommand="SELECT * FROM [Folder]"></asp:SqlDataSource>


C#代码背后:

protected void dtlCat_ItemCommand(object source, DataListCommandEventArgs e)
{
     if (e.CommandName == "View")
     {
         // Here "i" will get the imageid(CommandArgument='<%# Eval("ImageID") %>') that was given inside the image button tag
         int i = Convert.ToInt32(e.CommandArgument);
         Response.Redirect("YourPage.aspx?clickedimgID=" + i);

     }

    if (e.CommandName == "show")
    {
        // Here "i" will get the imageid (CommandArgument='<%# Eval("ImageID") %>') that was given inside the Link button tag

        int i = Convert.ToInt32(e.CommandArgument);
        Response.Redirect("YourPage.aspx?clickedimgID=" + i);

    }

}

希望有所帮助

答案 1 :(得分:1)

试试这个

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MediaCenter.aspx.vb" 
   Inherits="Default2" %>

 <%@ Register assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.11.0,    
  Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
  namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
  /TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 </head>
 <body>
      <form id="form1" runat="server">
      <div>

        Categories<br />
    <br />
    <br />
    <asp:DataList ID="dtlCat" runat="server" DataKeyField="FolderId" 
        DataSourceID="SqlDataSource1" Height="96px" HorizontalAlign="Center" 
        RepeatDirection="Horizontal" Width="257px" BorderStyle="Solid" 
        GridLines="Horizontal" BackColor="White" Font-Bold="False" 
        Font-Italic="False" Font-Overline="False" Font-Strikeout="False" 
        Font-Underline="False" Caption="Album Gallery" 
        ItemStyle-HorizontalAlign="Center" >
        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
        <ItemTemplate>



            <asp:Label ID="FolderNameLabel" runat="server" 
                Text='<%# Eval("FolderName") %>'  />
            <br />
            <a href="yourpage.aspx?ID=<%#Eval("ImageID")%>"><img src="<%# ResolveUrl(String.Format("~/img/apple-touch-icon-114x114.png", Container.DataItem)) %>"/> </a>

            <asp:LinkButton ID="lnkBtn" runat="server"  CommandName="show"  ></asp:LinkButton>

            <asp:Label ID="UrlLabel" runat="server" Text='<%# Eval("Url") %>' />
            <br />

            <asp:Label ID="DescriptionLabel" runat="server" 
                Text='<%# Eval("Description") %>' />
            <br />
          <br />
        </ItemTemplate>
       </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:AbcWebConnStr %>" 
        SelectCommand="SELECT * FROM [Folder]"></asp:SqlDataSource>
    <br />
    <br />
    <br />
   &nbsp;</div>
  </form>
 </body>
</html>

希望这可能会对你有所帮助。让我知道它是否对你有帮助。